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

})();

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

})();

• javascript
• jquery
• forms
• file-upload
• dropzone.js

• You could have jQuery listen for a submit event from your form, and react by pulling the Dropzone fields into your form element (organized however you wish) before submitting. Alternately, you could set up a listener for each Dropzone's init event and handle them individually (dropzonejs./#toc_4) – Michael Zalla Commented Feb 26, 2014 at 17:46
• "Whenever I create a new row, I'm creating a new Dropzone area." Could you show us your JavaScript code that handles this? You should be able to append new Dropzones to something more specific than just the body – Michael Zalla Commented Feb 26, 2014 at 17:48
• I updated the question with the JS – Jason Varga Commented Feb 26, 2014 at 18:39

1 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 acplish 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).