Images turning sideways/upside down after being uploaded via PhoneGap (iOS)

Question

Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.

For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z

It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z

I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".

Here is my upload function:

function uploadPhoto() {

    var options = new FileUploadOptions();
    options.fileKey  = 'file';
    options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
    options.mimeType = 'image/jpeg';

    var params = new Object();

    if(logged_in == true) {

        params.unique_id  = app_unique_id; 
        params.secret_key = user_secret_key;

    }

    options.params = params;

    loadingStart();

    var ft = new FileTransfer();

    ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);

}

imgURI value looks like this:

file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg

Any insight is appreciated.

Answer 1

Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.

To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.

Here are two examples:

function capturePhoto() {

    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });

}

function getPhoto(source) {

    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30, 
    destinationType: destinationType.FILE_URI,
    sourceType: source,
    correctOrientation: true });

}