Hochladen von mehreren Dateien einzeln mit separaten Dropzones in einer form

Ich habe ein Formular, wo Sie ständig weitere Zeilen hinzufügen.

Eine Zeile enthält name und avatar, etc.

Den ich nutzen möchte Dropzone.js zu jeder avatar eine andere abwerfbaren Feld.

Immer wenn ich eine neue Zeile, ich bin momentan dabei, eine neue Dropzone-Bereich. Das ist in Ordnung, und funktioniert.

Allerdings, wenn ich das Formular Absenden, die Dateien sind nirgends zu finden. Ich kann verstehen, warum, weil die Datei, die Felder sind nicht in form, Sie sind an den Körper.

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

Ich bin initialisieren der dropzone auf der avatar div.

Ist es möglich, fügen Sie Sie zur Datei Felder innen form?

Hier ist was Los in der JS. Es verdummt sich ein wenig für die Kürze.

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

})();