Image uploaded from a mobile phone to Angular, side or upside down

Question

I can upload images from my desktop to an Angular-based web application overlaid on SharePoint without problems, but if I upload from a mobile phone, such as iPhone, using “Take Photo or Video” or the “Photo Library” function, this leads to that the image becomes lateral if you shoot it in portrait or inverted form when it is made in the landscape. Here is my current download function. Any hints / others had the same problems loading into mobile web applications from iPhones / Mobile Phones to the SharePoint library?

Here is my download 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 is simply pasted into an array for use in an Angular 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 carousel of images on the page is 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: Images are on the side and upside down when uploading to the SharePoint library, so regardless of the output, they appear disoriented when they get to the target library, which I use as the source for displaying on the page.

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

Answer 1

This may be due to EXIF. See Exif Client Side Orientation JS: Rotate and Mirror JPEG Images

If you need a better answer, we will need a code that displays the image and the server side of the code.

UPDATE. I am not a specialist in SharePoint, but you can find a lot about it in SharePoint Stack Exchange. For example, https://sharepoint.stackexchange.com/questions/131552/sharepoint-rotating-pictures-in-library should do the trick.

To summarize a bit: in your case, they could be studied many times. So, I recommended you auto-correct exif, and then allow your user to correct it if the auto-correction error was incorrect. They have many tools for this. If you want to do this on the server side, look at the link above, and if you want to do this on the client side, you can use the JS-Load Image , for example.