Installation
Dropzone is installed via NPM as a third-party dependency by referring to
package.json
.
During the
Theme Installation
process,
it is compiled by the
Build Tools
into the
/dist/assets/vendors/dropzone
directory.
Require Assets
To use Dropzone in your pages, you need to include the Dropzone.js library and CSS from your vendors directory.
<link href="{{ theme.getAssetUrl('vendors/dropzone/dropzone.css') }}" rel="stylesheet"/>
<script src="{{ theme.getAssetUrl('vendors/dropzone/dropzone.js') }}">
</script>
The KTDropzone component is automatically initialized when the page loads. Make sure to include the core bundle script before Dropzone.js.
Basic
A basic dropzone example demonstrating the default file upload configuration with Metronic Tailwind CSS styling.
This example shows how to initialize a simple dropzone that automatically adapts to the Metronic design system.
Files are uploaded automatically when added, and the component handles progress tracking and error states.
// Basic Dropzone example
// The dropzone is automatically initialized via data-kt-dropzone="true" attribute
// No additional JavaScript is required for basic functionality
// Optional: Access the dropzone instance programmatically if needed
document.addEventListener('DOMContentLoaded', function() {
// Example: Get dropzone instance
// const dropzoneElement = document.querySelector('[data-kt-dropzone="true"]');
// const dropzone = KTDropzone.getInstance(dropzoneElement);
// if (dropzone) {
// console.log('Dropzone initialized:', dropzone);
// }
});
<!--begin::File Upload -->
<form action="upload/submit/" class="file-upload" data-kt-dropzone="true" method="POST">
<!--begin::Dropzone Area-->
<div class="dropzone dropzone-clickable" data-kt-dropzone-accepted-files=".jpeg,.jpg,.png,.gif,.webp" data-kt-dropzone-max-filesize="2" data-kt-dropzone-url="upload/">
<div class="dropzone-message">
<div class="dropzone-message-icon">
<i class="ki-filled ki-cloud-add">
</i>
</div>
<div class="dropzone-message-text">
<span class="dropzone-message-title">
Choose a file or drag & drop here.
</span>
<span class="dropzone-message-desc">
JPEG, PNG, GIF, WebP, up to 2 MB.
</span>
</div>
<button class="kt-btn kt-btn-sm kt-btn-primary dropzone-browse-btn" type="button">
Browse File
</button>
</div>
</div>
<!--end::Dropzone Area-->
<!--begin::File List-->
<div class="file-upload-list hidden">
<div class="dropzone-previews">
</div>
</div>
<!--end::File List-->
<!--begin::Form Actions-->
<div class="flex justify-end gap-3 mt-5">
<button class="kt-btn kt-btn-secondary" disabled="" type="reset">
Cancel
</button>
<button class="kt-btn kt-btn-primary" disabled="" type="submit">
Submit
</button>
</div>
<!--end::Form Actions-->
</form>
<!--end::File Upload -->
Manual Upload
This example demonstrates dropzone with manual upload mode. Files are queued when added but not uploaded until the form is submitted.
This allows users to select multiple files, review them, and then upload everything at once. The form submission waits for all
queued uploads to complete before proceeding.
// Manual Upload Dropzone example
// The dropzone is automatically initialized via data-kt-dropzone="true" attribute
// Manual upload is enabled via data-kt-dropzone-auto-process="false"
// Files are queued and uploaded when the form is submitted
// The form submission handler automatically waits for all queued uploads to complete
// before submitting the form data
<!--begin::File Upload -->
<form action="upload/submit/" class="file-upload" data-kt-dropzone="true" method="POST">
<!--begin::Dropzone Area-->
<div class="dropzone dropzone-clickable" data-kt-dropzone-accepted-files=".jpeg,.jpg,.png,.gif,.webp" data-kt-dropzone-auto-process="false" data-kt-dropzone-max-files="5" data-kt-dropzone-max-filesize="10" data-kt-dropzone-url="upload/">
<div class="dropzone-message">
<div class="dropzone-message-icon">
<i class="ki-filled ki-cloud-add">
</i>
</div>
<div class="dropzone-message-text">
<span class="dropzone-message-title">
Choose a file or drag & drop here.
</span>
<span class="dropzone-message-desc">
Images will be queued and uploaded when you submit. Up to 5 files, 10 MB each.
</span>
</div>
<button class="kt-btn kt-btn-sm kt-btn-primary dropzone-browse-btn" type="button">
Browse File
</button>
</div>
</div>
<!--end::Dropzone Area-->
<!--begin::File List-->
<div class="file-upload-list hidden">
<div class="dropzone-previews">
</div>
</div>
<!--end::File List-->
<!--begin::Form Actions-->
<div class="flex justify-end gap-3 mt-5">
<button class="kt-btn kt-btn-secondary" disabled="" type="reset">
Cancel
</button>
<button class="kt-btn kt-btn-primary" disabled="" type="submit">
Submit
</button>
</div>
<!--end::Form Actions-->
</form>
<!--end::File Upload -->
Auto Upload
This example demonstrates dropzone with automatic upload mode. Files are uploaded immediately when added to the dropzone,
without waiting for form submission. The submit button is enabled only after at least one file has been successfully uploaded.
This mode is useful when you want immediate feedback and don't need to batch uploads.
// Auto Upload Dropzone example
// The dropzone is automatically initialized via data-kt-dropzone="true" attribute
// Auto-upload is enabled via data-kt-dropzone-auto-process="true"
// Files are uploaded immediately when added to the dropzone
// Optional: Listen to upload events
document.addEventListener('DOMContentLoaded', function() {
// Example: Listen to dropzone events
// const dropzoneElement = document.querySelector('[data-kt-dropzone="true"]');
// if (dropzoneElement) {
// dropzoneElement.addEventListener('kt.dropzone.success', function(e) {
// console.log('File uploaded successfully:', e.detail);
// });
// }
});
<!--begin::File Upload -->
<form action="upload/submit/" class="file-upload" data-kt-dropzone="true" method="POST">
<!--begin::Dropzone Area-->
<div class="dropzone dropzone-clickable" data-kt-dropzone-accepted-files=".jpeg,.jpg,.png,.gif,.webp" data-kt-dropzone-auto-process="true" data-kt-dropzone-max-filesize="5" data-kt-dropzone-parallel-uploads="3" data-kt-dropzone-url="upload/">
<div class="dropzone-message">
<div class="dropzone-message-icon">
<i class="ki-filled ki-cloud-add">
</i>
</div>
<div class="dropzone-message-text">
<span class="dropzone-message-title">
Choose a file or drag & drop here.
</span>
<span class="dropzone-message-desc">
Images will be uploaded immediately. JPEG, PNG, GIF, WebP, up to 5 MB.
</span>
</div>
<button class="kt-btn kt-btn-sm kt-btn-primary dropzone-browse-btn" type="button">
Browse File
</button>
</div>
</div>
<!--end::Dropzone Area-->
<!--begin::File List-->
<div class="file-upload-list hidden">
<div class="dropzone-previews">
</div>
</div>
<!--end::File List-->
<!--begin::Form Actions-->
<div class="flex justify-end gap-3 mt-5">
<button class="kt-btn kt-btn-secondary" disabled="" type="reset">
Cancel
</button>
<button class="kt-btn kt-btn-primary" disabled="" type="submit">
Submit
</button>
</div>
<!--end::Form Actions-->
</form>
<!--end::File Upload -->
