Tengo una página con varias zonas de colocación, cada una configurada para una imagen. Cuando el usuario envía el formulario, todas las imágenes adjuntas a las zonas de colocación se redimensionan y luego se agregan al resto de los campos del formulario.
Cuando esto está hecho, envío los datos del formulario a través de fetch. Necesito esperar a que todas las imágenes cambien de tamaño y se agreguen y luego envíe el formulario. ¿Cómo puedo hacer esto?
Código actual:
dropzones.forEach((dropzone, key, dropzones) => { let { paramName } = dropzone.options let { resizeWidth } = dropzone.options if (dropzone.files.length > 0){ dropzone.resizeImage(dropzone.files[0], resizeWidth, null, 'contain', resizeDone, paramName); // note: resizeImage() in dropzone.js has been edited to add paramName } if (Object.is(dropzones.length - 1, key)) { // this is the final iteration console.log('last one') // output before resizing complete } }) function resizeDone(newfile, paramName){ console.log(newfile); console.log(paramName); form.append(paramName, newfile); }De alguna manera necesito detectar que la imagen final ha sido redimensionada y agregada antes de llamar a fetch();
Sugeriría: cuente el número total de zonas de colocación, luego incremente un contador cada vez que se agregue una imagen al formulario, de esa manera sabrá cuándo se agregaron todas las imágenes y luego podrá llamar a buscar.
let total = dropzones.length, appended = 0; dropzones.forEach({//... your code function resizeDone(newfile, paramName){ form.append(paramName, newfile); appended++; if (appended === total) { fetch(//... } }