Why promise.all in below code returning an empty array

Question

This is the code snippet where I want to get the URL of all uploaded images in promise.all but when I am invoking the uploadFile function, it returns an empty array. Can anyone please help me on this issue.

export default function uploadFile(fileInfo) {
  const promises = [];

  fileInfo.forEach((item) => {
    const uploadTask = projectStorage
      .ref()
      .child(`${item.path}/${item.imageName}`)
      .put(item.file);
    // promises.push({ task: uploadTask });
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        promises.push(snapshot);
        const progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

        console.log(`Progress: ${progress}%`);
      },
      (error) => console.log(error.code),
      async() => {
        promises.push(await uploadTask.snapshot.ref.getDownloadURL());
      }
    );
  });
  return Promise.all(promises);
}

code snippet of my problem

Answer 1

The problem is that you're populating the promises inside the on listener, and there is nothing that makes the return Promise.all(promises) wait until the on calls have completed.

Luckily, calling put returns a promise already, which resolves once the upload has completed. So instead of using the on callback to signal completion, you can wait for the put to resolve:

export default function uploadFile(fileInfo) {
  const promises = fileInfo.map((item) => {
    const uploadRef = projectStorage
      .ref()
      .child(`${item.path}/${item.imageName}`)l
    const uploadTask = uploadRef.put(item.file);
    /*
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

        console.log(`Progress: ${progress}%`);
      },
      (error) => console.log(error.code),
      async() => { }
    );
    */
    return uploadTask.then(() => return uploadRef.getDownloadURL());
  });
  return Promise.all(promises);
}

Answer 2

Each time you go around the forEach loop you need to:

• Create a promise
• Add it to the promises array

You aren't creating any promises. You're using a regular callback API and are trying to put the final result from the callback into the array (but that happens in the future, which is after you have passed the empty array to Promise.all .

See How do I convert an existing callback API to promises? for how to wrap uploadTask.on in a promise.

Also see this similar question about converting calling a callback API multiple times and gathering all the results together using Promise.all .