CODEWITHSUNDEEP
javascriptcsv
BartoszPe
BartoszPe

Reputation: 51

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

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.

Upvotes: 3

Views: 5339

Answers (1)

Nisala
Nisala

Reputation: 1338

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">

Upvotes: 3

Related Questions