htmlcordovacordova-2.0.0cordova-3

phonegap filereader onloadend doesn't work


I'm using phonegap to take a picture and put it into a img-container.

navigator.camera.getPicture(onSuccess, onFail);

var onSuccess =  function(imageURI) {
        var pic = document.getElementById('picture');
        pic.style.display = 'block';
        pic.src = imageURI;
};

var onFail = function(message) {
        $('#infoField').val(message);
};

That works perfect. Now I want to load the picture with a format to be alble to send it over a websocket. Therefor I use the fileReader and set the type to dataUrl.

var reader = new FileReader();

reader.onloadend = function(evt) {
      $('textarea#textarea1').val("evt triggered");
      //var socket = io.connect(addr);
      //socket.emit('mobilePicture', "works");
};

reader.readAsDataURL(document.getElementById('picture').src);

Unfortunately nothing happens. The onloadend event isn't triggered anyhow. Any ideas?


Solution

  • Try to re-arrange your code like this:

    var onSuccess =  function(imageURI) {
            var pic = document.getElementById('picture');
            pic.style.display = 'block';
            pic.src = imageURI;
    
            var reader = new FileReader();
    
            reader.onloadend = function(evt) {
                  $('textarea#textarea1').val("evt triggered");
                  //var socket = io.connect(addr);
                  //socket.emit('mobilePicture', "works");
            };
    
            reader.readAsDataURL(imageURI);
    };
    
    var onFail = function(message) {
            $('#infoField').val(message);
    };
    
    navigator.camera.getPicture(onSuccess, onFail);
    

    You have to pass a file object to the file.reader not just a path to the file.

    Edit / update:
    To find a file on your filesystem by a path first you will need to create a fileEntry using the fileSystem:

    Example

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    
    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
    }
    
    function gotFileEntry(fileEntry) {
        //fileEntry
        alert("Got the fileEntry!");
        reader.readAsDataURL(fileEntry);
        ...
    }