Cargar y leer archivos CSV en React

1. Use el FileReader para leer archivos CSV en React
2. Use la biblioteca papaparse para leer archivos CSV en React

En este artículo, aprenderemos a leer archivos CSV en React.js. En muchos escenarios, mientras desarrollan aplicaciones React, los desarrolladores necesitan leer datos del archivo CSV y mostrarlos en la pantalla del usuario.

Aquí, aprenderemos dos métodos diferentes para leer archivos CSV en React.

Use el FileReader para leer archivos CSV en React

Podemos usar el FileReader() de Vanilla JavaScript en React.js para leer el archivo CSV.

En el siguiente ejemplo, hemos utilizado la biblioteca react-file-reader para crear el botón de carga de archivos. Los usuarios deben ejecutar el siguiente comando en el directorio del proyecto para instalar la biblioteca react-file-reader.

npm i react-file-reader

Los usuarios pueden seguir la siguiente sintaxis para crear el botón de carga de archivos para leer el archivo CSV.

<ReactFileReader handleFiles={uploadFile} fileTypes={".csv"}>
    <button className="btn">Upload</button>
</ReactFileReader>

Para leer el archivo subido, podemos crear el objeto de la clase FileReader() e invocar el método readAsText() tomando el objeto como referencia y pasando el archivo como parámetro.

Código de ejemplo:

//  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;

Producción:

En el resultado anterior, los usuarios pueden ver el cuadro de alerta que contiene los datos separados por comas del archivo CSV cuando cargan un archivo CSV.

Use la biblioteca papaparse para leer archivos CSV en React

El papaparse es una biblioteca de terceros que el usuario puede usar para leer archivos CSV en React.

Para instalar la biblioteca papaparse, vaya al directorio del proyecto a través de la terminal y ejecute el siguiente comando.

npm i papaparse

En el siguiente ejemplo, usamos la biblioteca externa react-file-reader para crear un botón de carga de archivos. Cuando un usuario carga un archivo, llamará a la función uploadFile().

En la función uploadFile(), invocamos el método parse() de la biblioteca papaparse pasando el archivo como primer parámetro y la función de devolución de llamada como segundo parámetro, que se invocará cuando se complete la lectura del archivo. .

Código de ejemplo:

//  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;

Producción:

Si los usuarios no quieren usar ninguna biblioteca externa para leer el archivo CSV, pueden usar la clase FileReader de Vanilla JavaScript en React.js. Además, hemos utilizado la biblioteca React externa papaparse en este artículo para leer archivos CSV.

En Internet, hay muchas otras bibliotecas de terceros disponibles, como papaparse, que los usuarios pueden usar según los requisitos.