Skip to content

Instantly share code, notes, and snippets.

@enyo
Last active September 21, 2021 17:34
Show Gist options
  • Save enyo/0def0ce04d744fffcee4 to your computer and use it in GitHub Desktop.
Save enyo/0def0ce04d744fffcee4 to your computer and use it in GitHub Desktop.
// Get the template HTML and remove it from the doument.
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
url: "/target-url", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function(file) {
// Hookup the start button
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});
myDropzone.on("sending", function(file) {
// Show the total progress bar when upload starts
document.querySelector("#total-progress").style.opacity = "1";
// And disable the start button
file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
document.querySelector("#total-progress").style.opacity = "0";
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
@Qualitv
Copy link

Qualitv commented Nov 7, 2016

Hello.
I have problem.
I have css style on: body {direction:rtl;}, after this appears scroll to the left on the page on mobile device.

P.S. Yo can see it on http://www.dropzonejs.com in browser by adding above style in debugger tool.

@mjames91
Copy link

How to limit maximum number of upload?

@elipeters
Copy link

elipeters commented Mar 8, 2018

There are no class structures of ".table" on div elements with Bootstrap 4 and converting to a table structure breaks dropzone.js

Remove the class="table table-striped" of #previews and replace file-row class with <div id="template" class="d-flex justify-content-between">

@berkyildizkaya
Copy link

Hello,
I use the template you created. but add items don't work

@ShinodasCodes
Copy link

hello everybody. this is the worst documentation I have ever seen so far. Unfortunately author missed to explain that those codes are for only container previews. It means they will not work unless you place relative form or div that triggers all those. Copy paste won't work. Obviously something has been changed while versions go up and old documentations still stay there and huge disconnected structures there in. If you were the first consumers you would understood them all but now with those information this is very hard to to grab it from zero knowledge. I advise you all to change your mind and give up to use this module.

@enyo
Copy link
Author

enyo commented Sep 21, 2021

I know that this has been posted 5 years ago, but, if you get this error Uncaught Error: Invalid clickable option provided. Please provide a CSS selector, a plain HTML element or a list of those. you need to make sure that the css selector for you button actually exists.

@ShinodasCodes sorry you're frustrated. It's true that I let the documentation slip a bit, but it's tough maintaining a project for such a long time. I'm doing my best to get it up to a good standard right now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment