Uploading multiple single files using separate Dropzones in one form

Question

I have a form where you can continually add more rows.
One row contains name and avatar, etc.

I want to use Dropzone.js to make each avatar a different droppable field.

Whenever I create a new row, I'm creating a new Dropzone area. This is fine, and works.

However, when I submit the form, the files are nowhere to be found. I can understand why, because the file fields aren't in the form, they are appended to the body.

<form>

  <div class="person" id="person_1">
    <div class="avatar"></div>
    <input type="text" name="name_1" />
  </div>

  <!-- then these are added via js -->
  <div class="person" id="person_2">
    <div class="avatar"></div>
    <input type="text" name="name_2" />
  </div>
  <div class="person" id="person_3">...</div>
  <div class="person" id="person_4">...</div>
  <!-- etc -->

</form>

I'm initializing the dropzone on the avatar div.
Is it possible to add them to file fields inside the form?

Here's what's going on in the JS. It's dumbed down a little for brevity.

(function(){

  var count = 1;
  var $form = $('form');
  initDropzone( $('#person_1') );

  function addPerson() {
    count++;
    var $personDiv = $('<div class="person" id="person_'+count+'">...</div>').appendTo($form);
    initDropzone( $personDiv, count ); 
  }

  function initDropzone( $el, count ) {
    $el.find('.avatar').dropzone({
      autoProcessQueue: false,
      uploadMultiple: false,
      parallelUploads: 100,
      maxFiles: 1,
      url: '/' // dropzone requires a url param
    });
  }


  $('#add_person').on('click', addPerson);

})();

Answer 1

The problem is not that the fields are appended to the body, but that the whole Dropzone uploading process is different from a normal form submission.

You can not use Dropzone to drop files in the browser, and then use the normal form submit to submit it.

There are two ways to accomplish what you are doing:

1. Don't let the user submit the form until all your files in the Dropzones have uploaded (or better yet: create event listeners on all your Dropzones that will fire the submit function on the form as soon as all Dropzones have uploaded). You need to store the files on your server and wait for the actual form submission to assemble the data.

   This is by far the most elegant solution, because this way the files are already uploading while the user may still be editing form data.

2. Create one Dropzone on the actual form, that will handle the whole uploading of the form via AJAX. (See the docs for that). If you want different dropzone targets inside that dropzone, you'll have to create them separately, and "delegate" the file drops to the main dropzone (basically, just take the file object, and add it to the main Dropzone).