How to fix EXIF orientation on before upload with angular-file-upload

Question

I am using angular-file-upload directive to upload files, I have problem with images or photos taken with apple devices, I understand that apple include exif orientation data on image to correct view on apple devices, but when these images are uploaded on web app the orientation is wrong for browsers.

I am using this directive in several views on my app, for time reazon change to another like ng-file-upload is not the best option.

There are some other directives that fix this problem like ng-file-upload but I want to know how to fix this issue with onBeforeUploadItem event of angular-file-upload.

Answer 1

Now I solved it.

here's what I do.

Here's the code in html:

<input id="upload_button" type="file" nv-file-select="" uploader="uploader" multiple/>

and

<img ng-show="uploader.isHTML5" ng-src="{{pic}}" height="100%" />

then in controller:

var handleFileSelect = function(evt) { $scope.pic = "";

    var target = evt.dataTransfer || evt.target;
    var file = target && target.files && target.files[0];
    var options = {
        canvas: true
    };

    var displayImg = function(img) {
        $scope.$apply(function($scope) {
            $scope.pic = img.toDataURL();
            $scope.rotatedFile = dataURItoBlob($scope.pic);
        });
    };

    loadImage.parseMetaData(file, function(data) {
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
        }
        loadImage(file, displayImg, options);
    });

};
angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);

var dataURItoBlob = function(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: mimeString});
    };`

and then, before upload:

uploader.onBeforeUploadItem = function(item) {
        $log.debug('onBeforeUploadItem', item);

        item._file = $scope.rotatedFile;
    };

and you need loader-image.min.js, ng-img-crop.js and [ngImgCrop] in app.js

And that's it.

I hope it helps you.