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