In phonegap File Reader is not reading the file by

Question

I am new to to the developing phonegap application. I need to choose the picture from the photolibrary after that need to store the path of the selected picture in localStorage, still this i did using destinationType as FILE_URI then i need to call another function which helps to converting the selected picture into base64 string by using File Reader's property readAsDataURL and upload that string to the server. The first part is working fine but that second part is not working please help me to solve this problem.

My HTML page is,

<button class="button" onclick="uploadImage();">From Photo Library</button>
<img style="display:none;width:60px;height:60px;" id="largeImage" src="" />
<button class="button" onclick="syncData();">Sync Data</button>

My Script.js is,

var pictureSource;   // picture source
var destinationType; 
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
   pictureSource=navigator.camera.PictureSourceType;
   destinationType=navigator.camera.DestinationType;
}
var pictureSource = navigator.camera.PictureSourceType;
var destinationType = navigator.camera.DestinationType;
function uploadImage(){ 
   alert('called upload pic');
   //Using library            
   navigator.camera.getPicture(uploadPhoto, onFailcapturePhoto, { quality: 50, 
    destinationType: destinationType.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY});
}
function onFailcapturePhoto(message) {    
   alert("Message = " + message);
}
function uploadPhoto(imageURI) {
  if(!localStorage.imageArray) {
      var imageArray = [];
      imageArray.push(imageURI);
      localStorage.setItem('imageArray',JSON.stringify(imageArray));
      alert(JSON.stringify(imageArray));
  } else {
      var imagefile = JSON.parse(localStorage.imageArray);
      imagefile.push(imageURI);
      localStorage.setItem('imageArray',JSON.stringify(imagefile));
      alert(JSON.stringify(imagefile));
  }
  var largeImage = document.getElementById('largeImage');
  largeImage.style.display = 'block';
  largeImage.src = imageURI; // here i can display the image
}
function syncData() {
var reader = new FileReader();                              
var selectedImageArray = [];
function readFile(index) {
    alert('in read file'); // here i am getting alert
    if( index >= JSON.parse(localStorage.imageArray).length ) return;
    var file = JSON.parse(localStorage.imageArray)[index];
    alert('file=='+file);  // here i am getting path     
    reader.onloadend = function(e) {  
        // get file content
        alert('in loadend');
        selectedImageArray[index] = e.target.result;
        alert('image data==:>'+selectedImageArray[index])       
        readFile(index+1);                          
    }
    if(file) {
        alert('going to read'); // i got alert here, after this line i don't get anything
        reader.readAsDataURL(file);
        alert('reading finished');
    } else {
        alert('Your Browser does not support File Reader..');
    }           
}                           
readFile(0);    
alert('before clear'+JSON.stringify(localStorage.imageArray));
localStorage.clear();
alert('after clear'+JSON.stringify(localStorage.imageArray));   
}

Thanks & Regards, Murali Selvaraj

Answer 1

By Following code i got answer for my question.. big thanks to this author..

my updated code is:

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

if(!localStorage.imageArray) {
    var imageArray = [];
    imageArray.push(imageURI);
    localStorage.setItem('imageArray',JSON.stringify(imageArray));
    alert(JSON.stringify(imageArray));
} else {
    var imagefile = JSON.parse(localStorage.imageArray);
    imagefile.push(imageURI);
    localStorage.setItem('imageArray',JSON.stringify(imagefile));
    alert(JSON.stringify(imagefile));
}
}

function syncData() {
   var selectedImageArray = new Array();
   function readFile(index) {
    if( index >= JSON.parse(localStorage.imageArray).length ) {
        if(selectedImageArray.length == 0) return;      
        $.ajax({
            url : 'Here place your api', //your server url where u have to upload
            type : 'POST',
            dataType : 'JSON',
            contentType : 'application/json',
            data : JSON.stringify(selectedImageArray)
        })
        .done(function(res) {
            alert('success='+res);
            localStorage.clear();
        })
        .error(function(err) {
            alert('error='+err);
        }); 
    } else {
        var filePath = JSON.parse(localStorage.imageArray)[index];
        window.resolveLocalFileSystemURI(filePath, function(entry) {
            var reader = new FileReader();

            reader.onloadend = function(evt) {
                selectedImageArray.push(evt.target.result);
                readFile(index+1);
            }

            reader.onerror = function(evt) {
                  alert('read error');
                  alert(JSON.stringify(evt));
              }

            entry.file(function(f) {
                reader.readAsDataURL(f)
            }, function(err) {
                alert('error='+err);
            });

        });
    }       
}
readFile(0);
}