How to install DropzoneJS

Created Apr 12, 2021 at 11:28

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.

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

You can clone a repository from GitHub.com to your local computer.

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

Run the following command to locally install the package and its dependencies with NPM.

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]

yarn add [email protected]

Bower

bower install dropzone

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>