I have to use dropzone.js form, which sends a couple of inputs and a file upload info to the other page.
My dropzone code looks like this -- >
Dropzone.options.mydropzone = {
maxFiles: 1,
maxFilesize: 10, //mb
acceptedFiles: 'image/*',
addRemoveLinks: true,
autoProcessQueue: false,// used for stopping auto processing uploads
autoDiscover: false,
paramName: 'prod_pic',
previewsContainer: '#dropzonePreview', //used for specifying the previews div
clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box
accept: function(file, done) {
console.log("uploaded");
done();
//used for enabling the submit button if file exist
$( "#submitbtn" ).prop( "disabled", false );
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!Only One image file accepted.");
this.removeFile(file);
});
var myDropzone = this;
$("#submitbtn").on('click',function(e) {
e.preventDefault();
myDropzone.processQueue();
});
this.on("reset", function (file) {
//used for disabling the submit button if no file exist
$( "#submitbtn" ).prop( "disabled", true );
});
}
};
But I want to make only the Previews container both Clickable and Drag and Drop ,which I have set by using previewsContainer: '#dropzonePreview' , but not the whole form.
If I use clickable:false I wont be able to click on previews div to show the file upload dialog box and also even if I drag n drop the file anywhere on the form it takes it. I dont want that to happen I just want the Previews container to be drag n drop AND Clickable but at the same time if I click on submit the whole form must get uploaded.
I have read this dropzone tutorial Combine normal form with Dropzone but thats just the half of what i actually want to do.
Is there any way we can achieve all of this using Dropzone efficiently ?.
