How to add a submit button to dropzone - drag-and-drop

Question

Hello everyone i am using dropzone.js to upload pictures to the server with php, but i kind of having problem with it.
I was wondering if there is anyway to disable the dropzone.js auto upload to the server on drag and drop image or on click and select image and use a clickable submit button to manually submit the image to the server
Please any advice or help perhaps a simple code will be appreciated.
Edited
I still haven't got an answer to my questions.
Seriously i feel like this people building this stuff doesn't got it right because the stuff is useless in someways, are they trying to tell me that when a user uploads its profile picture and the dropzone will be stuck there looking at them and them looking at it without a submit button or a confirmation message that the picture has been uploaded then they should continue? seriously?

Answer 1

You can define button in your HTML Form such as
<button id="submit-all">Submit all files</button>
and then add this script
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
maxFilesize: 1,
parallelUploads: 10,
addRemoveLinks: true,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue();
// autoProcessQueue: true// Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
Hope this solves the problem.refrence https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button