# Dropzone

> Dropzone adds drag-and-drop file uploads to a form, with previews and progress bars styled by Tabler.

Add drag-and-drop file uploads to your forms with the Dropzone library, styled to match Tabler out of the box.

Source: https://docs.tabler.io/ui/plugins/dropzone

---

## Overview

A dropzone is a form users can drop files onto instead of picking them through a file dialog. It is built with the [Dropzone](https://www.dropzone.dev/) library, which handles the drag events, the previews and the upload.

Tabler styles the drop area, the file previews and the progress bars, so a dropzone matches the rest of your forms without extra CSS.

## Installation

Install Dropzone with npm:

```shell
npm install dropzone
yarn add dropzone
pnpm install dropzone
bun install dropzone
```

Or include it from a CDN:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/libs/dropzone/dist/dropzone.css" />\n<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/libs/dropzone/dist/dropzone-min.js"></script>
```

Tabler restyles the drop area in the vendors plugin, so include `tabler-vendors.css` as well:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/css/tabler-vendors.min.css" />
```

## Basic usage

The basic setup is a `form` with the `dropzone` class. The `.fallback` element holds a normal file input for browsers without drag and drop support:

```html
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>
```

Then create a `Dropzone` instance for the form:

```html
<script>
  {
    `document.addEventListener("DOMContentLoaded", function () {
    new Dropzone("#dropzone-default");
  });`;
  }
</script>
```

From now on a file dropped on the form is uploaded right away, to the URL in the form's `action` attribute.

```html
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
  <div class="fallback">
    <input name="..." type="file" />
  </div>
</form>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Dropzone("#dropzone-default");
  });
</script>
```

## Add multiple files

Add the `multiple` attribute to the input to accept several files at once, for example for a gallery upload:

```html
<input name="..." type="file" multiple />
```

```html
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
  <div class="fallback">
    <input name="file" type="file" multiple="true" />
  </div>
</form>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Dropzone("#dropzone-mulitple");
  });
</script>
```

## Custom dropzone

You can replace the default message in the drop area with your own markup, for example an icon and a hint about the accepted file types:

```html
<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
  <div class="fallback">
    <input name="file" type="file" />
  </div>
  <div class="dz-message">
    <h3 class="dropzone-msg-title">Your text here</h3>
    <span class="dropzone-msg-desc">Your custom description here</span>
    <button type="button" class="btn btn-sm mt-3">Select files</button>
  </div>
</form>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Dropzone("#dropzone-custom");
  });
</script>
```

Custom content replaces the button Dropzone renders by default, and that button is the only part of the drop area a keyboard can reach. Keep a focusable control - such as the one above - inside your own message.

## Accessibility

A drop area is only usable with a mouse, so the file input behind it does the real work.

- Dropzone removes the `.fallback` input as soon as the browser supports drag and drop, so it is a fallback for old browsers, not the keyboard path. Keep it anyway - it costs nothing and covers that case.
- Keyboard users reach the drop area through the `button` Dropzone renders inside `.dz-message`. If you replace that message with your own markup, put a focusable button back, or the area becomes mouse-only.
- Say which files are accepted and how large they can be, in text next to the field rather than only in the plugin options.
- Report upload progress and errors in text as well. A red border on a thumbnail is invisible to a screen reader - Dropzone's `error` event is the place to add a message.