Drag’ n’ Drop File Uploads
Drag'n'drop file-attach uploads with image previews.
Dropzone.js documentationHow to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/dropzone/dist/min/dropzone.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="./assets/js/hs.dropzone.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF DROPZONE
// =======================================================
HSCore.components.HSDropzone.init('.js-dropzone')
})();
</script>
Basic example
<form>
<!-- Dropzone -->
<div id="basicExampleDropzone" class="js-dropzone row dz-dropzone dz-dropzone-card">
<div class="dz-message">
<img class="avatar avatar-xl avatar-4x3 mb-3" src="../assets/svg/illustrations/oc-browse.svg" alt="Image Description">
<h5>Drag and drop your file here</h5>
<p class="mb-2">or</p>
<span class="btn btn-white btn-sm">Browse files</span>
</div>
</div>
<!-- End Dropzone -->
</form>
Modal example
Dropzone
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Dropzone</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Dropzone -->
<div id="modalDropzone" class="js-dropzone row dz-dropzone dz-dropzone-card">
<div class="dz-message">
<img class="avatar avatar-xl avatar-4x3 mb-3" src="../assets/svg/illustrations/oc-browse.svg" alt="Image Description">
<h5>Drag and drop your file here</h5>
<p class="mb-2">or</p>
<span class="btn btn-white btn-sm">Browse files</span>
</div>
</div>
<!-- End Dropzone -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Supported file types. If empty all supported. | [] |
|
|
Max size for uploading file. | 1024 |
|
|
Supported two mods (image/simple). image - show image after uploading. simple - show file name after uploading. | simple |
|
|
Element selector with src for image mode. |
null |
|
|
Element selector for simple mode. |
null |
|
|
Element selector to reset form. | null |
|
|
Error message text if the file size is larger than the allowed. | 'File is too big!' |
|
|
Error message text if file type is not supported. | 'Unsupported file type' |