Dropzone
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.
Default Dropzone
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
<link href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone-min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
new Dropzone("#dropzone-default")
})
</script>
Add multiple files
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<link href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone-min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
new Dropzone("#dropzone-mulitple")
})
</script>
Custom 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>
<link href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/dropzone/dist/dropzone-min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
new Dropzone("#dropzone-custom")
})
</script>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
