Javascript async how to await for a varying number of uploadTasks to all be completed?

Question

I have saveBlogPost() function that needs to perform the following actions:

• Call the uploadImages() function to update the images of the blogPost to Firebase storage. Number of images is not fixed.
• Wait for the upload for all images to complete with success or error. If success the URL for each images will be available in the blogPost object.
• Act based on the result of the upload
  • If success: save post to Firestore
  • If fail: display error message to the user

My question is how to wait for a varying number of uploads?

Here is my code so far:

---

savePost() function:

function savePost() {
  uploadImages();
}

uploadImages() function:

Note: images is an array of the image files to be uploaded.

function uploadImages() {
  images.forEach((image) => {
    const uploadTask = storageRef.put(file,metadata);
    uploadTask.on('state_changed',
      function progress() {
        //UPLOAD PROGRESS BAR
      },
      function error(err) {
        //SET ERROR
      },
      function complete() {
        //UPDATE IMAGE URL IN BLOGPOST OBJECT
        //SET COMPLETE
      }
  });
}

QUESTION:

My intent is to make savePost() function async and await for the uploadImages() function. But how can I resolve/reject the uploadImages() function only after ALL the images have resolved/rejected ?

Something like:

async function savePost() {
    const result = await uploadImages();
    // ACT BASED ON RESULT
  }

But I don't know what to do with the uploadImages() function in order to resolve/reject only after all the images are done.

How can I do this?

Answer 1

function uploadImages() {
    const promises = images.map(async image =>
        new Promise((resolve, reject) => {
            const uploadTask = storageRef.put(file, metadata);
            uploadTask.on('state_changed',
                function progress() {
                    //UPLOAD PROGRESS BAR
                },
                function error(err) {
                    //SET ERROR
                    reject(err);
                },
                function complete() {
                    //UPDATE IMAGE URL IN BLOGPOST OBJECT
                    //SET COMPLETE
                    resolve();
                }
            );
        })
    );

    return Promise.all(promises);
}

Answer 2

A forEach loop will not work for async / await as you would like it to work.

Try using a simple for loop:

for(let i = 0; i < n; i++){
    let response = await savePost();
}