How to Upload and Read CSV File in React
In this article, we will learn to read CSV files in React.js. In many scenarios, while developing React applications, developers need to read data from the CSV file and show it on the user’s screen.
Here, we will learn two different methods to read CSV files in React.
Use the FileReader to Read CSV Files in React
We can use the FileReader() of the Vanilla JavaScript in React.js to read the CSV file.
In the example below, we have used the react-file-reader library to create the upload file button. Users need to run the below command in the project directory to install the react-file-reader library.
npm i react-file-reader
Users can follow the syntax below to create the file upload button to read the CSV file.
<ReactFileReader handleFiles={uploadFile} fileTypes={".csv"}>
<button className="btn">Upload</button>
</ReactFileReader>
To read the uploaded file, we can create the object of the FileReader() class and invoke the readAsText() method by taking the object as a reference and passing the file as a parameter.
Example Code:
// import required libraries
import React from "react";
import ReactFileReader from "react-file-reader";
function App() {
const uploadFile = (files) => {
// Creating the object of FileReader Class
var read = new FileReader();
// when readAsText will invoke, onload() method on the read object will execute.
read.onload = function (e) {
// perform some operations with read data
alert(read.result);
};
// Invoking the readAsText() method by passing the uploaded file as a parameter
read.readAsText(files[0]);
};
return (
<>
<h3> Upload a CSV file to read</h3>
{/* creating the file upload button to upload CSV file */}
<ReactFileReader handleFiles = {uploadFile} fileTypes={".csv"}>
<button className="btn"> Upload </button>
</ReactFileReader>
</>
);
}
export default App;
Output:
In the above output, users can see the alert box containing the comma-separated data of the CSV file when they upload a CSV file.
Use the papaparse Library to Read CSV Files in React
The papaparse is a third-party library that user can use to read CSV files in React.
To install the papaparse library, move to the project directory via the terminal and execute the below command.
npm i papaparse
In the example below, we used the react-file-reader external library to create a file upload button. When a user uploads a file, it will call a uploadFile() function.
In the uploadFile() function, we invoked the parse() method of the papaparse library by passing the file as a first parameter and the callback function as a second parameter, which will invoke when the file read is completed.
Example Code:
// import required libraries
import React from "react";
import ReactFileReader from "react-file-reader";
import Papa from 'papaparse';
function App() {
const uploadFile = (files) => {
// Using papaparse to parse the CSV file
Papa.parse(files[0], {
complete: function(results) {
// results contain data; users can use the data for some operations.
console.log("Finished:", results.data);
}
});
};
return (
<>
<h3> Upload a CSV file to read using Papaparse</h3>
{/* creating the file upload button to upload CSV file */}
<ReactFileReader handleFiles={uploadFile} fileTypes={".csv"}>
<button className="btn">Upload</button>
</ReactFileReader>
</>
);
}
export default App;
Output:
If users don’t want to use any external library to read the CSV file, users can use the FileReader class of the Vanilla JavaScript in React.js. Furthermore, we have used the papaparse external React library in this article to read CSV files.
On the internet, there are lots of other third-party libraries available, like papaparse, which users can use according to requirements.
