I have a page with multiple dropzones each set up for one image. When the user submits the form, all the images attached to the dropzones are resized and then appended to the rest of the form fields.
When this is done I send the form data via fetch. I need to wait for the all the images to be resized and appended and then send the form. How can I do this?
Current code:
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);
}
Somehow I need to detect the final image has been resized and appended before calling fetch();
I would suggest: Count the total number of dropzones, then increment a counter each time an image is appended to the form, that way you know when all images have been appended and then you can call fetch.
let total = dropzones.length, appended = 0;
dropzones.forEach({//... your code
function resizeDone(newfile, paramName){
form.append(paramName, newfile);
appended++;
if (appended === total) {
fetch(//...
}
}