Question

The below handleFiles method is being passed files from both drag and drop and a file input. After it gets the data url for a given file it passes it to the processImage function. This function creates a new image and sets the src and file for that image. I then take different actions based on the width of the incoming image and insert the image into the dom. However, I noticed when dropping in a bunch of images imageWidth will get set to 0. I have confirmed the image.src is correctly set and that dropping the same image in by itself works fine. I also have confirmed that if I remove the width calculations the image does display correctly on the page. When I enter the debugger I can confirm that immediately after imageWidth is set to 0 i.width returns a correct value. At first I thought it might be a threading issue in Chrome, but then when I saw it happen in FireFox as well I became alarmed. I have not been able to pinpoint a certain threshold, but the more load you put on the browser the less likely it is to correctly get the width.

I am seeing the problem in both FireFox 16.0.2 and Chrome 23.0.1271.95.

function handleFiles(files) {

  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    if( !isImage(file) ) { 
      continue;
    }   

    var reader = new FileReader();

    reader.onloadend = function(e) {
      var dataURL = e.target.result;
      processImage(file, dataURL);
    }   

    reader.readAsDataURL(file);
  }
}

function processImage(file, dataURL) {
  var i = new Image();
  i.src  = dataURL;
  i.file = file;

  //console.log(i);
  var maxWidth = 600;
  var imageWidth = i.width;

  ......
}

Answer 1

The width (and height) might be 0 because it’s not loaded yet.

Try adding the load event like so:

function processImage(file, dataURL) {
  var i = new Image();


  i.addEventListener("load", function () {
    var maxWidth = 600;
    var imageWidth = i.width;

    ......

  });

  i.src  = dataURL;
  i.file = file;

}