How to synchronize FileReader onload functions?

Question

I want to read some text files and sort them. I wrote the following function:

function load_files (event)
{
  var file;
  var reader;
  var lines = [];

  for (file of event.target.files)
  {
    reader = new FileReader();
    reader.onload = function (event)
    {
      let l = this.result.split (/\r?\n/); // lines to add
      for (let i = 0; i < l.length; i++)
        lines.push(l[i]);
    };
    reader.readAsText (file);
  }

  // how to wait for all onload functions here?

  replace_log(lines.sort());
}

Before I can sort the lines, I have to wait, that all loading has been finished. How can I wait for the asynchronous calls?

You can create a function that reads the file and returns a promise. — Seblor
– Seblor, Commented Feb 20, 2019 at 13:03
You can run all your promises through Promise.all then read the content of all your files — Seblor
– Seblor, Commented Feb 20, 2019 at 13:05

Karim · Accepted Answer · 2019-02-20 14:57:09Z

3

you can even count the occurrencies of the callback and trigger the sort when you read all files

function load_files (event) {
var file;
var reader;
var lines = [];
let count = 0;
for (file of event.target.files) {
    reader = new FileReader();
    // this event is triggered only in case of success
    reader.onload = function (event) {
      let l = this.result.split (/\r?\n/); // lines to add
      for (let i = 0; i < l.length; i++)
        lines.push(l[i]);
    };
    // this event is triggered both in case of success or failure when the op. is completed
    reader.onloadend = function(event) {
      if(++count === event.target.files.length)
        replace_log(lines.sort());
    }
    reader.readAsText (file);
  }
}

or alternatively you can use Promises

function read_file(file) {
  return new Promise((resolve, reject) => {
    var fr = new FileReader();
    fr.onload = () => {
      resolve(fr.result);
    };
    fr.readAsText(file);
  });
}

function load_files(event) {
  var file;
  var reader;
  var lines = [];
  let count = 0;
  let promises = []; // collect all promises
  for (file of event.target.files) {
    promises.push(read_file(file));
  }

  Promise.all(promises) // wait for the resolutions
    .then(results => {
      for (result of results) {
        let l = result.split(/\r?\n/); // lines to add
        for (let i = 0; i < l.length; i++)
          lines.push(l[i]);
      }
      replace_log(lines.sort());
    })
}

edited Feb 20, 2019 at 14:57

answered Feb 20, 2019 at 13:13

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

3 Comments

ceving Over a year ago

Looks pretty ugly.

Karim Over a year ago

i've added an alternative with promises :D

ceving Over a year ago

This looks buggy. result is a member of the event but not the file reader.

ceving · Accepted Answer · 2019-02-25 14:40:14Z

0

Thanks to Karim and his suggestion to use promises, I got it.

function load_files (event)
{
  Promise.all(
    (function* () {
      for (let file of event.target.files) {
        yield new Promise(resolve => {
          let reader = new FileReader();
          reader.onload = (event) => resolve(event.target.result);
          reader.readAsText(file);
        })}})())
    .then(texts => {
      let lines = [].concat.apply([], texts.map(text => text.split (/\r?\n/)));
      replace_log (lines.sort());
    });
}

answered Feb 25, 2019 at 14:40

ceving

24.2k15 gold badges120 silver badges201 bronze badges

Collectives™ on Stack Overflow

How to synchronize FileReader onload functions?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related