Dropzone.js v4+ - Display existing files on server with work limiting the number of files and other functions
Asked Answered
P

1

4

How to add existing files on server to dropzone with right work all functions and right styling?

Precautious answered 25/7, 2015 at 13:50 Comment(0)
P
14

I wrote a function to add files: addCustomFile(file, thumbnail_url , responce)

Powered by Version: 4.0.1 stable

Correct working: maxFiles limit, event maxfilesexceeded, event success and others

$("#dropzone-images").dropzone({
    url: "...",
    paramName: 'image_temp',
    maxFiles: 1,
    init: function () {
        this.addCustomFile = function(file, thumbnail_url , responce){
            // Push file to collection
            this.files.push(file);
            // Emulate event to create interface
            this.emit("addedfile", file);
            // Add thumbnail url
            this.emit("thumbnail", file, thumbnail_url);
            // Add status processing to file
            this.emit("processing", file);
            // Add status success to file AND RUN EVENT success from responce
            this.emit("success", file, responce , false);
            // Add status complete to file
            this.emit("complete", file);
        }

        this.addCustomFile(
            // File options
            {
                // flag: processing is complete
                processing: true,
                // flag: file is accepted (for limiting maxFiles)
                accepted: true,
                // name of file on page
                name: "The name",
                // image size
                size: 12345,
                // image type
                type: 'image/jpeg',
                // flag: status upload
                status: Dropzone.SUCCESS
            },
            // Thumbnail url
            "http://.../img.jpg",
            // Custom responce for event success
            {
                status: "success"
            }
        );
    }
});
Precautious answered 25/7, 2015 at 13:50 Comment(1)
Although this works well... its highly annoying to see a dozen flying checkmarks on images when the page first loads. I've been trying as I can to get it to not show the flying "dz-success-mark" for already uploaded images being displayed like this.Sumerlin

© 2022 - 2024 — McMap. All rights reserved.