title: Why aren't my files being uploaded to Firestore not uploading in order?
body: <p>I am currently trying to make an Image Uploader using Vue 2, Vuetify and Firebase/Firestore. At the moment, my images upload successfully to Firestore and the reference download URL is stored in an array called "images" but they are not stored in order like they appear so on my frontend.</p>
  
  <p>This is currently how the frontend looks like with files selected to be uploaded: </p>
  
  <p><img src="https://i.imgur.com/GSQqYtM.png" alt="files selected on frontend"></p>
  
  <p>When pressing Submit Presentation, I have it print the files in the console: 
  <a href="https://i.imgur.com/GSQqYtM.png" rel="nofollow noreferrer">https://i.imgur.com/GSQqYtM.png</a></p>
  
  <p><img src="https://i.imgur.com/WJUjr3t.png" alt="files in console"></p>
  
  <p>As you can see, they print in order, but another issue that arises is that the images don't get to sent to the Firebase database, but they still get uploaded to Firestore. For it to show up in the Firebase database, I would have to press the Submit Presentation button again or else the array in Firebase will just show up as images: []. This is a whole other issue I assume but it might help with figuring out the main issue.</p>
  
  <p>When I press Submit Presentation again, the images array gets updated with each download URL, but not in order:</p>
  
  <p><img src="https://i.imgur.com/OtslpY6.png" alt="images array from Firebase"></p>
  
  <p>It says Slide1 then Slide3, Slide12, Slide9, etc. I have no idea why this is happening. Even in Firestore, they are not in order. It's a complete different order from the one in the Firebase database.</p>
  
  <p><img src="https://i.imgur.com/qatNjTp.png" alt="Firestore"></p>
  
  <p>Here is how I handle the file uploading when the Submit Presentation button is pressed:</p>
  
  <pre><code>    uploadImages() {
        if (this.files) {
          this.files.forEach(file =&gt; {
            var storageRef = fb.storage().ref('presentations/' + file.name);
            //storageRef.put(file);
  
            let uploadTask = storageRef.put(file);
  
            uploadTask.on('state_changed', (snapshot) =&gt; {
  
            }, (error) =&gt; {
              //Errors handled her
            }, () =&gt; {
              uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) =&gt; {
                this.presentation.images.push(downloadURL);
              })
            })
            console.log(file);
            db.collection("presentations").doc("mainPresentation").update(this.presentation)
          })
        }
      }
  </code></pre>
  
  <p>I just want the images to be stored in order like how they are selected, because as you probably noticed, these are presentation images, so when I have to read from Firebase, I don't want the presentation images being displayed in a different order.</p>
  
  <p>Would appreciate any help, thanks!</p>