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( <array> ) is returned immediately, before the download is completed. — Jacob van Lingen
– Jacob van Lingen, Commented Apr 1, 2022 at 6:00
Thanks bro. So how should I use promise.all in such scenario. — shiblee saidul
– shiblee saidul, Commented Apr 1, 2022 at 6:06
Does this answer your question? Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference — derpirscher
– derpirscher, Commented Apr 1, 2022 at 6:32

Frank van Puffelen · Accepted Answer · 2022-04-01 14:49:31Z

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

Quentin · Accepted Answer · 2022-04-01 14:49:00Z

0

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.

answered Apr 1, 2022 at 14:49

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Why promise.all in below code returning an empty array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related