Sequentially loading files in javascript

Question

I know there are other answers that are similar to this question, but I'm in a slightly different situation. Consider this block of code:

fileSelected = (e) => {
   const files = e.target.files;
   _.map(files, file => {
      reader.readAsDataURL(file);
      reader.onprogress = () => {...}
      reader.onerror = () => {...}
      reader.onload = () => {
         const resp = await uploadAttachment(file);
         // do something
      }
   }
}

This is iterating asynchronously when I want it sequentially. I want every new instance of FileReader to finish before moving on to the next file... I know it's not ideal, but I'm maxing out 10 files at a time.

I created a separate function to return a new Promise and used fileSelected function to loop through like so:

readFile = (file) => {
   return new Promise(() => {
      reader.readAsDataURL(file);
      reader.onprogress...
      reader.onerror...
      reader.onload...
      ...
   }
}

fileSelected = async (e) => {
   for (const file of files) {
      await readFile(file);
   }
}

But it goes through the first file fine, but it doesn't move on to the next file. What could be the issue here? Why is it returning early?

Please show the whole and exact code of your readFile function. It's obviously broken. Probably in the ... parts. — Bergi
– Bergi, Commented Sep 9, 2019 at 22:20
"Why is it returning early?" - does it? From your description ("doesn't move on"), it sounds more like it's never resolving the promise. — Bergi
– Bergi, Commented Sep 9, 2019 at 22:21

Kousika Ganesan · Accepted Answer · 2019-09-09 22:22:55Z

1

Use async keyword inorder to use await(If you are not using ES2019)

fileSelected = async (e) => {
   for (const file of files) {
      await readFile(file);
   }
}

answered Sep 9, 2019 at 22:22

Kousika Ganesan

6091 gold badge8 silver badges23 bronze badges

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

1 Comment

inertia Over a year ago

Sorry, I actually do have async there. Edited.

Collectives™ on Stack Overflow

Sequentially loading files in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related