tabler.tabler/docs/ui/components/dropzone.mdx

---
title: Dropzone
summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
description: Drag-and-drop file upload tool.
---

## Default Dropzone

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

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

## Add multiple files

```html example vendors height="240px" libs="dropzone"
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

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

## Custom Dropzone

```html example vendors height="240px" libs="dropzone"
<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>
  </div>
</form>

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