Dropzone.js resize image to fit the thumbnail size

Question

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

Possible duplicate of [Dropzone.js + Client Side Image Resizing](https://stackoverflow.com/questions/20533191/dropzone-js-client-side-image-resizing) — Chris Moschini, Oct 20 '17 at 23:22

score 7 · Answer 1 · answered Jul 29 '15 at 14:42

7

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);

answered Jul 29 '15 at 14:42

Attila Huszár

71
1
2

1

thanks, adding the method call "createThumbnailFromUrl" did the trick for me. – Sameer Nyaupane Jun 14 '16 at 09:04

Chamilyan · Accepted Answer · 2015-05-06T15:56:19.927

1

You can size a new image explicitly in javascript.

var img = new Image();
img.src =  'http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290-002.jpg';
img.height = 300;
img.width = 300;

img is now resized with proper dimensions.

Also, I just looked at the dropzone.js documentation and this method is probably of use. http://www.dropzonejs.com/#config-resize

edited May 06 '15 at 15:56

answered May 06 '15 at 15:48

Chamilyan

9,347
10
38
67

Thank's For this solution but I want to use `thumbnailWith and thumbnailHeight...` of the library – Chlebta May 06 '15 at 15:55

score 0 · Answer 3 · answered Feb 23 '21 at 18:13

I had a similar problem and was able to fix it by updating the CSS for the thumbnail that was generated. You will need to put this in your CSS

.dz-image img{
    width: 130px;
    height:130px;
}

Explanation: the problem is that the image is larger the the div and hiding the rest of the picture thus you end up with just a corner of it.

score 0 · Answer 4 · answered Jul 03 '23 at 06:33

0

After many tries, I found this and it worked fine for me.

.dz-image img{
   width: 100%;
   height: 100%;
}

answered Jul 03 '23 at 06:33

Khyati Bhojawala

146
1
11

Dropzone.js resize image to fit the thumbnail size

4 Answers4

Linked