Detect when all Dropzones have been appended to a form

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();