Search code examples
javascriptdropzone.jsfunction-expression

How can I set named function expressions on my Dropzone options?


I have multiple Dropzones in my project that are all very similar. On one of them, I had to create a minimum file width, but the video Dropzone doesn't work with the file width code. I ended up having to create a separate options call for each Dropzone. This created a lot of duplicated code for the functions that are on both options calls. Is there a way I can create named function expressions for all my options and use the names so that I don't have so much duplicated code?

Dropzone.options[item.substring(1, item.length)] = {
    acceptedFiles: files,
    previewTemplate: document.getElementById('tpl').innerHTML,
    accept: function(file, done) {
        file.acceptDimensions = done;
        file.rejectDimensions = function () { done("Image must be at least 450 pixels wide."); }
    },
    init: function () {
        this.on("thumbnail", function (file) {
            if (file.width !== undefined) {
                if (file.width < 3 * 150) {   // File must be at least 3 blocks wide
                    file.rejectDimensions();
                } else {
                    file.acceptDimensions();
                }
            }
        });
        this.on("success", function (file, response) {
            // code here, including persist variable, which I need to pass in
            generateUIDs(Dropzone.forElement(item).files, persist);
            // more code
        });
    },
    sending: function (file) {
        Dropzone.forElement(item).removeAllFiles();
    },
    removedfile: function (file) {
        // code here, also need persist for this call
        generateUIDs(Dropzone.forElement(item).files, persist);
        //more code
    }
};

Ideally, I'd like for accept, sending, and removedFile to each be one line to reference a named function expression, with my persist variable being passed in. I'd like the init events to do the same thing.


Solution

  • I figured out the syntax:

    Dropzone.options[item.substring(1, item.length)] = {
        acceptedFiles: files,
        maxFilesize: 512,
        previewTemplate: document.getElementById('tpl').innerHTML,
        init: function () {
            this.on("success", function (file, response) { return DropzoneOnSuccess(file, response, item, persist, btn) });
        },
        sending: function (file) {
            Dropzone.forElement(item).removeAllFiles();
        },
        removedfile: function (file) { return DropzoneRemoved(file, item, persist, saver, btn); }
    };
    
    var DropzoneAccept = function (file, done) {
        file.acceptDimensions = done;
        file.rejectDimensions = function () { done("Image must be at least 450 pixels wide."); }
    };
    
    var DropzoneCheckThumbnail = function (file) {
        if (file.width !== undefined) {
            if (file.width < 3 * 150) {   // File must be at least 3 blocks wide
                file.rejectDimensions();
            } else {
                file.acceptDimensions();
            }
        }
    };
    
    var DropzoneOnSuccess = function (file, response, persist) {
        // code
        generateUIDs(Dropzone.forElement(item).files, persist);
        //more code
    };
    
    var DropzoneRemoved = function (file, persist) {
        // code
        generateUIDs(Dropzone.forElement(item).files, persist);
        // more code
    };