title: HTML5 File API: get File object within FileReader callback
body: <p>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:</p>
  
  <pre>
  var div = document.createElement('div');
  div.ondrop = function(e) {
    e.preventDefault();
    e.stopPropagation();
    var files = e.dataTransfer.files;
    for ( var i=0; i&lt;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;
  }
  </pre>
  
  <p>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:</p>
  
  <pre>
    for ( var i=0; i&lt;files.length; i++ ) {
      var _file = files[i]; // this is the file I want!!
      (function(file) {
        // do FileReader stuff here
      })(_file);
    }
  </pre>
  
  <p>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 <code>this</code> and <code>e.target</code> are the FileReader object and not the File. Is there something in <code>this</code> or <code>e</code> that is the File?? I can't find it :(</p>
  
  <p>Thanks a bunch.</p>
  
  <p>PS. A fiddle: <a href="http://jsfiddle.net/rudiedirkx/ZWMRd/1/" rel="noreferrer">http://jsfiddle.net/rudiedirkx/ZWMRd/1/</a></p>