npm or yarn

As with most visual JavaScript libraries there are two sides to the story: getting the JavaScript code in your project, and getting the CSS code. Let's start with JS.
Add dropzone as a dependency to your project:
npm
yarn
1
$ npm install --save dropzone
Copied!
1
$ yarn add dropzone
Copied!
In your html, make sure you have an element that will act as the dropzone:
1
<!-- Example of a form that Dropzone can take over -->
2
<form action="/target" class="dropzone"></form>
Copied!
JavaScript
Without going too much into detail, historically, there have been plenty of ways to import libraries in JavaScript. Fortunately, not too long ago a standard was introduced that was implemented in browsers as well. This standard is called ECMAScript modules, also commonly referred to as JavaScript modules. This has caused JavaScript modules to become a defacto standard, which is why I recommend to use this approach.
Before JavaScript modules there were quite a few other standards. The only other module standard that Dropzone now supports is the CommonJS format which is what node is using too (note that node also has support for JavaScript modules now).
We also provide a standalone file that you can simply include in your browser. See the corresponding section for this: Stand-alone file.
1
// If you are using JavaScript/ECMAScript modules:
2
import Dropzone from "dropzone";
3
​
4
// If you are using CommonJS modules:
5
const { Dropzone } = require("dropzone");
6
​
7
// If you are using an older version than Dropzone 6.0.0,
8
// then you need to disabled the autoDiscover behaviour here:
9
Dropzone.autoDiscover = false;
10
​
11
let myDropzone = new Dropzone("#my-form");
12
myDropzone.on("addedfile", file => {
13
  console.log(`File added: ${file.name}`);
14
});
Copied!
In order for Dropzone to find the #my-form the element must already exist. Either put your <script> import at the end of your HTML file, or use some sort of window.onload logic.
CSS
Dropzone ships with two files: a basic.css and a dropzone.css. The dropzone.css contains all the styling you can see in the examples and is a ready-to-go solution. If you want to have total control over the styling, you can use the basic.css as a base, and build on top of that, or not use any of the provided CSS files at all.
Importing this CSS file greatly depends on the bundler or framework that you are using so I won't go into much detail here.
You can also simply include the CSS file in your html. Refer to the Stand-alone filesection for this.
You can check out the examples repository for ways to handle this with different bundlers.

Getting Started - Previous

Installation

Composer

Last modified 6mo ago

Copy link

Contents

JavaScript

CSS