How to Upload and Read CSV File in React

To read a CSV file selected in a React app, use a file input and read its File object in an onChange handler. The browser’s FileReader API reads the file as text; it does not turn CSV text into rows and columns. Use papaparse when you want a parser to handle CSV structure and return row data.

Use the FileReader to Read CSV Files in React

Add a native file input that accepts .csv files, then pass the selected file to FileReader.readAsText(). Reading is asynchronous, so handle the result in onload. The following browser-page source illustration is unexecuted; it displays the file text. In a React component, put the same input in JSX and update component state from the onload handler instead of setting textContent directly.

This Node.js example shows how simple CSV text can become row objects. It assumes fields are unquoted and each row uses the same columns; use a CSV parser for files with general CSV syntax.

const csv = "name,score\nAva,18\nNoah,21";
const [headerLine, ...dataLines] = csv.trim().split(/\r?\n/);
const headers = headerLine.split(",");
const rows = dataLines.map((line) => {
  const values = line.split(",");
  return Object.fromEntries(headers.map((header, index) => [header, values[index]]));
});

console.log(JSON.stringify(rows, null, 2));

[
  {
    "name": "Ava",
    "score": "18"
  },
  {
    "name": "Noah",
    "score": "21"
  }
]

<label for="csv-file">Choose a CSV file</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<pre id="csv-text"></pre>
<script>
  const input = document.querySelector("#csv-file");
  const output = document.querySelector("#csv-text");

  input.addEventListener("change", (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = () => {
      output.textContent = String(reader.result);
    };
    reader.onerror = () => {
      output.textContent = "The file could not be read.";
    };
    reader.readAsText(file);
  });
</script>

In React, the equivalent input handler can call setCsvText(String(reader.result)) inside reader.onload, then render that state in a <pre>. The example reads the selected file as text only. To interpret rows, headers, quoted values, or delimiters as CSV data, pass the file text to a CSV parser or use a parsing library directly.

Use the papaparse Library to Read CSV Files in React

Install Papa Parse in the React project’s directory with npm install papaparse, then import it with import Papa from "papaparse". Use a native file input and pass its selected File to Papa.parse. The complete callback receives a result whose data property contains parsed rows; use component state to render those rows. Check errors to show parse feedback. This unexecuted browser-page source illustration assumes Papa Parse is available as the global Papa; in a React component, use the module import above and put the callback logic in onChange. It illustrates DOM output, not a React render.

<label for="csv-file">Choose a CSV file</label>
<input id="csv-file" type="file" accept=".csv,text/csv">
<pre id="csv-rows"></pre>
<script>
  const input = document.querySelector("#csv-file");
  const output = document.querySelector("#csv-rows");

  input.addEventListener("change", (event) => {
    const file = event.target.files[0];
    if (!file) return;

    Papa.parse(file, {
      header: true,
      complete: (results) => {
        output.textContent = JSON.stringify(results.data, null, 2);
        if (results.errors.length > 0) {
          console.warn("CSV parsing reported issues:", results.errors);
        }
      },
      error: (error) => {
        output.textContent = `The file could not be parsed: ${error.message}`;
      }
    });
  });
</script>

With header: true, Papa Parse uses the first row as object keys, so each item in results.data represents a data row keyed by its column names. In a React component, use setRows(results.data) in complete and render the rows from state; display results.errors in the interface when users need to see parsing warnings. FileReader is useful when you need the raw text and will handle its format yourself. Papa Parse is a direct option when the task is to convert CSV content into structured rows.