With the new File API in Javascript you can read files in Javascript to create dataURLs to show clientside pictures clientside. I'm wondering if you can reach the File object within the FileReader's onload callback.
I will illustrate this with an example:

var div = document.createElement('div');

div.ondrop = function(e) {

  e.preventDefault();

  e.stopPropagation();

  var files = e.dataTransfer.files;

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

    var file = files[i]; // this is the file I want!!

    var filereader = new FileReader();

    filereader.onload = function(e) {

      this; // the FileReader object

      e.target; // the same FileReader object

      this.result; // the dataURL, something like data:image/jpeg;base64,.....

      var img = document.createElement('img');

      img.src = this.result;

      img.title = file.fileName; // This won't be working

      document.appendChild(img);

    }

  }

  return false;

}

What I could do - what I do right now - is wrap the contents of the for loop in a function and execute it to create a new scope and keep a file in that scope like so:

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

    var _file = files[i]; // this is the file I want!!

    (function(file) {

      // do FileReader stuff here

    })(_file);

  }

I was just wondering... Maybe I'm missing something. Is there a way to get the File object from within the onload function of the FileReader? Both this and e.target are the FileReader object and not the File. Is there something in this or e that is the File?? I can't find it :(

Thanks a bunch.

PS. A fiddle: http://jsfiddle.net/rudiedirkx/ZWMRd/1/