I'm testing some example code for Dropzone.js and would like to see if I could get the file size to submit as a form field:
var KTFormsDropzoneJSDemos = {
init: function(e) {
new Dropzone("#kt_dropzonejs_example_1", {
url: "add/submit/",
paramName: "file",
maxFiles: 10,
maxFilesize: 10,
addRemoveLinks: !0
}),
function() {
const e = "#kt_dropzonejs_example_3",
o = document.querySelector(e);
var r = o.querySelector(".dropzone-item");
r.id = "";
var t = r.parentNode.innerHTML;
r.parentNode.removeChild(r);
var l = new Dropzone(e, {
url: "add/submit/",
parallelUploads: 20,
maxFilesize: 0.25, // 1 MB
acceptedFiles: ".jpeg,.jpg",
previewTemplate: t,
previewsContainer: e + " .dropzone-items",
clickable: e + " .dropzone-select"
});
l.on("addedfile", (function(e) {
o.querySelectorAll(".dropzone-item").forEach((e => {
e.style.display = ""
}))
})), l.on("totaluploadprogress", (function(e) {
o.querySelectorAll(".progress-bar").forEach((o => {
o.style.width = e + "%"
}))
})), l.on("sending", (function(e) {
o.querySelectorAll(".progress-bar").forEach((e => {
e.style.opacity = "1"
}))
})), l.on("complete", (function(e) {
const r = o.querySelectorAll(".dz-complete");
setTimeout((function() {
r.forEach((e => {
e.querySelector(".progress-bar").style.opacity = "0", e.querySelector(".progress").style.opacity = "0"
}))
}), 300)
}))
}()
}
};
KTUtil.onDOMContentLoaded((function() {
KTFormsDropzoneJSDemos.init()
}));
The Dropzone.js "Tips & Tricks" page lists an example of how to send the file size, height, and width:
Dropzone adds data to the file object you can use when events fire. You can access
file.width
andfile.height
if it’s an image,
If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event:
myDropzone.on("sending", function(file, xhr, formData) {
// Will send the filesize along with the file as POST data.
formData.append("filesize", file.size);
});
I have the "sending" section in the example code under the #kt_dropzonejs_example_3
section, but I cannot figure out how to append the data like they have using the example code. How can I edit the "sending" code to add the file size as form data?
Per the example, you should accept the other parameters when you handle the sending
event:
l.on("sending", (function(file, xhr, formData) {
o.querySelectorAll(".progress-bar").forEach((e => {
e.style.opacity = "1"
}));
formData.append("filesize", file.size);
})),
Per my comment about formatting, my personal preference would be for the code to look something like this:
dropzoneExample3.on("sending", (file, xhr, formData) => {
dropzoneElement.querySelectorAll(".progress-bar").forEach(element => element.style.opacity = "1");
formData.append("filesize", file.size);
});