Upload multiple individual files using separate Dropzones in one form

Question

I have a form where you can constantly add more lines.
One line contains the name and avatar, etc.

I want to use Dropzone.js so that each avatar differs in the drop field.

Whenever I create a new row, I create a new Dropzone area. It works just fine.

However, when I submit the form, the files were not found anywhere. I can understand why, since the file fields are not in the form, they are added 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 initialize dropzone to a div avatar.
Can I add them to file fields inside a form?

This is what happens in JS. He staggered 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

, , Dropzone .

Dropzone , submit .

, :

• , Dropzones ( : Dropzones, submit , Dropzones ). .

  , , , , .

• one Dropzone , AJAX. (. ). , dropzone- dropzone, , "" dropzone ( , - Dropzone).