Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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);
};
@crorodriguezro

This comment has been minimized.

Copy link

@crorodriguezro crorodriguezro commented Dec 15, 2015

javascript error with dropzone

Uncaught Error: Invalid `clickable` option provided. Please provide a CSS selector, a plain HTML element or a list of those.
@RDaneelOlivav

This comment has been minimized.

Copy link

@RDaneelOlivav RDaneelOlivav commented Feb 8, 2016

My Question is how did you disable the appearance of the drag and drop zone?

@niall

This comment has been minimized.

Copy link

@niall niall commented Mar 17, 2016

I get the same error as orioniota.

@webkenny

This comment has been minimized.

Copy link

@webkenny webkenny commented Jun 17, 2016

👍 Me too.

@hootlex

This comment has been minimized.

Copy link

@hootlex hootlex commented Jun 24, 2016

@orioniota @nialloshea92 @webkenny guys you are missing this part

<div id="actions" class="row">

      <div class="col-lg-7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button dz-clickable">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>
      </div>

      <div class="col-lg-5">
        <!-- The global file processing state -->
        <span class="fileupload-process">
          <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress=""></div>
          </div>
        </span>
      </div>

    </div>
@Qualitv

This comment has been minimized.

Copy link

@Qualitv 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

This comment has been minimized.

Copy link

@mjames91 mjames91 commented Feb 10, 2017

How to limit maximum number of upload?

@elipeters

This comment has been minimized.

Copy link

@elipeters 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

This comment has been minimized.

Copy link

@berkyildizkaya berkyildizkaya commented Dec 22, 2019

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

@ShinodasCodes

This comment has been minimized.

Copy link

@ShinodasCodes ShinodasCodes commented Jul 20, 2021

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

This comment has been minimized.

Copy link
Owner Author

@enyo 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