Forum | Appery.io

Hi, I upload an image that was taken in portrait orientation to the database files(using FileDB__files_upload_service) and get a url back. When I click the image url in the browser, the image looks fine. If I try to import it to my app, it almost always flips 90 degrees to be in Landscape orientation no matter how/where it's being used.
Have you ever heard of this happening before? Do you know of any solutions?
It happens with every picture that's in portrait orientation. I'm using the ionic app.

For example, this is an image url that's saved in the db and I import to the app:
Image

I have an image placed on a page that has the link above imported to $scope.user.image_url via REST.

On the image I use ng-src {{user.image_url}} attribute.

The image loads like this:

I also used this code to check the dimensions of that picture and it shows that the image has been rotated in the logs:
var img = new Image();
img.onload = function() {
console.log(this.width + ' ' + this.height);
width = this.width;
height = this.height;
console.log($scope.user.image_url);
console.log("height = " + height);
console.log("Width = " + width);
}

The height should be greater since the picture is in portrait orientation but the logs show it to be lesser. 3000 2250 is logged for Width x Height.

This is a different place that it is displayed using the url directly from the service response of the db File upload.

Hello,

This is very strange behavior. Please check the request parameter "EncodingType" in your camera service: https://forum.ionicframework.com/t/ca...

ok thanks, I'll check on that.

I couldn't find anything. I just use the Appery ionic File Upload Plugin to either choose a picture from my camera roll(iPhone 7) or take a picture. Sometimes the picture displays correctly and sometimes it doesn't. I have no idea what's going on with that. Is there an alternative to using the ionic file upload plugin that you think might work better?

Sorry, but we can't reproduce this issue. Could you clarify, how these images were created and how do you upload them?

In my page init() I use the code from the plugin:
code
document.getElementById('file_to_upload').addEventListener('change', function(e) {
$scope.files = [];
var el = document.getElementById('file_to_upload');
_.each( el.files, function( v ){
$scope.files.push( {
filename: v.name,
isUploaded: false,
filepointer: v
} );
});
$scope.$apply();
});
/code

I then upload the file after someone either takes with their camera or chooses one from the existing camera roll.
I have been using my iPhone 7+ to do this and the issue happens with both options listed above when in Portrait orientation.
This is the Upload code that I use. Once I get the image_url returned, I then save that url to my database for later use.
code
var requestData = {};
requestData = (function mapping3483($scope) {
var requestData = {};
requestData.headers = Apperyio.EntityAPI('FileDB__files_upload_service.request.headers', undefined, true);
var user_scope = $scope.user;
requestData.headers['X-Appery-Session-Token'] = user_scope.session_token;
var files_scope = $scope.files;
var formData = new FormData();
requestData.data = _.pluck($scope.files, 'filepointer');
return requestData;
/CLICK TO EDIT MAPPING/
})($scope);

// read more about using rest services: https://links.appery.io/ve-snippet-rest
Apperyio.get("FileDB__files_upload_service")(requestData).then(
function(success) { // success callback
/CLICK TO EDIT MAPPING/
console.log(JSON.stringify(success));
$scope.user.image_url = success.data[0].success.fileurl;
$scope.user.image_filename = success.data[0].success.filename;
},
function(error) {
},
function(notify) { // notify callback, can fire few times
});
/code

This upload seems pretty straight forward since it's from the plugin but I'm not sure why I'm getting the sideways images sometimes.

Hello -

Is it possible for you to share Appery.io project with support so that we can report this to our development team and also specify following details:

1. App name
2. Specify the test credentials if login functionality is implemented in your app
3. Detailed steps to reproduce the issue