0
552
ViewsJS forEach - process images files in the order they are loaded not random
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);
});
});
1 answers
Answer question0
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.