JS forEach - process images files in the order they are loaded not random

Question

I want to upload multiple images (different sizes), compress each image and add it to a PDF file in the order they are uploaded. When all the uploaded images are processed I want to save the PDF file

In the attached image the FileList is in the correct order but when I try to process them the order is completly wrong. It starts with the files[13] (the smallest file) then generate the pdf and then process the rest of the images.

How is the correct way to implement this and to make sure the PDF is saved only after all the images are proccesed in the correct order Many thanks!

I have an input file:

<input id="file" type="file" accept="image/*" multiple .....>

And I have a function to to process the images:

Array.from(files).forEach(async (file: any, i: number) => {
    console.log("Index inside forEach: "+i);
    imageCompression(file, compressOptions).then(function (compressedFile) {
            let fileUrl = URL.createObjectURL(compressedFile)
            let fileType = compressedFile.type === "image/png" ? "PNG" : "JPEG";
            const pdfWidth = PDF.internal.pageSize.getWidth();
            const pdfHeight = PDF.internal.pageSize.getHeight();
            PDF.addImage(fileUrl, fileType, 0, 0, pdfWidth, pdfHeight, "alias"+i, 'SLOW');
            
            console.log("Index inside imageCompression: "+ i + " -> " + compressedFile.name);
            if ( i < files.length - 1) { 
                PDF.addPage('a4');
            }
            if ( i === files.length - 1) { 
                console.log('!!!! GENERATE PDF');
                PDF.save('fisa_'+new Date().getTime()+'.pdf');
            }
    })
    .catch(function (error) {
            console.log(error.message);
    });

});

using async/await in a loop is not a good time. you'll need to use Promise.all if you want to fulfill many promises. — Matt Oestreich, Jan 10 '22 at 17:28
You ask about processing in order, but it seems like what you really care about is generating PDF after _all_ images are loaded — Parzh from Ukraine, Jan 10 '22 at 17:31

Parzh from Ukraine · Accepted Answer · 2022-01-10T17:47:05.783

Change Array#forEach to Array#map:

const compressions = Array.from(files).map((file) => {
  return imageCompression(file, compressOptions);
});

Promise.all(compressions).then((compressedImages) => {
  // the ordering of images in `compressedImages` is the same as in `files`
  // you can do the PDF.addImage(...) and PDF.addPage(...) bits here
});

With the modern async / await syntax this looks slightly better:

const compressions = Array.from(files).map((file) => {
  return imageCompression(file, compressOptions);
});

const compressedImages = await Promise.all(compressions);

// the ordering of images in `compressedImages` is the same as in `files`
// you can do the PDF.addImage(...) and PDF.addPage(...) bits here

Check out this answer for additional insights into promises in loops.

Tried the async / await and is working nice. It was so simple. Super thanks! — godzo101, Jan 11 '22 at 11:01

JS forEach - process images files in the order they are loaded not random

1 Answers1