This is a complete working dropzone with extra parameters because other methods found online didn't work for me.
Dropzone.autoDiscover = false;
var valid_extensions= /(\.pdf|\.doc|\.docx|\.xls|\.xlsx|\.jpg|\.jpeg|\.png|\.tiff|\.wpd)$/i;
$('#insurance_type').on('change',function(){
ins_Type=$(this).val();
});
$('#insurance_expirationdate').on('change',function(){
ins_Date=$(this).val();
});
myDropzone = new Dropzone("#dropzdoc",{
url: 'Your URL where to send the data to',
//this is how extra parameters got passed to dropzone
sending: function(file, xhr, formData) {
formData.append("insurance_type", ins_Type); //name and value
formData.append("insurance_expirationdate", ins_Date); //name and value
},
//end of sending extra parameters
acceptedFiles:".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.tiff,.wpd",
dictInvalidFileType: "You can't upload files of this type, only png or jpg file",
paramName: "insurance_doc",
createImageThumbnails:false,
dictDefaultMessage: "<div style='text-align:left;'>- Select your Insurance Type.<br>\n\
- Select 1 Date.<br>\n\
- Drop your file here.<br><div>\n\
Only <span style='color:red;'>1</span> file is acccepted.",
autoProcessQueue:false,
maxFiles: 1
});
myDropzone.on("processing", function(file, progress) {
$('#upload_process').fadeIn();
});
myDropzone.on("success", function(file,response) {
$('#upload_process').fadeOut();
});
myDropzone.on("addedfile", function(file) {
//test extension files
if (this.files.length) {
var _i, _len;
for (_i = 0, _len = this.files.length; _i < _len; _i++)
{
if(valid_extensions.test(this.files[_i].name)==false)
{
alert('Invalid file extension.\nAllowed file extensions: pdf, doc, docx, xls, xlsx, jpg, jpeg, png, tiff, wpd');
this.removeFile(file);
return;
}
}
;
//if all good then procced the queue
if(ins_Type !==''&& ins_Date !==''){
this.options.autoProcessQueue = true;
this.processQueue();
}else{
alert('Date are empty');
this.removeAllFiles(file);
}
});
//dropzone willl be clickable after this action below
$('.files-list').on('click','img', function(){
if($('.files-list li img').length == 0){
myDropzone.removeAllFiles(true);
myDropzone.setupEventListeners();
}
});
//dropzone will not be clickable after this action below
if($('.files-list li').children('img').length > 0){
myDropzone.removeEventListeners();
}