How to read a csv file from input element with vanilla js?

Question

I've been trying to read a csv file provided by the user with html form and then process the data. I wanted to approach this with Fetch. It works great when reading a file located on a server.

const response = await fetch('../csv/datafile.csv');
const data = await response.text();

Problem starts when I want to let the user pick a local file.

<input type="file" name="input_file" id="input_file" accept=".csv">

const formFile = document.querySelector('#input_file');
formFile.addEventListener('change', getData, false);
async function getData() {
 const response = await fetch('formFile.files[0].name');
 const data = await response.text();
}

Of course it doesn't work as it takes correct file name but thinks it's on the server. I have tried it many other ways but got fakepath, object element, CORS and other issues.

I have also tried to approach the problem with FileReader, got the data but faced promiseless async problems and couldn't await for the data to put them outside in a variable.

What's the best approach? Is it possible to solve the problem with vanilla js without uploading the file to the server? I thought this should be super easy, even for an absolute beginner like me but I wasted so much time and thought to ask you for help. Maybe there's something else that I'm doing wrong. Thank you for help.

• Nisala: Did my answer help?
• epascarello: stackoverflow.com/questions/29393064/…
• BartoszPe: Thank you @Nisala . I hoped it's doable with Fetch but this FIleReader is working great as well.

Answer 1

Here's how you'd do this, adapted from this question.

const formFile = document.querySelector('#input_file');
formFile.addEventListener('change', getData, false);
function getData() {
 if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
 console.log('The File APIs are not fully supported in this browser.');
 return;
 }
 if (!formFile.files) {
 console.log("This browser doesn't seem to support the `files` property of file inputs.");
 } else if (!formFile.files[0]) {
 console.log("No file selected.");
 } else {
 let file = formFile.files[0];
 let fr = new FileReader();
 fr.onload = receivedText;
 fr.readAsText(file);
 function receivedText() {
 console.log(fr.result);
 // Do additional processing here
 }
 }
}

<input type="file" name="input_file" id="input_file" accept=".txt">