Dropzonejs
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> near the end of your pages under JS
Nova to enable it.
<script src="../../assets/vendor/dropzone/dropzone.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing
Plugins 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 component
$.HSCore.components.HSDropzone.init('.u-dropzone');
});
</script>
Basic example
<div class="u-dropzone">
<div class="dz-message py-6">
<figure>
<i class="nova-upload"></i>
</figure>
<span class="d-block">Drag files here to upload</span>
</div>
</div>
Modal
<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Button Trigger Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Example Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="u-dropzone">
<div class="dz-message py-6">
<figure>
<i class="nova-upload"></i>
</figure>
<span class="d-block">Drag files here to upload</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
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.
Use data-options='{}' attribute with parametrs and custom template #dropzoneItemTemplate
<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">
<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">
<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-primary 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>
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.
Validation states
<div class="u-has-success">
<div class="u-dropzone">
<div class="dz-message py-6">
<figure>
<i class="nova-upload"></i>
</figure>
<span class="d-block">Drag files here to upload</span>
</div>
</div>
</div>
<div class="u-has-error">
<div class="u-dropzone">
<div class="dz-message py-6">
<figure>
<i class="nova-upload"></i>
</figure>
<span class="d-block">Drag files here to upload</span>
</div>
</div>
</div>
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. |