Upload to Google Cloud Storage in a "For Loop" (async)

Question

I am new to Javascript. I'm trying to make a loop that uploads the images to Google Cloud Storage. With this code, the image is uploaded correctly. The problem is that the path (URL) is not saved in the database AFTER the upload.

I tried using async and await. However, I do not understand how it works. I want the for-loop and everything inside to be finished before saving post.

Thank you in advance,

for (const [i, file] of files.entries()) {
  newFileName = "img_" + Date.now() + "_" + file.originalname;
  imagePath = getPublicUrl(newFileName);

  myfile = bucket.file(newFileName);


  stream = myfile.createWriteStream({
    metadata: {contentType: file.mimetype},
    resumable: false
  });


 sharp(file.buffer)
 .resize({ width: 1080 })
 .pipe(stream)
 .on('finish', () => {
   post.images.push(imagePath);
 })
}
post.save();

You will want to study the JavaScript Promise language features. You alluded to this in your post with async and await. Think of each iteration of the loop as adding a new promise to an array. When your async work started in the loop completes, you will resolve the promise added by that iteration. At the end of the loop, you will block on a Promise.all() that waits for all the promises in an array to complete. I suggest you persevere on Promise and if you have questions on that area ... after study ... post a question on that topic. — Kolban, Nov 25 '19 at 18:35

score 1 · Accepted Answer · answered Nov 25 '19 at 20:01

You want to create an array of pending promises for every request, then you can wrap them in the Promise method Promise.all([<\PENDING PROMISES>]).

EXAMPLE:

// we'll push all the promises into this array:
const pendingPromises = []

for (const {i, file} of files.entries()) {
  // just wrap it in a promise 
  // and push into the promise array:
  pendingPromises.push(new Promise((resolve, reject) => {
    // do everything the same as before for each iteration
    newFileName = "img_" + Date.now() + "_" + file.originalname;
    imagePath = getPublicUrl(newFileName);

    myfile = bucket.file(newFileName);


    stream = myfile.createWriteStream({
      metadata: {contentType: file.mimetype},
      resumable: false
    });


   sharp(file.buffer)
   .resize({ width: 1080 })
   .pipe(stream)
   .on('finish', () => {
     post.images.push(imagePath);
     resolve(imagePath)
   })
  }))

}

// wait for all the async code to complete execution and resolve before saving the posts: 
Promise.all(pendingPromises)
.then(imagePaths => post.save()) /*<-- all the promises resolved without errors, now you can save*/
.catch(() => console.log('well that didnt work...'))

Upload to Google Cloud Storage in a "For Loop" (async)

1 Answers1