Image exif-data is not read leading to images not properly uploaded

[SebastianSchirmer]

For images uploaded using ng-file-upload, the exif-orientation is not taken into account so that images are not always uploaded properly. For examples see sample images in this github repo:

https://github.com/recurser/exif-orientation-examples

Other file and image upload libraries perform an exif-check and transform an uploaded image accordingly. For an example see https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-exif.js

[danialfarid]

What browser/version?

[SebastianSchirmer]

Well, this issue is browser-independent and appears in any browser. The issue is that image exif-data is not read at all by the ng-file-upload library. This issue can only be solved by reading exif-data and applying the appropriate image transform actions.

For more information on this issue and exif-data see this article: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

By the way, really like your library besides that :-)

[danialfarid]

The plugin just sends the file content to the server, so you are saying that the file content need to be modified before being sent to the server?

[SebastianSchirmer]

Well, if you want to show an image preview then yes. One could probably also modify an image server-side, but this would eliminate a proper image preview before server upload.

A file upload library which supports image upload and preview before upload should certainly implement it, in my opinion.

[danialfarid]

But the previews looks fine with the file sample you sent on the demo page.

[SebastianSchirmer]

Try this one: https://github.com/recurser/exif-orientation-examples/blob/master/Portrait_8.jpg

[danialfarid]

exif data is embedded inside the file binary so it is the responsibility of the browser or the client that is showing the image to consider the exif data attached to the file. I don't think this plugin should change the file binary to cover up for browsers bugs.

[crispwake]

I would agree ng-file-upload should not modify the image prior to upload, that is the server's responsibility. However, I have an image preview (via ngf-src="file[0]") and it does not properly read the EXIF data to show the preview. This happens on the front-end prior to the upload completing. Is there any way for that preview image to auto-orientate?

[hirbod]

Hi,

I think that this plugin need to have a option for that at least. For example: Cordova's File Upload Plugin (for Phonegap Development) has an option "correctOrientation: true" (default is set to false).

This plugin should have the same ability. I think it is an big overhead to implement another plugin or function to correct the orientation and pass it back to ng-file-upload before it starts uploading.

The most problems with orientation came from mobile devices. Nearly every image from my iPhone is rotated wrong. I don't think it is nice to do correction serverside, as the client has enough capabilities and performance to rotate an image corretly.

[danialfarid]

Fixed at version 9.1.0.
By default the exif orientation rotations will be applies but it could be controlled by ngf-fix-orientation="boolean"

[hirbod]

Dear @danialfarid

thanks for your hard work! I just updated to the newest version, ngf-fix-orientation="true" will work fine when I use Firefox (e.g. Desktop), but whatever I try, the images do have a wrong Orientation when I use my iPhone for this.

Will ngf-fix-orientation="true" change the actual file or only the ngf-src source? I think it change the file, as the fix seems to work when uploading with Firefox (where it did not work correctly before).

I'm on iOS 9.0.2 currently.

[hirbod]

@danialfarid please ignore my request, I forgot that I had server-side rotation. I deactivated my server-side rotation, now it work as intended.

[ishener]

my god that's a huge time saver. thank you!

[alexislg2]

@hirbod Why servcer-side rotation is an issue?
With ngf-fix-orientation="true" , it should remove the exif data isn't it? So the servcer-side rotation should have no effect, should it?

[hirbod]

Well it did not work for me. Maybe my server side implementation was buggy. I could not use the fix on server and on client. @alexislg2