How to install DropzoneJS

Created

DropzoneJS is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

Installation

You can download the latest version of DropzoneJS from the GitHub releases or use a DropzoneJS CDN.

GitHub

Latest:2021-05-18 03:26:14
License:Other
Cloning with HTTPS URLs
git clone https://github.com/dropzone/dropzone.git
Cloning with SSH URLs
git clone [email protected]:dropzone/dropzone.git
Cloning with GitHub CLI
gh repo clone dropzone/dropzone

NPM

Version:5.9.2
Publish Time:2021-04-02 22:29:30
Unpacked Size:1.01 MB
Downloading and installing packages locally
npm i dropzone
npm install dropzone
yarn add dropzone
Downloading and installing packages globally
npm i -g dropzone
yarn global add dropzone
Install Specific Version of a Package
npm install [email protected]
Bower
bower install dropzone

For more information about DropzoneJS see https://www.dropzonejs.com/.

Example

Code 1: - The typical way of using dropzone is by creating a form element with the class dropzone:

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>
<script>
// The constructor of Dropzone accepts two arguments:
//
// 1. The selector for the HTML element that you want to add
//    Dropzone to, the second
// 2. An (optional) object with the configuration
let myDropzone = new Dropzone("div#myId", { url: "/file/post"});

// jQuery
$("div#myId").dropzone({ url: "/file/post" });

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};
</script>

Related Tags