Get filename after filereader asynchronously loaded a file

Question

I am loading several files in a directory in order to parse some data from them. This works great so far, but I would like to know which file I am looking at. So I need the

Answer 1

Create a closure around the File to capture the current file. Then you can get the filename.

An example: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

Closure to capture the file information.

function parseData(entries){
  for (var i=0; i<entries.length; i++) {
    reader.onloadend = (function(file) {
      return function(evt) {
        createListItem(evt, file)
      };
    })(entries[i]);
    reader.readAsText(entries[i]);
  }
}

And the called function gets an additional argument

function createListItem(evt, file) {
  console.log(evt.target.result)
  console.log(file.name);
}

Answer 2

The following source code add an attribute to the file reader

    for(i=0; i < files.length; i++)
    {
        var fileReader = new FileReader();
        fileReader.onload = function(file)
        {
              // DO what you need here
              // file name = file.target.fileName
        } // end of reader load
        fileReader.fileName = files[i].name;
        fileReader.readAsBinaryString(files[i]);
    }