forked from dropzone/dropzone
-
Notifications
You must be signed in to change notification settings - Fork 0
Upload all files with a button
Matias Meno edited this page Jul 2, 2013
·
2 revisions
This tutorial shows how to let the user build a queue and then upload all files with a single button click.
First off the HTML:
<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>and the 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.
});
}
};That's it!
- Dropzone already attached
- Large files not uploading
- Some image thumbnails aren't generated
- Show error returned by server
- Notification when all files finished uploading
- Add button to remove file preview
- Submit additional data
- Show info after file uploaded
- Show files already on server
- Use own
confirmimplementation - Limit the number of files
- Provide a thumbnail for files
- Reject images based on dimensions
Tutorials