Question

I am trying to upload an image captured from the camera to a server. The method below works great for any Android devices, but for some reason, it’s failing on iOS. It’s returning a 401 error, which doesn’t make sense:

var options = new FileUploadOptions();
    options.fileKey="files[]";
    options.fileName = 'image_' + obj.id + '.jpg';
    options.mimeType="image/jpeg";
    options.chunkedMode = false;

    var params = new Object();
    params.headers = {
        Authorization: 'Basic ' + loginCreds
    }

    options.params = params;
    var ft = new FileTransfer();
    ft.upload(imageURI, CONTEXT+'URL/files", 
        function(r){
            alert('Finished upload!');
            $.mobile.loading( 'hide' );  
        }, 
        function(error){
            console.log(error.http_status);
            alert('Error uploading image: ' +error.http_status+ ' and code - ' +error.code); 
            $.mobile.loading( 'hide' );  
        }, 
        options, true);

I know there was an issue setting headers in iOS, but I thought that was fixed as of Phonegap 1.9.0. Am I doing something wrong here?

I checked the server logs, and it seems like the authorization header is just simply not being set in iOS. Strange…

Answer 1

So figured this one out after a whole day of wrestling with it. So it turns out, Android and iOS differ on how they can take the headers parameter.

Android:

var params = new Object();
params.headers = {Authorization: 'Basic ' + loginCreds};
options.params = params;

OR

options.headers = {Authorization: 'Basic ' + loginCreds};

iOS:

options.headers = {Authorization: 'Basic ' + loginCreds};

Hope this saves someone somewhere some headaches…