get download url from multiple file upload firebase storage

Question

I am new in firebase and angularjs and i am having difficulties in getting download url from firebase storage and store them in firebase realtime database.

I was able to upload multiple files to firebase storage. the problem is when i store the download url into firebase realtime database, all database url value are same.It should different based each files downloadURL.

Here my script:

$scope.submitPhotos = function(file){
  console.log(file);
  var updateAlbum = [];
  for (var i = 0; i < file.length; i++) {                
    var storageRef=firebase.storage().ref(albumtitle).child(file[i].name);
    var task=storageRef.put(file[i]);

    task.on('state_changed', function progress(snapshot){
      var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
      if (percentage==100){
      storageRef.getDownloadURL().then(function(url) {
        var galleryRef = firebase.database().ref('gallery/'+albumkey);
        var postkey = firebase.database().ref('gallery/'+albumkey).push().key;       
        updateAlbum={img:url};
        firebase.database().ref('gallery/'+ albumkey+'/'+postkey).update(updateAlbum);
      });
    };
  })  
  };
};

As you can see i was able store the url into database but all of the urls are same. What i need is every key store each different links from storage.

Any helps appreciated. Thanks

Answer 1

function uploadImg(file,i) {

return new Promise((resolve,reject)=>{


var storageRef=firebase.storage().ref("store-images/"+file[i].file.name);
             task = storageRef.put(file[i].file);

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

            var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
            console.log(percentage);

            // use the percentage as you wish, to show progress of an upload for example
            }, // use the function below for error handling
            function (error) {  
              console.log(error);
            }, 
            function complete ()  //This function executes after a successful upload
            {

                    task.snapshot.ref.getDownloadURL().then(function(downloadURL) {

                        resolve(downloadURL)

                    });


            });  

    })

}


async function putImage(file) {

    for (var i = 0; i < file.length; i++) {

            var dd = await uploadImg(file,i);

            firebase.database().ref().child('gallery').push(dd);
        }

    }

Answer 2

Try using the code below:

$scope.submitPhotos = function(file){
  console.log(file);
  var updateAlbum = [];
  for (var i = 0; i < file.length; i++) {                
    var storageRef=firebase.storage().ref(albumtitle).child(file[i].name);
    var task=storageRef.put(file[i]);

    task.on('state_changed', function progress(snapshot)
    {
      var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
      // use the percentage as you wish, to show progress of an upload for example
    }, // use the function below for error handling
     function (error) {  

          switch (error.code) {
            case 'storage/unauthorized':
              // User doesn't have permission to access the object
              break;

            case 'storage/canceled':
              // User canceled the upload
              break;

            case 'storage/unknown':
              // Unknown error occurred, inspect error.serverResponse
              break;
          }

      }, function complete ()  //This function executes after a successful upload
      {
        let dwnURL = task.snapshot.downloadURL;
        let galleryRef = firebase.database().ref('gallery/'+albumkey);
        let postkey = firebase.database().ref('gallery/'+albumkey).push().key;       
        updateAlbum={img:dwnURL};
        firebase.database().ref('gallery/'+ albumkey+'/'+postkey).update(updateAlbum);
      });  


  };
};

All the best!