I'm using dropzone.js as part of a form all working as it should. I have it set so it doesn't process the upload queue until submit is clicked. But once it's uploaded all files I want it to submit the form. I've added the event in jQuery but it's still not submitting it.
What am I doing wrong here?
It gave me the success alert but didn't submit the form:
$(document).ready(function() {
$("div#dropzone").dropzone({
url: "js/dropzone/upload.php",
autoProcessQueue: false,
maxFilesize: 2,
parallelUploads: 100,
uploadMultiple: true,
acceptedFiles: "image/*",
maxFiles: 10,
init: function() {
var myDropzone = this;
$("#theform").submit(function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
},
completemultiple: function(file, response){
alert("success");
$("#theform").submit();
},
});
});
You might set a flag if the form can be submitted, then decide if you need to preventDefault:
$(document).ready(function() {
$("div#dropzone").dropzone({
url: "js/dropzone/upload.php",
autoProcessQueue: false,
maxFilesize: 2,
parallelUploads: 100,
uploadMultiple: true,
acceptedFiles: "image/*",
maxFiles: 10,
init: function() {
var myDropzone = this;
$("#theform").submit(function(e) {
if ($(this).prop('ready')) return true;
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
},
completemultiple: function(file, response){
alert("success");
$("#theform").prop('ready', true).submit();
},
});
});
I've managed to work it out. I'm sure other people will have the same problem so here is the answer. You reverse the e.preventDefault and then click the submit button with jQuery once the queue is complete:
$(document).ready(function() {
$("div#dropzone").dropzone({
url: "js/dropzone/upload.php",
autoProcessQueue: false,
maxFilesize: 2,
parallelUploads: 100,
uploadMultiple: true,
acceptedFiles: "image/*",
maxFiles: 10,
init: function() {
var myDropzone = this;
$("#theform").submit(function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
},
queuecomplete: function(file, response){
$("#theform").unbind('submit').submit();
$("#submit").click();
},
});