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/dropzone.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/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 () {
// initialization of dropzone file attach module
$.HSCore.components.HSDropzone.init('.u-dropzone');
});
</script>
Basic example
<!-- Dropzone -->
<div class="u-dropzone">
<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-secondary 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 -->
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 class="u-dropzone"
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">
<small class="fa fa-times" data-dz-remove></small>
</div>
<div class="dz-details media">
<div class="dz-img">
<img class="img-fluid" data-dz-thumbnail>
</div>
<div class="media-body">
<h6 class="dz-filename">
<span class="dz-title" data-dz-name></span>
</h6>
<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">
<span class="fa fa-check-circle"></span>
</div>
<div class="dz-error-mark">
<span class="fa fa-times-circle"></span>
</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-secondary 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 -->
Attributes
data-options='{
"url": "../../assets/vendor/dropzone/upload.html",
"thumbnailWidth": 100,
"thumbnailHeight": 100,
"previewTemplate": "#dropzoneItemTemplate"
}'
Config
addedfile: function(){} - callback function
removedfile: function(){} - callback function
addedfile - called when a file is added to the list.
removedfile - called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-options="".
| Attribute | Description |
|---|---|
|
|
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 |
|
|
If null, the ratio of the image will be used to calculate it. |
|
|
The same as thumbnailWidth. If both are null, images will not be resized. |
|
|
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. |