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

Because the `Promise.all( )` is returned immediately, before the download is completed. — Jacob van Lingen, Apr 01 '22 at 06:00
Thanks bro. So how should I use promise.all in such scenario. — shiblee saidul, Apr 01 '22 at 06:06
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — derpirscher, Apr 01 '22 at 06:32

score 1 · Answer 1 · answered Apr 01 '22 at 14:49

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

score 0 · Answer 2 · answered Apr 01 '22 at 14:49

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.

Why promise.all in below code returning an empty array

2 Answers2