title: Uploading multiple single files using separate Dropzones in one form
body: <p>I have a form where you can continually add more rows.<br>
  One row contains name and avatar, etc.  </p>
  
  <p>I want to use Dropzone.js to make each avatar a different droppable field.</p>
  
  <p>Whenever I create a new row, I'm creating a new Dropzone area. This is fine, and works.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;form&gt;
  
    &lt;div class="person" id="person_1"&gt;
      &lt;div class="avatar"&gt;&lt;/div&gt;
      &lt;input type="text" name="name_1" /&gt;
    &lt;/div&gt;
  
    &lt;!-- then these are added via js --&gt;
    &lt;div class="person" id="person_2"&gt;
      &lt;div class="avatar"&gt;&lt;/div&gt;
      &lt;input type="text" name="name_2" /&gt;
    &lt;/div&gt;
    &lt;div class="person" id="person_3"&gt;...&lt;/div&gt;
    &lt;div class="person" id="person_4"&gt;...&lt;/div&gt;
    &lt;!-- etc --&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm initializing the dropzone on the <code>avatar</code> div.<br>
  Is it possible to add them to file fields <strong>inside</strong> the form?</p>
  
  <p>Here's what's going on in the JS. It's dumbed down a little for brevity.</p>
  
  <pre><code>(function(){
  
    var count = 1;
    var $form = $('form');
    initDropzone( $('#person_1') );
  
    function addPerson() {
      count++;
      var $personDiv = $('&lt;div class="person" id="person_'+count+'"&gt;...&lt;/div&gt;').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);
  
  })();
  </code></pre>