Trouble using FileReader with Promise and Async Await

Question

My page has a button to upload a csv and execute a Promise, but (1) my async-await function is firing right when the page loads instead of waiting until my promise fires and (2) when I do upload a file, nothing seems to be getting to my async-await and (3) when I console.log my resolve and reject action, both reader.onload and reader.onerror are executing!

I've tried everything I can think of and read through all related posts.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style> body {font-family: Arial, Helvetica, sans-serif;}</style>
</head>

<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

<script>
document.getElementById('txtFileUpload').addEventListener('change', upload, false);

//work through this, then post a question to StackExchange
//https://stackoverflow.com/questions/51026420/filereader-readastext-async-issues

function upload(evt) {
  return new Promise(function(resolve, reject) {
    file = evt.target.files[0];
    reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function() {
      resolve(event)
    }; //reader.onload = console.log(event);
    reader.onerror = function() {
      reject(error)
    }; //reader.onerror = console.log(event);
  });
}

async function msg(event) {
  try {
    msg = await upload();
    console.log(msg);
  } catch (err) {
    console.log('loading error occurred');
  }
}
msg();
</script>
</body>
</html>

<!--Some data for the .csv file-->
<!--
"film_id","title","description","release_year","rental_rate","length","rating"
"1","ACADEMY DINOSAUR","A Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies","2006","0.99","86","PG"
"299","FACTORY DRAGON","A Action-Packed Saga of a Teacher And a Frisbee who must Escape a Lumberjack in The Sahara Desert","2006","0.99","144","PG-13"
"345","GABLES METROPOLIS","A Fateful Display of a Cat And a Pioneer who must Challenge a Pastry Chef in A Baloon Factory","2006","0.99","161","PG"
"391","HALF OUTFIELD","A Epic Epistle of a Database Administrator And a Crocodile who must Face a Madman in A Jet Boat","2006","2.99","146","PG-13"
-->

FZs · Answer 1 · 2019-09-18T14:58:00.523

2

Your problem is that you haven't taken the event and error as argument, so these will be undefined.

So that code:

reader.onload = function() {
  resolve(event)
}; 
reader.onerror = function() {
  reject(error)
};

Should be:

reader.onload = function(event) {
  resolve(event)
}; 
reader.onerror = function(error) {
  reject(error)
};

Or, even simpler:

reader.onload = resolve
reader.onerror = reject

edited Sep 18 '19 at 14:58

answered Sep 18 '19 at 14:47

FZs

16,581
13
41
50

1

Thanks - I added those arguments. I still have the issue that my async function fires (logging the error message) when the html page loads instead of waiting for a csv upload to complete, and then when I do upload a file, the async function doesn't seem to be doing anything at all. – Johnny Rando Sep 18 '19 at 15:23
1

The simple version is simply beautiful! – MEMark May 24 '20 at 12:09

score 0 · Answer 2 · answered Sep 18 '19 at 14:56

0

Besides what @FZs pointed out, I'm wondering why you call msg(); at the end of your script. If you are hoping to use that to get a message for any upload, that's not going to work that way. It's just going to be waiting for a promise which never got an event value that will never resolve.

Another minor problem is that you have no start <body> tag after your <head> section. Most browsers will probably let you get away with that, but you should fix it anyway.

answered Sep 18 '19 at 14:56

kshetline

12,547
4
37
73

Thanks - fixed the tag. Regarding, msg(), don't I need that to run the msg function, which will then wait for an upload? – Johnny Rando Sep 18 '19 at 15:14
Calling `upload` from from the `change` listener on your input field is all you need to wait for the upload. In fact, only by waiting for that input will your function have any idea which file you're waiting to be uploaded. – kshetline Sep 18 '19 at 15:24
That makes sense. But my problem now is that my async function is not getting the promise returned by upload. – Johnny Rando Sep 18 '19 at 15:29

score 0 · Answer 3 · answered Sep 18 '19 at 16:33

I'm just using Promises wrongly in this example. There's no need for a Promise or Async-Await, because the onload function provides callback functionality. Just want to flag other beginners that my question was fundamentally confused, so this post wont really be helpful to anybody. I would delete the post but apparently that can eventually result in an inability to post.

Trouble using FileReader with Promise and Async Await

3 Answers3