send formData using dropzone.js on sendingmultiple

Question

The dropzone.js documentation/wiki doesn't say how to send form fields.

I just read about the FormData object and it says how to populate the object with the form fields. The problem is that populating the object with the whole form won't get the data send, but if I append the form fields one by one they'll get sent...

This works:

formData.append('name', jQuery('#name').val());

This doesn't:

var myForm = document.querySelector('form');
formData = new FormData(myForm);

The first example will send the #name field but the second won't send anything (just the files).

How can I trigger that? I'd like to make dropzone send the whole form along the files (both in the same request).

init: function() {
    var myDropzone = this,
        submitButton = document.querySelector("[type=submit]");

    submitButton.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
    });

    myDropzone.on('sendingmultiple', function(data, xhr, formData) {
        // this will get sent
        formData.append('name', jQuery('#name').val());
        // this won't
        var myForm = document.querySelector('form');
        formData = new FormData(myForm);
    });
    myDropzone.on('successmultiple', function(files, response) {
        //window.location.replace("/home");
    });
    myDropzone.on('errormultiple', function(files, response) {
        alert(response);
    });
}

Answer 1

see comments...

myDropzone.on('sendingmultiple', function(data, xhr, formData) {

    // this will get sent
    formData.append('name', jQuery('#name').val());

    // this won't -- we don't need this rn, we can just use jQuery
    // var myForm = document.querySelector('form');

    // you are overwriting your formdata here.. remove this
    //formData = new FormData(myForm);

    // instead, just append the form elements to the existing formData
    $("form").find("input").each(function(){
        formData.append($(this).attr("name"), $(this).val());
    });
});

Answer 2

init: function() {
  this.on("sending", function(file, xhr, formData) { 

    //formData.append('task_name', jQuery('#task_name').val());

    $("form").find("input").each(function(){
      formData.append($(this).attr("name"), $(this).val());
  });
  
  });

}