image,onload event not working in chrome

Question

I'm using html5 to create drag and drop image upload functionality. This works great for me in firefox but in chrome the image onload event only fires the first time. If I drag multiple images in only the first works and if I drag a second in it fails. I believe the problem is with the image onload.

here is the way my code works I have removed the irrelevant sections:

            var img = document.createElement("img");
            var reader = new FileReader();
            var canvas = document.createElement("canvas");
            var canvasData;
            var ctx = canvas.getContext("2d");
            var myFiles;
            var i = 0; 


                 reader.onload = (function (aImg)
                    { 
                        return function (e)
                        {
                            aImg.src = e.target.result;
                        };
                    })(img);

        img.onload = function (){

        //resizes image 
        //draws it to the canvas
        //posts to server

        i++;
        if(i < myFiles.length){
        processNext(i);
                            }
        }



    function processNext(filei) {

         var file = myFiles[filei];

            img.file = file;

            reader.readAsDataURL(file);


        }

i = 0;
myFiles = files;
processNext(0);

Does anyone know why this works in firefox but not chrome?

Answer 1

Explanation from chromium tracker:

This is not a bug. WebKit is just more strict. You must instantiate a new Image() object before the replacement, like this:

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

source: http://code.google.com/p/chromium/issues/detail?id=7731#c12

Answer 2

This is strange, none of the above worked for me. I was defining the image variable as local and change it to global and it started working. Does this make sense? Can somebody explain it?

This didnt worked for me:

function loadImage() {  
  var ImageToLoad = new Image();
  imageToLoad.onload = function() {
      console.log("finish loading");
  };        
  imageToLoad.src = "myimage.png";
}

This did work:

  var ImageToLoad = new Image();
  function loadImage() {
  imageToLoad.onload = function() {
      console.log("finish loading");
  };        
  imageToLoad.src = "myimage.png";
}