dropzone.js can only drag 2 files max

60 views Asked by At

I'm trying to use dropzone.js for uploading images to the browser only (as blob), not to the server.

And it works for dragging 1 or 2 files at a time, but when I drag 3 or more files, only the first 2 are processed.

So in my code the transformFile function is executed only for the first 2 files even though I dragged 3.

this is my code, html:

<div id="picDropZone" style="background: gainsboro;">
    <h2>Drop zone</h2>
</div>

<div id="pictures">
</div>

and the js:

var picsPrev = $('#pictures');
var pics = [];

function updatePics(){
    picsPrev.empty();
    pics.forEach(function (pic) {
        var image = new Image(150);
        image.src = pic;
        picsPrev.append(image);                
    });
}

var myDropzone = new Dropzone("#picDropZone",
{
    url: '...', // not used, error when not set
    maxFiles: 10,
    transformFile: function (file, done) {                    
        var image = new Image();
        var imgurl = URL.createObjectURL(file);
        image.src = imgurl;
        
        pics.push(imgurl);
        updatePics();

        myDropzone.removeAllFiles(true);
    }
});
0

There are 0 answers