I am working on a page where multiple dropzones are set up for individual images. Once the user submits the form, all the images attached to the dropzones are resized and then added to the rest of the form fields.
After resizing and appending the images, I use fetch to send the form data. However, I need to ensure that all the images have been resized and appended before sending the form. How can I achieve this?
Here is the current code snippet:
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);
}
if (Object.is(dropzones.length - 1, key)) {
console.log('last one')
}
})
function resizeDone(newfile, paramName){
console.log(newfile);
console.log(paramName);
form.append(paramName, newfile);
}
I need a way to determine when the final image has been resized and appended before triggering the fetch() method;