Drag’ n’ Drop File Uploads
Drag'n'drop file-attach uploads with image previews.
Dokumentasi Dropzone.jsCara Pakai
Copy-paste script berikut sebelum tag penutup <body>:
<script>
(function() {
// INITIALIZATION OF DROPZONE
// =======================================================
Nue.components.NueDropzone.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="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-browse.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-browse.svg" alt="">
<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' |