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 name of the file after it was loaded. Can anybody help on that?

// gets all files in dir

function updateData(){   var dirReader = approot.createReader();    var fail =failCB('Error - Directory for parsing failed to open'); // logs fail...   dirReader.readEntries(parseData,fail);  } 

// loading each file

function parseData(entries){   var i;   for (i=0; i<entries.length; i++) {     var reader = new FileReader();     reader.onloadend = createListItem;     reader.readAsText(entries[i]);   } } 

// HERE I WOULD LIKE TO KNOW THE NAME !!!!

function createListItem(evt){     // it gives me all the loaded data. But based on which file it was, I would like to handle it!   console.log(evt.target.result)     // lets say something like this     $('#content').find(   file.name   ).append(evt.target.result);   } } 

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); }