jquery-dropzone.js

// 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);
};

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

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.

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.