Skip to content

Instantly share code, notes, and snippets.

@enyo
Last active September 21, 2021 17:34
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 14 You must be signed in to fork a gist
  • 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);
};
@crorodriguezro
Copy link

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
Copy link

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

@niall
Copy link

niall commented Mar 17, 2016

I get the same error as orioniota.

@webkenny
Copy link

👍 Me too.

@hootlex
Copy link

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