phonegap/cordova getPicture from photolibrary file-transfer not working

Question

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

Answer 1

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

Answer 2

Using cordova 6.0.0, cordova-plugin-camera 2.1.0, cordova-plugin-whitelist 1.2.1

I had similar problem (although probably for different reason since it's a newer version).

I found that I need to have the following lines in the config.xml

<access origin="*" />
<access origin="content:///*" />

NOTE: having only

<access origin="*" />

was not enough

Answer 3

Yes! some files from gallery are this format: modified.jpg?1438896451328 in name of file.

To prevent, i put some code in my upload.php file:

        $temporary = explode(".", $_FILES["file"]["name"]);
        $file_extension = end($temporary);

   // cortamos caracteres extraños por si llega algun nombre de archivo raro
        $cadena = $file_extension; 
        $patron = "?"; 
   // localicamos en que posición se haya "?"
        $posicion = strpos ($cadena, $patron); 
   // eliminamos los caracteres desde ? hacia la derecha
        if ($posicion !== false){
        $file_extension = substr ($cadena, 0, $posicion); 
        }

then you can operate for filter file type, size etc and finally save it.