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

It can be done by bypassing the upload done by Dropzone.js. For that, you have to set autoQueue: false in the options (as in the Bootstrap example).

Then you can just send the thumbnail, or you can do it the hard way.

---

Solution 1: Send the thumbnail

myDropzone.on('thumbnail', function(file, dataURL) {
   $.post('http://example.com', {img: imgToSend})
})

You can define the way you will resize/crop by adding the resize function in the options.

---

Solution 2: Resize by yourself

There was an other issue: images can need to be rotated (it happens really often). For that, the EXIF orientation tag has to be used. It is apparently lost when you resize, so you have to fetch this information in the frontend, before you resize. For that, I used the Exif.js library.

Here is a working example on JSFiddle. You can see the resized image's data URI in your console.