How to get URL from files stored in firebase Storage?-CodePudding

I try to get URL of pictures stored in the Firebase Storage. Following the reading of Firebase's documentation, I understand that I need to use the function getDownloadURL() which return a promise. The following code is the closest solution that I get for the moment.

getUserPicture(data: UserItem[]) {
data.forEach( async  (item) => {
  const storage = firebase.storage();
  const pathReference = storage.ref(item.userId   '/profile.jpg'); 

  item.picture = await pathReference.getDownloadURL()
  .then((url) => {
      return url.toString();
   })
   .catch((error) => {
       console.error(error);
   });
   console.log('TEST : item.picture: '   item.picture   ' for user: '   item.lastname );  
});

}

The console.log return the URL of the profile picture for each user. Unfortunately, the call of the function getUserPicture() does not get the job done (item.picture are still undefined). I think it's because the top function should be async in order to wait the process in the loop.

Do you know how to resolve such problem?

CodePudding user response：

You should not use async/await within a forEach() loop, see "JavaScript: async/await with forEach()" and "Using async/await with a forEach loop".

And since you execute a variable number of calls to the asynchronous getDownloadURL() method in parallel, you should use Promise.all(), as follows:

async getUserPicture(data: UserItem[]) {

    const storage = firebase.storage();
    const promises = [];

    data.forEach((item) => {
        const pathReference = storage.ref(item.userId   '/profile.jpg');
        promises.push(pathReference.getDownloadURL());
    });

    const urlsArray = await Promise.all(promises)

});