Read CSV File using Javascript from a Local Folder

Question

I am trying to learn how to put in a html page a local .csv file using javascript. I am using the Electron framework, and I aim to handle everything locally. What I need to do is:

Read the CSV file.
Be able to change the datas (delete rows for exemple)
Use innerHTML to insert the csv data into a div. My problem is in reading the CSV file. All of the examples I have found I think will only work if there is a web server running, which I prefer to avoid.

I think you need to load the file into memory first, alter it and then provide the base64 encoded content in a link. Here's an article how to read the data html5rocks.com/en/tutorials/file/dndfiles and here's how to create a downloadable file - stackoverflow.com/questions/3665115/… — Frank
– Frank, Commented Jan 22, 2020 at 14:34

phuwin · Accepted Answer · 2020-01-22 14:45:34Z

1

You can try this papapase.com. Below is a simple example:

const data = [];
const fileInput = document.querySelector('.fileInput');
fileInput.addEventListener('change', () => {
  Papa.parse(fileInput.files[0], {
    download: true,
    header: true,
    keepEmptyRows: false,
    skipEmptyLines: true,
    step: function(row) {
      data.push(row.data);
    },
    complete: function(results) {
      document.querySelector("code").innerHTML = JSON.stringify(data);
      console.log(data);
    }
  });
});

<script src="https://www.papaparse.com/resources/js/papaparse.js"></script>
<input type="file" class="fileInput" />
<br>
<code>

</code>

answered Jan 22, 2020 at 14:45

phuwin

3,2905 gold badges28 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

Read CSV File using Javascript from a Local Folder

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related