upload all files with a single button click.
HTML:
<button id="submit-all">Submit all files</button> <form action="/target" class="dropzone" id="my-dropzone"></form>
JS:
Dropzone.options.myDropzone = { // Prevents Dropzone from uploading dropped files immediately autoProcessQueue: false, init: function() { var submitButton = document.querySelector("#submit-all") myDropzone = this; // closure submitButton.addEventListener("click", function() { myDropzone.processQueue(); // 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. }); } };
But the file is upload after drag and drop..
use simple code
Dropzone.autoDiscover = false; var myDropzone = new Dropzone(element, { url: "/upload.php", autoProcessQueue: false, }); $('#imgsubbutt').click(function(){ myDropzone.processQueue(); });
I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST
the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example, HTML
<button id="submit-all">Submit all files</button> <div class="dropzone" id="my-dropzone"></div>
JavaScript
$('#submit-all').on('click', function() { var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles(); // Do something with the files. });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With