Dropzone
Drag'n'drop file-attach uploads with image previews.
Official documentation
For more detailed information and examples, see the official documentation: Dropzone.js .
How to use?
Copy-paste the following <script>s near the end of your pages under JS Implementing Plugins to enable them.
<script src="../../assets/vendor/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>
$(document).on('ready', function () {
$('.dz-dropzone').each(function () {
var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
});
});
</script>
Basic example
<!-- Dropzone -->
<div id="dropzoneExample1" class="js-dropzone dz-dropzone dz-dropzone-boxed gradient-overlay-half-primary-v4">
<div class="dz-message py-6">
<figure class="max-w-10rem mx-auto mb-3">
<img class="img-fluid" src="../../assets/svg/illustrations/drag-n-drop.svg" alt="Image Description">
</figure>
<span class="d-block">Drag files here to upload</span>
</div>
</div>
<!-- End Dropzone -->
Preview template option
If you want to use an actual HTML element instead of providing a String as a config option, you could create a div with the ID and then put the template inside it.
<!-- Dropzone -->
<div id="dropzoneExample2" class="js-dropzone dz-dropzone dz-dropzone-boxed"
data-options='{
"url": "../../assets/vendor/dropzone/upload.html",
"thumbnailWidth": 100,
"thumbnailHeight": 100,
"previewTemplate": "#dropzoneItemTemplate"
}'>
<div id="dropzoneItemTemplate" style="display: none;">
<div class="col h-100 mb-5">
<div class="dz-preview dz-file-preview">
<div class="d-flex justify-content-end dz-close-icon">
<i class="fas fa-times" data-dz-remove></i>
</div>
<div class="dz-details media">
<div class="dz-img">
<img class="img-fluid" data-dz-thumbnail>
</div>
<div class="media-body">
<span class="dz-filename">
<span class="dz-title" data-dz-name></span>
</span>
<div class="dz-size" data-dz-size></div>
</div>
</div>
<div class="dz-progress progress" style="height: 4px;">
<div class="dz-upload progress-bar bg-success" role="progressbar" style="width: 0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
</div>
<div class="d-flex align-items-center">
<div class="dz-success-mark">
<i class="fa fa-check-circle"></i>
</div>
<div class="dz-error-mark">
<i class="fa fa-times-circle"></i>
</div>
<div class="dz-error-message">
<small data-dz-errormessage></small>
</div>
</div>
</div>
</div>
</div>
<div class="dz-message">
<div class="mb-4">
<span class="d-block h5 mb-1">Choose files to upload</span>
<span class="d-block text-body mb-1">or</span>
<span class="d-block">Drag n' drop</span>
</div>
<span class="btn btn-sm btn-primary">Browse files</span>
</div>
</div>
<!-- End Dropzone -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of dropzone
$('.dz-dropzone').each(function () {
var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
dropzone.on("addedfile", function() {
console.log('File added!!!');
});
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-dropzone-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-circles-options='{}'. For more detailed or missing attributes/functions, see the official Dropzone.js documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Has to be specified on elements other than form (or when the form doesn't have an action attribute). You can also provide a function that will be called with files and must return the url | "../../assets/vendor/dropzone/upload.html" |
|
|
If null, the ratio of the image will be used to calculate it. | 300 |
|
|
The same as thumbnailWidth. If both are null, images will not be resized. |
300 |
|
|
A string that contains the template used for each dropped file. Change it to fulfill your needs but make sure to properly provide all elements. | |