How to do that dropzone.js take into account the preload images when I set the limit count of upload images?

Question

When I load the dropzone.js component, I preload a set of images as described in How do I preload images into dropzone.js . My problem is that i need to limit the maximum uploads to 5 images, but the dropzone don't count the images that I preload, so I can upload "five images more". How to fix that?

Answer 1

This worked for me

var myDropzone = new Dropzone("#div",{
    addRemoveLinks: true,
    maxFiles: 5,
    init: function() {
        var thisDropzone = this;
        $.getJSON('/upload', function(data) { // get the json response
            $.each(data, function(key,value){ //loop through it
                var mockFile = { name: value.name, size: value.size };
                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.url);
                thisDropzone.files.push(mockFile)       
            });
        });
    }
 });
myDropzone.on("maxfilesexceeded", function(file) {
  this.removeFile(file);
})


myDropzone.on("addedfile", function(file) {
    if(this.files.length > 5){
        for(var i=maxScreenshots;i<=this.files.length;i++)
            this.removeFile( this.files[i] )    
            alert("Maximum 5 Screenshot can be added")
            return;
    }
});

Answer 2

I've had the same issue for quite some time and after researching the plugin, I found a way to fix the problem. When trying the preload existing images, you have to add a key called "accepted:true" to the mock object like so:

var mockFile = { name: value.name, size: value.size, accepted: true };

The reason this happens, is because the this.getAcceptedFiles() method checks for the accepted key on the file object. If you preload images you have to include that as part of the objects, so that the plugin knows that the images is accepted and part of the total amount of images.

I hope it works for all of you guys!

Let me know if it breaks anything somewhere else...

Answer 3

You need to set maxFiles to 5. Further searching the net, found out that once maxFiles reaches the prescribed number of files, a class dz-max-files-reached is now added to the main element. With this new feature, you can now do things with the class being there. Here is the change item https://github.com/enyo/dropzone/issues/28