Sidrich2009 Sidrich2009 - 4 months ago 35
Javascript Question

Get filename after filereader asynchronously loaded a file

i am loading several files in a directory to parse some data from them. This works great so far, but i would like to know wich 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 wich 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);
}
}


cheers for any suggestions ;)

Answer

Create a closure around the File to capture the current file. From that you can get the filename. I have an example here: 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);
}