Search code examples
cordovauploadfile-transfergetpicture

phonegap/cordova getPicture from photolibrary file-transfer not working


I experience some problem in combining Cordova's camera.getPicture plugin and their FileTransfer.upload plugin. The weirdest thing is that everything works well when I take the picture from camera, and not when I retrieve it from library.

The issue looks like this one: Phonegap/Cordova Uploading Image from gallery is not working on Android Kitkat

But I'm using Cordova 3, so that must fix kitkat issues.

My code:

var imageUploadUrl = setting_api_url + "Umbraco/Api/ImageApi/PostUpload";
var formSubmitUrl = setting_api_url + "Umbraco/Api/FormApi/PostSend";
var imageUriStorage = [];
var resultsCollection = [];
var FieldId;

var take_photo = function(fieldId) {
FieldId = fieldId;
navigator.camera.getPicture(onTakeSuccess, 
                            onTakeFail, 
                            { 
    quality: 30, 
    destinationType: Camera.DestinationType.FILE_URI, 
    sourceType: Camera.PictureSourceType.CAMERA,
    targetWidth: 800,
    targetHeight: 800,
    correctOrientation: true
});
};

var get_photo = function(fieldId) {
FieldId = fieldId;
navigator.camera.getPicture(onTakeSuccess, onTakeFail, { 
    quality: 30, 
    destinationType: Camera.DestinationType.FILE_URI, 
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth: 800,
    targetHeight: 800,
    correctOrientation: true });
};

var onTakeSuccess = function(imageURI) {
console.log("onTakeSuccess imageURI= " + imageURI);

var image = document.getElementById("preview-" + FieldId);

// UPLOAD PART COPIED
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = src.substr(src.lastIndexOf('/') + 1);
var filetype = src.substr(src.lastIndexOf('.') + 1);
if(filetype == "png") {
    options.mimeType = "image/png";
}
else if (filetype == "jpg") {
    options.mimeType = "image/jpeg";
}

var ft = new FileTransfer();
ft.upload(imageURI, encodeURI(imageUploadUrl), image_upload_win, image_upload_fail, options);
// END.


imageUriStorage.push({ 'Id':FieldId, 'Path': imageURI});

image.src = imageURI;
};

var onTakeFail = function(message) {
alert('on take fail. Code: ' + message);
};

// called when upload succeeds        
var image_upload_win = function (r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
};

// when upload fails
var image_upload_fail = function (error) {
    alert("Code = " + error.code + "-" + error.http_status + ", image:" + error.source);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
};

Both take_photo and get_photo hit the same function onTakeSuccess, so they will get the same process. When the source is the Camera, the image is uploaded correctly and the server gives a correct response (and HTTP 201).

But, when the source is the library, this fails. The FileTransfer.Upload gives error code 1 (File not found), but this can't be true, because the image is displayed correctly in my app's image element.

The server gives HTTP 400 bad request.

There is one difference in the process, being the format of the image's URL, but how should that make such difference?

Log successful getPicture (CAMERA):

onTakeSuccess imageURI=file:///mnt/sdcard/Android/data/com.XXX.YYY/cache/1404910577158.jpg
Code = 201
Response = "8999"
Sent = 195

Log unsuccessful getPicture (LIBRARY):

onTakeSuccess imageURI= file:///mnt/sdcard/Android/data/com.XXX.YYY/cache/modified.jpg?1404910903858
upload error source file:///mnt/sdcard/Android/data/com.XXX.YYY/cache/modified.jpg?1404910903858
upload error target https://CORRECTURL/Umbraco/Api/ImageApi/PostUpload

Besides, the getPicture (LIBRARY) situation gives this alert:

Code = 1-400, image:file:///mnt/sdcard/Android/data/com.XXX.YYY/cache/modified.jpg?1404910903858


Solution

  • My current workaround is to remove the "?" and everything that follows from the imageUri. So that the URI always looks like:

    file:///mnt/sdcard/Android/data/com.XXX.YYY/cache/modified.jpg
    

    In my case this works properly and transfers the file correctly