Dropzone

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

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

npm install dropzone

yarn add dropzone

pnpm install dropzone

bun install dropzone

Or include it from a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone-min.js"></script>

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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:

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

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

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

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

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

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

Related