Unable to load image when selected from the gallery on Android in phonegap

Question

I want to select image form android gallery and upload image to server. My code works properly for IOS apps. But not getting image from android phone.

Inside android app getting show image url like this

content://com.android.providers.media.documents/document/image%3A352

What should I do to get the right image extension from Android gallery? I am using Hybird App with Phonegap.

document.addEventListener("deviceready", onDeviceReady, false);

        // device APIs are available
        //
        function onDeviceReady() {
            // Retrieve image file location from specified source
            navigator.camera.getPicture(
                uploadPhoto,
                function(message) { alert('get picture failed'); },
                {
                    quality         : 100,
                    destinationType : navigator.camera.DestinationType.FILE_URI,
                    sourceType      : navigator.camera.PictureSourceType.PHOTOLIBRARY
                }
            );
        }

        function uploadPhoto(imageURI) {
            //alert(imageURI); return false;

            //alert(imageURI);  

            var options = new FileUploadOptions(); 
            options.fileKey="file";

            //options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1)+'.png';
            options.mimeType="image/jpeg";

            var params = {};
            params.value1 = "test";
            params.value2 = "param";

            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.params = params; 
            options.chunkedMode = true; //this is important to send both data and files

            alert(options.fileName);
            var ft = new FileTransfer();
            ft.upload(imageURI, encodeURI("file_upload.php"), win, fail, options);
        }

        function win(r) {
                alert("Code = " + r.responseCode); //http response 200, means OK
                alert("Response = " + r.response); //php uploader response (failed)
                alert("Sent = " + r.bytesSent); //filesize
       }

        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }

Answer 1

This is a cordova bug - https://issues.apache.org/jira/browse/CB-5398.

You can change your path like this.

function uploadPhoto(imageURI) {
            //alert(imageURI); return false;

            //alert(imageURI);  
            if (imageURI.substring(0,21)=="content://com.android") {
                photo_split=imageURI.split("%3A");
                imageURI="content://media/external/images/media/"+photo_split[1]; 
              } 

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

            var params = {};
            params.value1 = "test";
            params.value2 = "param";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.params = params; 
            options.chunkedMode = true; //this is important to send both data and files

            //alert(options.fileName);
            var ft = new FileTransfer();
            ft.upload(imageURI, encodeURI("file_upload.php"), win, fail, options);
        }

And send image request to file_upload.php. Add some condition like this.

       $file=$_FILES['file']['name']; 
        $new_file=explode('.', $file);
        $img_file=end($new_file);

        if($img_file=='png' || $img_file=='jpeg' || $img_file=='jpg')
        {  
            $file_name=$new_file[0];
        }  else { 
             $file_name=$_FILES['file']['name'];
             $_FILES['file']['name']=$_FILES['file']['name'].'.jpg';
        } 

        move_uploaded_file($_FILES["file"]["tmp_name"], 'your_location'.$file_name);

Answer 2

You can specify encodingType: Camera.EncodingType.JPEG and render image in your success callback like this- $('#yourElement).attr('src', "data:image/jpeg;base64," + ImageData);

navigator.camera.getPicture(onSuccess, onFail, {
    quality: 100,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 500,
    targetHeight: 500,
    popoverOptions: CameraPopoverOptions,
    saveToPhotoAlbum: false,
    correctOrientation: true
});

function onSuccess(imageData) {
    console.log("Image URI success");
    ImageData = imageData;
    $('#yourElement).attr('src', "data:image/jpeg;base64," + ImageData);
    }