dropzone

<img alt="Dropzone.js" src="https://raw.githubusercontent.com/enyo/dropzone/assets/github-logo.svg" />

[![CI](https://github.com/enyo/dropzone/actions/workflows/ci.yml/badge.svg)](https://github.com/enyo/dropzone/actions/workflows/ci.yml)

Dropzone 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 fully configurable, can be styled according to your needs and is trusted by
thousands. It's written in TypeScript and ships its own types, so there's
nothing extra to install.

<div align="center">
  <img width="674" alt="Dropzone Screenshot" src="https://user-images.githubusercontent.com/133277/138495095-b026cc5c-9458-4e0b-8066-d8a9d0f7e72a.png">
</div>

## Quickstart

Install:

```bash
$ npm install dropzone
# or with pnpm:
$ pnpm add dropzone
```

Use as **ES6 module** (recommended):

```js
import { Dropzone } from "dropzone";
const dropzone = new Dropzone("div#myId", { url: "/file/post" });
```

or use as **CommonJS module**:

```js
const { Dropzone } = require("dropzone");
const dropzone = new Dropzone("div#myId", { url: "/file/post" });
```

## TypeScript

The types come with the package — there's no `@types/dropzone` to install, and
you should remove it if you have it: it stopped at `5.7.9` and describes the
v5 API.

```ts
import { Dropzone } from "dropzone";
import type { DropzoneFile, DropzoneOptions } from "dropzone";

const options: DropzoneOptions = { url: "/file/post", maxFilesize: 10 };
const dropzone = new Dropzone("div#myId", options);

// listener arguments are inferred from the event name
dropzone.on("addedfile", (file) => console.log(file.name, file.upload.uuid));
```

[👉 Checkout our example implementations for different
bundlers](https://github.com/dropzone/dropzone-examples)

## Not using a package manager or bundler?

Use the standalone files like this:

```html
<script src="https://unpkg.com/dropzone@6/dist/dropzone-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@6/dist/dropzone.css" type="text/css" />

<div class="my-dropzone"></div>

<script>
  // Dropzone has been added as a global variable.
  const dropzone = new Dropzone("div.my-dropzone", { url: "/file/post" });
</script>
```

---

- [📚 Full documentation](https://www.dropzone.dev/docs/)
- [⚙️ `src/options.ts`](https://github.com/enyo/dropzone/blob/main/packages/dropzone/src/options.ts)
  for all available options

---

> ⚠️ **NOTE**: Dropzone 6 does not support Internet Explorer. If you still need
> it, use `5.9.3`. See the [`CHANGELOG`](./CHANGELOG.md) for everything that
> changed in 6.0.0.

## Repository layout

This is a monorepo. It holds the library, the documentation and the website:

|                                          |                                            |
| ---------------------------------------- | ------------------------------------------ |