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?

Solution 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

Solution 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";
}

Comments

[Harut]

Hm.. But if my english doesn't betray me, the chrome behavior is not correct and load event must be fired each time src is changed download is finished succesfully. w3.org/TR/html5/embedded-content-1.html#the-img-element

[Early73]

@Harut Thanks for the response. I tried what you suggested I added var img = new Image(); in my processNext function before I change the source but I get the same results as before. you mentioned that the load event must be fired each time the src is changed I don't understand are you saying I need to do this manually?

[Harut]

I just said that FF behaviour seems to be right. And universal way should be to destroy old image element and create new one instead of it.

[Early73]

@Harut Thanks I got it working you were right I had to create a new image every time. I like firefox's way much better : )

[Early73]

sorry it's my first post on stackoverflow. I believe I have accepted it now.

[Mike McKay]

Note your variable name has a different case here

[OG Sean]

Capital I of ImageToLoad should have been lowercase