How do I get better quality thumbnails with DropZone.js?

Question

I'm using DropZone to upload files to my server. The default settings are fine, but the photos are a little small. I decided to go into the dropzone.css file and change the default parameters to 250px x 250 px instead of 100px x 100px:

.dropzone-previews .dz-preview .dz-details {
width: 250px;
height: 250px;
position: relative;
background: #ebebeb;
padding: 5px;
margin-bottom: 22px;
}

And the other line...

.dropzone-previews .dz-preview .dz-details img {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
}

As you might expect, only the box got wider but the image itself was stretched and blurry.

Assuming I was being naive by overlooking dropzone.js instead, I opened the file and changed the variables there too:

createImageThumbnails: true,
maxThumbnailFilesize: 10,
thumbnailWidth: 250,
thumbnailHeight: 250,

Still nothing. I want big image thumbnails (250px squares) instead of small, barely recognizable ones (100px squares) but I can't find the parameter that changes this, even though it would seem as if these two files should solve the problem.

Furthermore, the documentation on the website doesn't mention this, even going as far as not including a description on the 'thumbnailWidth' and 'thumbnailHeight' variables because they're presumably self-descriptive.

Any ideas on what I'm doing wrong?

Answer 1

Propably you found the answer, but for others, in your custom.js file pass arguments to dropzone like this:

Dropzone.options.MyDropZoneForm = {
  thumbnailWidth:"250",
  thumbnailHeight:"250"
};

MyDropZoneForm - its form id attribute.