Drag’ n’ Drop File Uploads (Dropzone)
Drag'n'drop file-attach uploads with image previews.
Dropzone 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>
$(document).on('ready', function () {
// initialization of dropzone file attach module
$('.dropzone-custom').each(function () {
var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
});
});
</script>
Example
Drag and drop your file here
or
Browse filesModal example
Methods
| 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/include/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 |
| Parameters | previewTemplate |
| Description | 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. |
| Default value |
|