error in multiple uploads Vue / firebase (undefined or null reference)

Question

The following code works perfectly, all photos are uploaded to the firebase storage normally, except I want to push the downloadURL to an array, it doesn't do that one as it sees it undefined or null reference!

I have created the form like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <form @submit.prevent="uploadImage" method="POST" enctype="multipart/form-data">
        <b-form-file v-model="files" class="mb-3" accept="image/*" multiple     name="file[]"
    placeholder="Choose a file..."
    drop-placeholder="Drop file here...">
    </b-form-file>

       <b-button type="submit">upload</b-button>
    </form>

uploadImage() {
     // looping through chosen photos

    for (var i in this.files) {
       let file = this.files[i];

       uploadMechanism(file)

    }
              
    function  uploadMechanism(file) {
            
         var storageRef = fbAuth.storage().ref('products/' + file.name);
         var uploadTask = storageRef.put(file);
            
         uploadTask.on('state_changed', function(snapshot)  {
                  
        // Get task progress

       var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                  console.log('Upload is ' + progress + '% done');

                }, function(error)  {
                  // Handle unsuccessful uploads
                  console.log(error)
                }, function()  {
                  // Handle successful uploads on complete
                  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL)  {
                    // var downloadURL = uploadTask.snapshot.downloadURL;
                    // console.log('File available at', downloadURL);
                  
              // problem starts here!!! 
              
                  this.product.images = this.product.images || [];
                  this.product.images.push(downloadURL);

             // If I create any variable or array to assign the URL to it,
             // it fails with undefined or null reference!


                  }).catch(function(err)  {console.log(err)});
                });
          }
          // console.log(this.product.images)
      },

my target is to get the downloadURL and push it into any array,.. that's it! code works with image upload by the way!

Answer 1

It's possible that this inside your function() is not Vue instance. You can use arrow function or assign self = this outside of upload function

uploadImage() {
     // looping through chosen photos
    let self = this
    for (var i in this.files) {
       let file = this.files[i];

       uploadMechanism(file)

    }

    function  uploadMechanism(file) {

         var storageRef = fbAuth.storage().ref('products/' + file.name);
         var uploadTask = storageRef.put(file);

         uploadTask.on('state_changed', (snapshot) => {

        // Get task progress

       var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                  console.log('Upload is ' + progress + '% done');

                }, function(error)  {
                  // Handle unsuccessful uploads
                  console.log(error)
                }, function()  {
                  // Handle successful uploads on complete
                  uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                    // var downloadURL = uploadTask.snapshot.downloadURL;
                    // console.log('File available at', downloadURL);

              // problem starts here!!! 

                  let images = self.product.images || [];
                  images = images.concat([downloadURL])
                  self.product = {
                    ...self.product,
                    images: images
                  }

             // If I create any variable or array to assign the URL to it,
             // it fails with undefined or null reference!


                  }).catch(function(err)  {console.log(err)});
                });
          }
          // console.log(this.product.images)
      },

Answer 2

ok I have explained more in here to be easier to understand :)

https://www.youtube.com/watch?v=fFret7ouo4A

it is displaying the first image twice!

here is the modified code:

 uploadImage(e) {
        if (e.target.files) {
          for (var i in Object.entries(e.target.files)) {
            let file = e.target.files[i];
            console.log(file)

          var storageRef = fbAuth.storage().ref('products/' + file.name);
          var uploadTask = storageRef.put(file);
            
          uploadTask.on('state_changed', (snapshot) => {
            
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log('Upload is ' + progress + '% done');

            }, (error) =>  {
              
              // Handle unsuccessful uploads
                  console.log(error)

                }, () =>  {
                  
                  // Handle successful uploads on complete
                  uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                    
                    let images = this.product.images || [];
                    images = images.push(downloadURL)
                    // self.product = {
                      //   ...self.product,
                    //   images: images
                    // }
                    console.log(images)
                  }).catch((err) => {console.log(err)});
                });
          }
        }
      },

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>