How to get quality thumbnails with DropZone.js?

Question

I use DropZone to upload files to my server. The default settings are great, but the photos are a bit small. I decided to go into the dropzone.css file and change the default settings 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 another line ...

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

As expected, only the field became wider, but the image was stretched and blurry.

Assuming that I am naive, not paying attention to dropzone.js, I opened the file and also changed the variables:

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

Still nothing. I want large thumbnails of images (250 pixels squares) instead of small, barely recognizable (squares of 100 pixels), but I can not find a parameter that changes this, although it would seem that these two files should solve the problem.

In addition, the documentation on the website does not mention this, even if you do not include the description of the thumbnailWidth and thumbnailHeight variables, as they are supposedly self-describing.

Any ideas on what I'm doing wrong?

Answer 1

You may have found the answer, but for others in your custom.js file, pass the dropzone arguments as follows:

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

MyDropZoneForm is its form id attribute.