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!

ittus · Accepted Answer · 2019-08-30 01:34:12Z

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)
      },

answered Aug 30, 2019 at 1:34

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nasr Galal Over a year ago

no errors, but photos do not appear after binding them,... I converted to arrow functions and got this: [Vue warn]: Error in v-on handler: "TypeError: Object expected"

Nasr Galal Over a year ago

``` <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> ``` bootstrapVue I guess it accepts only objects

Nasr Galal · Accepted Answer · 2019-08-30 11:08:49Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related