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://stackguides.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 FZs · Accepted Answer · 2019-09-18T14:47:02

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

Trouble using FileReader with Promise and Async Await

3 Answers