input type=“file” not populating canvas on android browser

[chukka32]

I trying to build a web app using html5 which has a user profile page and I am having an issue with input type="file" when testing it on an Android browser. When selected it gives me the option to open camera or gallery, when an file is selected, it populates the file field, but I can't get the file to populate the canvas. This is working perfectly on ios and firefox, chrome on Android.

Here is the html code:

 <canvas id="canvas" width="160" height="120" style="border:1px solid #000000;"></canvas>
    <input type="file" capture="camera" accept="image/*" id="takePictureField" onchange="picChange(event)">

And the JavaScript:

function picChange(evt) { var fileInput = evt.target.files;

if(fileInput.length>0)
{
    var windowURL = window.URL || window.webkitURL;
    var picURL = windowURL.createObjectURL(fileInput[0]);
    var photoCanvas = document.getElementById("canvas");
    var ctx = photoCanvas.getContext("2d");
    var photo = new Image();

    photo.onload = function()
    {
        ctx.drawImage(photo, 0, 0, 160, 120);
    };
photo.src = picURL;
windowURL.revokeObjectURL(picURL);
}
}

Can anyone see what I'm doing wrong?? Do I need to add something to the windowURL so that Android can recognize it?? Any help would be greatly appreciated as this is really starting to bug me!!

[pixelsoul]

Try this.

function picChange(evt) {

  var fileInput = evt.target.files;

  if(fileInput.length>0)
  {
      var windowURL = window.URL || window.webkitURL;
      var picURL = windowURL.createObjectURL(fileInput[0]);
      var photoCanvas = document.getElementById("canvas");
      var ctx = photoCanvas.getContext("2d");
      var photo = new Image();

      photo.onload = function()
      {
          ctx.drawImage(photo, 0, 0, 160, 120);
          windowURL.revokeObjectURL(picURL); // moved this
      };
    photo.src = picURL;
  }
}

[chukka32]

Thank, updating the version of android seemed to do the trick!