Unable to read image files from sdcard in phonegap: android

android, cordova

Solution

Here is a working example :

EDITED:

<!DOCTYPE html>
<html>
  <head>
    <title>Pick Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

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

    function onDeviceReady() {
       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, onFail);
    }

     function onFail(message) {
      alert('Failed because: ' + message);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("1.jpg", {create: true}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);  
    }

    function readDataUrl(file) {
           var reader = new FileReader();
           reader.onloadend = function(evt) {
           console.log("Read as data URL");
           console.log(evt.target.result);
           document.getElementById("smallImage").style.display='block'; 
           document.getElementById("smallImage").src = evt.target.result;   
        }; 
        reader.readAsDataURL(file);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }
    </script>
  </head>
  <body>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

This will allow you to pick any specified image from sdcard.

Hope this helps you.

Thanks.

Problem

I am a phonegap newbie. I am trying to read and image file from sdcard in android using phonegap official tutorial. The problem is that the image is not being displayed instead a question mark appears in its place. My Code: ``` var pictureSource; var destinationType; document.addEventListener("deviceready",onDeviceReady,false); function onDeviceReady(){ document.getElementById("test").innerHTML="onready about to request"; window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, onFail);} function onFail(message) { alert('Failed because: ' + message); } function gotFS(fileSystem) { fileSystem.root.getFile("1.jpg", null, gotFileEntry, fail); } function gotFileEntry(fileEntry) { fileEntry.file(gotFile, fail); } function gotFile(file){ readDataUrl(file); } function readDataUrl(file) { var reader = new FileReader(); reader.onloadend = function(evt) { console.log("Read as data URL"); console.log(evt.target.result); }; document.getElementById("smallImage").style.display='block'; document.getElementById("smallImage").src = reader.readAsDataURL(file); } function fail(evt) { console.log(evt.target.error.code); } </script> ``` edit: Using API 16 and min-sdk8 "smallImage" is a tag it's working fine with onphotodatasuccess. So, camera is not a problem here. Everything related to camera functions is ok. Reading from sdcard is posing a problem at the assignment statement. document.getElementById("smallImage").src = reader.readAsDataURL(file); if I add this i get the string and unknown chromium error -6, else i see the usual image converted string. Thanks

Original source