Appgyver/Cordova: Not able to display captured ima

Question

I am able to successfully grab the image from photo library as well as camera and able to sent them to server using FileTransfer plugin, for saving them. But the only piece of code that is not working for is displaying the Image :( When I alert the ImageURI, it gives me the below path:

file://storage/sdcard0/Android/data/com.apgyver.freshandroid/cache/.Pic.jpg

I am not sure if I am missing any plugin or maybe some piece of code?

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

}

function uploadPhoto(imageURI) {

    //alert(imageURI); return false;
    var image = document.getElementById('myImage');
    image.src = imageURI;

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

    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";

    options.params = params;
    options.chunkedMode = false;

    var ft = new FileTransfer();
    ft.upload(imageURI, url, win, fail, options);
}

It does assign the path to src but image cannot be displayed.

Thanks for the help.

Answer 1

You must be missing the img element with id myImage which has width and height set to some value so that it is visible, and is given display: block. Your code follows strictly the code from the examples of the Camera plugin usage and since it goes correctly to the server you should have all the plugins & permissions needed.