I've been exploring the dropzone.js documentation/wiki and I noticed that there is no clear explanation on how to send form fields along with files.
Recently, I came across the FormData object which provides a way to populate form fields within an object. However, I encountered an issue where simply populating the whole form object doesn't result in the data being sent. But, appending the form fields one by one seems to work...
For example:
formData.append('name', jQuery('#name').val());
But this approach doesn't work:
var myForm = document.querySelector('form');
formData = new FormData(myForm);
In the first example, only the #name field gets sent, whereas in the second example nothing gets sent except the files.
Is there a way to trigger the sending of form fields along with the files in a single request using dropzone? That's my main goal.
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);
});
}