Incorrect orientation on image taken with mobile device.

[camrongodbout]

I'm taking a picture with my iPhone 5s and trying to upload a file on my desktop, the images orientation is incorrect.

[okonet]

I'm not sure this is related to the component. The only place that might be related to this is here: https://github.com/okonet/react-dropzone/blob/master/src/index.js#L92 and this is also a browser feature.

I've found this StackOverflow article: http://stackoverflow.com/questions/29752779/how-can-i-preview-image-before-uploading-with-the-correct-orientation-with-javas

I'd accept a PR that fixes it, but I'd rather keep the surface of this library minimal.

[camrongodbout]

I was just curious because Dropzone.js added a fix for this on the client side about 29 days ago. No worries, I understand if we want to keep this as minimalist as possible.

For anyone who finds this in the future what I'm going to do is just use https://github.com/blueimp/JavaScript-Load-Image in the onDrop and it automagically reorients the image based on the exif.

[okonet]

👍

[pukapukan]

If you are storing file in S3, you can use S3 item creation event to trigger Lambda to auto orient image using gm.

[Andriy-Kulak]

@camrongodbout can you explain how you ended up the JavaScript-Load-Image package in React? if I follow the package instructions and add the package as a script tag in index.html file, then I cannot use loadImage because it is undefined in my specific component. Also, I cannot import the package in my Component properly. Any quick tips would be greatly appreciated!

[manoj-makkuboy]

@Andriy-Kulak I created a wrapper for that purpose. $ npm install fix-image-rotation. I am using it along with react-dropzeon in the onDrop function. It uses javascript-load-image internally.

[pavelpashkovsky]

@Andriy-Kulak you can use this repo: (https://github.com/blueimp/JavaScript-Load-Image)

npm i blueimp-load-image

then:

import loadImage from 'blueimp-load-image';

[lounsbrough]

@manoj-makkuboy - fix-image-rotation doesn't work in IE11.

[adityay-perpetualny]

I was just curious because Dropzone.js added a fix for this on the client side about 29 days ago. No worries, I understand if we want to keep this as minimalist as possible.

For anyone who finds this in the future what I'm going to do is just use https://github.com/blueimp/JavaScript-Load-Image in the onDrop and it automagically reorients the image based on the exif.

Could you please let me know how can we implement this

[adityay-perpetualny]

@Andriy-Kulak you can use this repo: (https://github.com/blueimp/JavaScript-Load-Image)

npm i blueimp-load-image

then:

import loadImage from 'blueimp-load-image';

This is pure javascript, how can we use this in react?

[jniyaz]

@Andriy-Kulak I created a wrapper for that purpose. $ npm install fix-image-rotation. I am using it along with react-dropzeon in the onDrop function. It uses javascript-load-image internally.

Hi Manoj, trying your library, in onDrop method, seems not working here.. if you provide example, more appreciated. Thanks.