I think to achieve this you will have to disable autoprocessQueue
so that YOU have the power of uploading the files whenever you want to.
Then we can manually code where we want to process the file. The sample code may look something like below ,you can tweak it as your needs .
Dropzone.options.myAwesomeDropzone = {
maxFiles: 1,
addRemoveLinks: true,
autoProcessQueue: false, //heres where you tell it not to upload by itself and wait for you to tell it to upload
autoDiscover: false,
accept: function(file, done) {
console.log("uploaded");
done();
},
init: function() {
var myDropzone = this;
//gets called when max files is reached . In our case its 1 file
//so it will get called whenever a single file is dragged inside
this.on("maxfilesreached", function(file){
//here we check if the image is an image file or not
//if : it is not we simple tell the user and remove it
//else : just process the uploaded file
if(file.type != "image/jpeg" && file.type != "image/png") {
alert("Only Image file allowed for uploading");
this.removeFile(file); //remove the file
}else{
myDropzone.processQueue(); //upload the image file
}
});
//this will get called when max files exceeds . in our case its 1 file
//so it will get called whenever someone tries to upload more than 1 file
this.on("maxfilesexceeded", function(file){
//you can check fir filetypes that you want to allow like we did it above
//Do whatever client side extra stuff you want to do with the file
});
} //end of init
};
Try it and see if it works for you .