I am currently experimenting with some sample code for Dropzone.js and am interested in finding a way to include the file size as a form field when submitting:
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 provides an example of how to send additional data like file size, height, and width:
Dropzone includes data within the file object that can be accessed during events firing. You can retrieve
file.widthandfile.heightif it's an image,
If you need to attach extra data specific to each file being uploaded, you can utilize the sending event:
myDropzone.on("sending", function(file, xhr, formData) {
// Adds the filesize as POST data along with the file.
formData.append("filesize", file.size);
});
In the provided example code under the #kt_dropzonejs_example_3, I have the "sending" section mentioned but am unsure how to implement adding the file size as form data similar to the example code. Any guidance on modifying the "sending" function to achieve this would be appreciated.