How to upload multiple images to Firebase Storage and return multiple downloadURLs

Question

We are working on a simple e-commerce app where we need to upload multiple product images. Using Vuejs and Vue-Croppa, we need to upload the images to firebase storage, retr

Answer 1

For your second issue.....

Set up a promise for each image you want to upload.

So in your loop call a method "similar" to the below (I've just grabbed this out of one of my projects):

uploadImageAsPromise (imageFile) {
    const self = this;

        return new Promise(function (resolve, reject) {
            var storageRef = firebase.storage().ref("/imagestestnew/"+imageFile.name);

            //Upload file
            var task = storageRef.put(imageFile);


            //Update progress bar
            task.on('state_changed',
                function progress(snapshot){

                    var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                    console.log("percentage" + percentage)
                    self.progressUpload = percentage;
                },
                function error(err){
                    console.log("error")
                },
                function complete(){
                    console.log("done")
                    var downloadURL = task.snapshot.downloadURL;
                }
            );
        });
}