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.

Cloning a repository

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

Install via NPM package

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

Related Tags