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

Question

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?

The use of commas in declarations and to split statements, the mixing of var and const and use of IIFE makes this code rather uncomfortable for me. There's technically nothing wrong with this but it is a unique style that is quite counter to the defacto norms and I'm curious if this is a personal coding style that has been developed or if there are other reasons for this particular style — Codebling
– Codebling, Commented Dec 31, 2021 at 22:08

Codebling · Accepted Answer · 2022-01-03 18:26:59Z

1

+50

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

edited Jan 3, 2022 at 18:26

answered Dec 31, 2021 at 22:20

Codebling

11.6k3 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related