Dropzone.js + Client Side Image Resizing

Question

I want to integrate Dropzone.js with a Client Side Image Resizing. I know that there is a function to resize the thumbnail, but I would like to create a functio

Answer 1

The Dropzone documentation on the pre-upload resize feature is confusing. The way it reads, you can either limit the width, limit the height, or limit both and sacrifice Aspect Ratio, distorting the image. This is not the case. This:

resizeWidth: 1000, resizeHeight: 1000,
resizeMethod: 'contain', resizeQuality: 1.0,

Limits either width or height to a max of 1000px - whichever is larger. The other will get reduced in accord with the Aspect Ratio, without distorting the image. So for example, in my test I uploaded a 2688x1512 image. Dropzone cropped and resized the Thumbnail to its default 120x120, but the file sent to the server was resized separately by Dropzone, to 1000x562, then sent to the server.

There is an interesting caveat here. JPEGs are going to be recompressed, lossy, so even a resizeQuality of 1.0 is going to result in loss. I see this feature as a method of preventing insanely large files, but you should be careful of resizing twice if you can avoid it (once on server once on client).

If this isn't enough for you - and you really wanted to overload the transform method - it's worth noting that following the code path inside Dropzone is a little confusing, because the createThumbnail codepath is used twice every upload, once to create a thumbnail like you'd expect, and again to pre-resize the image here before passing it to the server. Likewise, the resize method is confusingly named; while resizeWidth etc refer to prepping the image for upload, resize refers to resizing for the thumbnail, and does nothing to the image sent to the server.