• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

362
Vistas
JS 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);
    });

}); enter image description here

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda