I have a normal simple form with 2 dropload div fields combined with classic form fields. autodiscover is disabled, they have a different paramName to process them a little bit different in the php upload page.
The issue is to know if everything from both DIV's is uploaded. The "queuecomplete" is fired 2 times, for each dropload object.
What is the best way to handle this siuation? Upload works, only the event handling to finish is the issue now, just want to know if both are completed succesful.
i want to use the other two input fields also in the php post
myDropzone.on("sending", function(file, xhr, formData) {
var data = $('#testform').serializeArray();
$.each(data, function(key, el) {
formData.append(el.name, el.value);
});
});
- if everything is completed i want to send a mail to the email address.
HTML:
<form action="file_upload.php" class="testform" enctype="multipart/form-data" id="testform">
input number: <input type="text" id="myInput"/>
input E-mail : <input type="email" name="mailadress" required />
<div class="dropzone" id="invoices"></div>
<div class="dropzone" id="documents"></div>
<input type="submit" id='uploadfiles' value='Upload Files' >
</form>
JS:
<script type="text/javascript">
Dropzone.autoDiscover = false;
$('.dropzone').each(function(){
var dropUrl = 'file_upload.php';
var paramName = $(this).attr('id');
var createImageThumbnails = false;
var addRemoveLinks = true;
var maxFiles = 50;
var parallelUploads = 4;
var maxFilesize = 25; // MB
var acceptedFiles = "application/pdf";
var autoProcessQueue = false
$(this).dropzone({
url: dropUrl,
paramName: paramName,
createImageThumbnails: createImageThumbnails,
addRemoveLinks: addRemoveLinks,
maxFiles: maxFiles,
parallelUploads: parallelUploads,
maxFilesize: maxFilesize, // MB
acceptedFiles: acceptedFiles,
autoProcessQueue: autoProcessQueue,
uploadMultiple: true,
init: function(){
var myDropzone = this;
$('#uploadfiles').click(function(e) {
var count= myDropzone.files.length;
console.log("test event line, number of files: " + count);
e.preventDefault();
e.stopPropagation();
if(count >0){
myDropzone.processQueue();
}
});
myDropzone.on("sendingmultiple", function(files, response) {
console.log("sendingmultiple ");
});
myDropzone.on("successmultiple", function(files, response) {
console.log("successmultiple ");
});
myDropzone.on("queuecomplete", function(files, response) {
console.log("queuecomplete ");
});
myDropzone.on("errormultiple", function(files, response) {
console.log("errormultiple ");
});
}
});
});
</script>
jquery min and dropzone latest included