Dropzone attributes doesnt work
Hello,
i have some questions about dropzone. I just realized that some of attributes that are used in dropzone doesnt work. Even in your demo (https://keenthemes.com/metronic/tailwind/docs/plugins/dropzone).
<form id="upload-form" class="file-upload" method="POST" data-kt-dropzone="true">
<div class="dropzone dropzone-clickable"
data-kt-dropzone-accepted-files=".jpeg,.jpg,.png,.gif,.webp"
data-kt-dropzone-auto-process="false"
data-kt-dropzone-auto-queue="false"
data-kt-dropzone-max-files="10"
data-kt-dropzone-max-filesize="5"
data-kt-dropzone-url="<?=base_url('/admin/produkt/upload_images/'.$product->id_product)?>">
<div class="dropzone-message">
<div class="dropzone-message-icon">
<i class="ki-filled ki-cloud-add"></i>
</div>
<div class="dropzone-message-text">
<span class="dropzone-message-title">PÅ™etáhnÄ›te obrázky nebo kliknÄ›te</span>
<span class="dropzone-message-desc">JPEG, PNG, WebP, max 5 MB</span>
</div>
<button class="kt-btn kt-btn-sm kt-btn-primary dropzone-browse-btn" type="button">
Vybrat soubory
</button>
</div>
</div>
<div class="file-upload-list hidden">
<div class="dropzone-previews"></div>
</div>
<div class="flex justify-end gap-3 mt-5">
<button class="kt-btn kt-btn-secondary" type="reset">Zrušit</button>
<button class="kt-btn kt-btn-primary" type="submit">Nahrát</button>
</div>
</form>
The most important is max filesize, but unfortunately it does nothing "data-kt-dropzone-max-filesize". Same for a "data-kt-dropzone-auto-process". I just figured out that this attribute "data-kt-dropzone-auto-queue="false" works fine.
Can you look on it? Or can you write what is the right settings for it? On older Metronics i used settings in javascript, something like this:
myDropzone = new Dropzone('#upload-form .dropzone', {
url: HOST_URL + '/admin/produkt/upload_photo',
autoProcessQueue: false,
clickable: ['.dropzone-browse-btn', '#upload-form .dropzone'],
parallelUploads: 10,
maxFilesize: 5,
acceptedFiles: '.jpeg,.jpg,.png,.gif,.webp',
addRemoveLinks: true,
dictRemoveFile: 'Odstranit',
init: function () {
this.on('queuecomplete', function () {
Swal.fire({
title: 'Hotovo!',
text: 'Všechny fotky byly úspÄ›šnÄ› nahrány.',
icon: 'success',
confirmButtonText: 'OK'
}).then(function () {
window.location.reload();
});
});
this.on('error', function (file, errorMessage) {
Swal.fire('Chyba', 'NepodaÅ™ilo se nahrát: ' + file.name, 'error');
});
}
});
This is only example. When i want to use this, its almost okay, but design is different from yours, which looks fine for me. Tahts why i want to use that settings with attributes, but its hard when it doesnt work.
Thank you for your answer
Best regards
Daniel Soukup
Replies (1)
Hi Daniel,
Sorry that some documented attributes do not behave correctly.
Use this instead:
data-kt-dropzone-auto-process-queue="false"
Do not use data-kt-dropzone-auto-queue, we will check it.
With auto-process-queue="false", files stay queued until the user clicks your submit button; the Metronic form handler then calls processQueue() for you.
data-kt-dropzone-max-filesize is documented in MB, but the current component converts the value to bytes before passing it to Dropzone.js. Dropzone already treats maxFilesize as megabytes. We will fix it.
Until we ship a fix, set the limit in JavaScript after init (keeps Metronic UI/previews):
document.addEventListener("DOMContentLoaded", function () {
const el = document.getElementById("product-images-dropzone");
const ktDropzone = KTDropzone.getInstance(el);
if (!ktDropzone) return;
const dz = ktDropzone.getDropzone();
if (!dz) return;
dz.options.maxFilesize = 5; // MB
dz.on("error", function (file, message) {
// your Swal / error handling
});
dz.on("queuecomplete", function () {
// your success handling
});
});Avoid new Dropzone('#upload-form .dropzone', { ... }) on the same element. that creates a second instance and changes the layout away from the Metronic template.
