Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

dropzone js onclick submit file upload

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..

like image 731
Steve Bals Avatar asked Jan 20 '14 11:01

Steve Bals


2 Answers

use simple code

Dropzone.autoDiscover = false;  var myDropzone = new Dropzone(element, {   url: "/upload.php",                           autoProcessQueue: false, });  $('#imgsubbutt').click(function(){              myDropzone.processQueue(); }); 
like image 152
Behnam Mohammadi Avatar answered Oct 04 '22 20:10

Behnam Mohammadi


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. }); 
like image 28
eeuser Avatar answered Oct 04 '22 18:10

eeuser