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

Granulite

Try setting the thumbnailHeight property as well. It seems to work ok (rough example jsbin.com/fowivuxuba/1/edit?html,css,js) – Mowery

No it does not, the thumbnail's size remains the same. It is almost like the thumbnail size cannot be overwritten. – Granulite

Answer 1

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

Peskoff

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? – Simone

Thanks. For my case, I set the width to 300 and height to null so it auto sizes the height. – Nodus

Answer 2

use css zoom

 .dropzone {
     zoom: 0.4;
 }

Quadrifid

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. – Kc