Image uploaded from Mobile phone to Angular is sideways or upside down

Question

I am able to upload images from my desktop to an Angular based Web Application overlayed on SharePoint without issue, but if I upload from a Mobile phone, such as an iPhone, using the take "Take Photo or Video" or "Photo Library" function, it causes the image to be sideways when taken in portrait or upside down when taken in landscape. Here is my current upload function. Any clues/have others had the same issues uploading to Mobile Web Applications from iPhones/Mobile Phones to a SharePoint library?

Here is my upload function:

  // Upload of images
    $scope.upload = function () {
        //console.log($scope.files);
            if (document.getElementById("file").files.length === 0) {
                alert('No file was selected');
                return;
            }
            var parts = document.getElementById("file").value.split("\\");
            var uploadedfilename = parts[parts.length - 1];
            var basefilename = uploadedfilename.split(".")[0];
            var fileextension = uploadedfilename.split(".")[1];
            var currentdate = new Date();
            var formatteddate = $filter('date')(new Date(currentdate), 'MMddyy-hmmssa');
            var filename = basefilename + formatteddate + '.' + fileextension;
            var file = document.getElementById("file").files[0];
            uploadFileSync("/sites/asite", "Images", filename, file);
        }

        //Upload file synchronously
    function uploadFileSync(spWebUrl, library, filename, file)
    {
            console.log(filename);

            var reader = new FileReader();
            reader.onloadend = function(evt) 
            {
                if (evt.target.readyState == FileReader.DONE) 
                {
                    var buffer = evt.target.result;
                    var completeUrl = spWebUrl
                      + "/_api/web/lists/getByTitle('"+ library +"')"
                      + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?"
                      + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'";

                    $.ajax({
                        url: completeUrl,
                        type: "POST",
                        data: buffer,
                        async: false,
                        processData: false,
                        headers: {
                            "accept": "application/json;odata=verbose",
                            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                            "content-length": buffer.byteLength
                        },
                        complete: function (data) {      
                            console.log(data);
                        },
                        error: function (err) {
                            alert('failed');
                        }
                    });

                }
            };
            reader.readAsArrayBuffer(file);
        }

The output of these is just pushed into an array for use in an Angular UI Carousel:

 // Control of Image Carousel
    $scope.myInterval = 0;

// Population of carousel
$scope.slides = [];

    appImages.query({
        $select: 'FileLeafRef,ID,Created,Title,UniqueId',  
        $filter: 'ReportId eq ' + $routeParams.Id + ' and DisplayinReport eq 1',
    }, function (getimageinfo) {
        // Data is within an object of "value"
        var image = getimageinfo.value;

        // Iterate over item and get ID
        angular.forEach(image, function (imagevalue, imagekey) {

            $scope.slides.push({
                image: '/sites/asite/Images/' + imagevalue.FileLeafRef,
            });
        });
    });

The image carousel is on page as follows:

<div style="height: 305px; width: 300px">
                <carousel interval="myInterval">
                    <slide ng-repeat="slide in slides" active="slide.active">
                        <img ng-src="{{slide.image}}" style="margin:auto;height:300px">
                        <div class="carousel-caption">
                            <h4>Slide {{$index}}</h4>
                            <p>{{slide.text}}</p>
                        </div>
                    </slide>
                </carousel>
            </div>

IMPORTANT: The images are sideways and upside down upon upload to the SharePoint library, so irrespective of outputting them, they seem to be misoriented when they hit the destination library I am using as a source to display on page.

How do I upload the images so SharePoint respects the EXIF data/orientation?

Answer 1

It may be related to EXIF. See JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images

If you want a better answer, we will need the code which show the image, and the code server side.

UPDATE : I'm not an expert at all on SharePoint, but you can found a lot about it in the SharePoint Stack Exchange. For example, https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library, should do the trick.

To sum up a little : in your case, their could be a lot of cases to study. So, I recommended you auto-correct the exif, and then permit to your user to correct it if the auto-correct was wrong. Their is a lot of tools to do that. If you want to do it server-side, look at the link above, and if you want to do it on the client side, you could use JS-Load-Image for example.