javascriptdropzone.jsdropzone

JavaScript: Dropzone.js - Adding File Size and Dimensions to Form Submission


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 and file.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?


Solution

  • 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);
    });