Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dropzone.js resize image to fit the thumbnail size

I'm trying to resize the image in the thumbnail to fix the box size. I've tried this :

Dropzone.options.myAwesomeDropzone = {
            maxFiles: 20,
            maxFilesize: 2,
            maxThumbnailFilesize: 20,
            acceptedFiles: 'image/*,.jpg,.png,.jpeg',
            thumbnailWidth:"250",
            thumbnailHeight:"250",
            init: function() {
                var dropzone = this, xhrs = [];
                $.each(uploadedImages, function (index, path) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', path);
                    xhr.responseType = 'blob';//force the HTTP response, response-type header to be blob
                    xhr.onload = function() {
                        var file = new File([xhr.response], '', {'type': xhr.response.type});
                        //dropzone.addUploadedFile(file);
                        dropzone.emit("addedfile", file);
                        dropzone.emit("thumbnail", file, path);
                        dropzone.emit("complete", file);
                    };
                    xhrs.push(xhr);
                    xhr.send();
                });
                this.options.maxFiles = this.options.maxFiles - uploadedImages.count;
            }
        };

This is the original Image how it looks : http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290-002.jpg

And this is how it's displayed : enter image description here

Also I've tried :

thumbnailWidth:"300",
thumbnailHeight:"300",
===
thumbnailWidth:"400",
thumbnailHeight:"400",

But nothing changed, thumbnailWidth and thumbnailHeight have no effect

like image 983
Chlebta Avatar asked Feb 11 '23 05:02

Chlebta


1 Answers

I had the same problem, but if you call manually the resize function of the dropzone, the thumnails will be in the right dimensions:

var file = new File([xhr.response], '', {'type': xhr.response.type});
dropzone.createThumbnailFromUrl(file,path);
dropzone.emit("addedfile", file);
dropzone.emit("thumbnail", file, path);
dropzone.emit("complete", file);
like image 87
Attila Huszár Avatar answered Feb 12 '23 22:02

Attila Huszár