Dropzone thumbnail width image size

Question

How do I change the thumbnail size of uploaded images? I have tried thumbnailWidth:"350" in my javascript, However that does not increase the thumbnail size, rather the thumbnail just looks zoomed in on. How do I go about manipulating the image thumbnail size?

HTML:

<section id="create">
<form action="upload.php" class="dropzone" id="uploadphoto"></form>
</section>

CSS:

.dropzone {
position: relative;
border: 10px dotted #FFF;
border-radius: 20px;
color: white;
font: bold 24px/200px arial;
height: 400px;
margin: 100px auto;
text-align: center;
width: 400px;
}

.dropzone:hover {
border: 10px dotted #0C3;

.dropzone.dropped {
background: #222;
border: 10px dotted #444;
}

.dropzone.in {
width: 600px;
height: 200px;
line-height: 200px;
font-size: larger;
}

.dropzone img {
border-radius: 10px;
vertical-align: middle;
max-width: 95%;
max-height: 95%;
}

Javascript:

Dropzone.options.uploadphoto = {
maxFilesize: 25, //MB
dictDefaultMessage: "Drag and Drop Posters    or click",
acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF,.pdf,.pub",
thumbnailWidth:"350",
accept: function(file, done) {
    console.log("uploaded"); //debuging the upload
    done();
},
init: function() {
 this.on("addedfile", function() {
  if (this.files[1]!=null){
    this.removeFile(this.files[0]);
       }
    });
  }
};

Try setting the `thumbnailHeight` property as well. It seems to work ok (rough example http://jsbin.com/fowivuxuba/1/edit?html,css,js) — melc, Jan 19 '15 at 20:41
No it does not, the thumbnail's size remains the same. It is almost like the thumbnail size cannot be overwritten. — Crisp, Jan 19 '15 at 22:29

score 23 · Answer 1 · edited Sep 19 '18 at 19:00

23

Override the CSS with the same values you use in the configuration options

.dropzone .dz-preview .dz-image {
  width: 250px;
  height: 250px;
}


Dropzone.options.myAwesomeDropzone = {
  ....
  thumbnailWidth: 250,
  thumbnailHeight: 250,
  ....
}

See the JS Fiddle here

edited Sep 19 '18 at 19:00

dsomel21

576
2
8
27

answered May 30 '15 at 01:16

dangel

7,238
7
48
74

It appears as though you should only have to change the Dropzone options thumbnailWidth and / or thumbnailHeight? From Dropzone documentation: "thumbnailWidth if null, the ratio of the image will be used to calculate it. thumbnailHeight the same as thumbnailWidth. If both are null, images will not be resized." Ideally this is what you would want the ability to just change these two options so you can get a thumbnail of the correct aspect ratio for any image size. But I had to use the above method by @dangel and set both width and height as in his example? – Neal Davis Jun 08 '15 at 22:46
Thanks. For my case, I set the width to `300` and height to `null` so it auto sizes the height. – d_rail Jun 29 '18 at 17:58

score 0 · Answer 2 · answered Oct 14 '18 at 08:19

0

use css zoom

 .dropzone {
     zoom: 0.4;
 }

answered Oct 14 '18 at 08:19

Konstantin XFlash Stratigenas

605
6
10

3

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Kalle Richter Oct 14 '18 at 08:57

Dropzone thumbnail width image size

2 Answers2

Linked