Javascript File Reader

Question

I may just not be understanding the file reader api, but

When I try to run:

for (var i = 0, f1, f2; f1 = files[sorted_index[i]], f2 = files[sorted_index[i+1]]; i=i+2) {
    var file_one;
    var file_two;

    if(f1.size < f2.size){
        file_one = f1;
        file_two = f2;
    } else {
        file_one = f2;
        file_two = f1;
    }

    var file_one_contents;
    var file_two_contents;


  var reader = new FileReader();
  reader.readAsText(file_one);
  reader.onload = readSuccess;

  function readSuccess(evt){
    file_one_contents = evt.target.result;
  }
  var reader = new FileReader();
    reader.readAsText(file_two);
    reader.onload = readSuccess2;

  function readSuccess2(evt2){
    file_two_contents = evt2.target.result;
  }

    console.log(file_one_contents);
    console.log(file_two_contents);

The console log only contains undefined in it. The goal of the script it two read in two CSVs and take the data from the pair of files and do some computations.

Thanks!

Pointy · Accepted Answer · 2012-07-30 16:34:34Z

5

The API is asynchronous. The "success" functions are called when the operation completes, and that won't be immediate.

Move your console.log() calls to inside the handler functions.

edit — If you need to wait to start doing stuff until both files are ready, you can do something like this:

  var countdown = 2;

  var reader = new FileReader();
  reader.readAsText(file_one);
  reader.onload = readSuccess;

  function readSuccess(evt){
    file_one_contents = evt.target.result;
    countdown--;
    if (countdown === 0) go();
  }
  var reader = new FileReader();
    reader.readAsText(file_two);
    reader.onload = readSuccess2;

  function readSuccess2(evt2){
    file_two_contents = evt2.target.result;
    countdown--;
    if (countdown === 0) go();
  }

There are more sophisticated ways to do it, of course, but that simple trick just waits until the counter is zero before calling "go()", which represents the function that'd work on processing the files.

edited Jul 30, 2012 at 16:34

answered Jul 30, 2012 at 16:08

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Steven Stangle Over a year ago

so how do I make it wait for the file to be uploaded before I start manipulating it?

Steven Stangle Over a year ago

Right, so is there no way to pass the information out of the handler functions to be used later?

PointedEars Over a year ago

@StevenStangle With your current approach you need an Array of FileReaders.

Pointy Over a year ago

@StevenStangle no, there isn't. Just call the functions that process the files from within those callbacks.

Steven Stangle Over a year ago

@Pointy but the files are linked together, you need both together to do the processing. So is it never possible to use both at once?

|

Lars GJ · Accepted Answer · 2013-01-23 16:25:56Z

3

I had a similar problem which solved the file read waiting by using ".onloadend" instead of "onload". In the code below x is bound to a "div" element

reader.onloadend = function (evt) {
    x.innerHTML = evt.target.result;
}

With "onload" it was all undefined.

answered Jan 23, 2013 at 16:25

Lars GJ

3562 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript File Reader

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related