How to Upload CSV File in React JS

CSV Files are files in plain text form, which makes them straightforward for developers to create. Knowing how to upload CSV files in React JS is very important. Having this knowledge helps you understand how to create tabular forms of objects from CSV files in react file upload.

Knowing how to upload CSV files in React JS is a good way of improving your React file upload feature. Before we learn how to upload a CSV file in React JS, we need to understand some basics.

What is a CSV file?

A CSV file is a comma-isolated file that allows a tabular form of saved data. CSV files are similar to a regular spreadsheet because it has a .csv extension rather than a .xls. Developers can use CSV files with any spreadsheet – like Google Sheets or Microsoft Excel. The basic difference between CSV files and other spreadsheets is that they cannot save columns, formulas, rows, and cells.

Why are CSV files used?

CSV files help organizations send out a large amount of data to a more focused data set. Developers can easily import CSV files into new storage or spreadsheet, no matter their software. Some reasons for the usage of CSV files in React JS file upload include:

  • Many users broadly accept its usage
  • Simple to sort out and alter
  • Software organizations utilize it for their business
  • Leading spreadsheet applications use it

How to upload CSV file in React JS?

Developers can upload files in React JS in different ways. We will use the drag and drop method to upload our CSV File.

1. Know which library to use for your CSV file upload in the upload file React

Developers can use various kinds of libraries to upload CSV files in React JS. In this section, we will use the latest version of React File Drop library 3.0.7 to upload the CSV Files. The code for it is as follows:

npm i react-file-drop

2. Does the browser accept the React upload file feature?

Before you start working on creating an upload feature, you need to ascertain if a browser supports the feature. Developers often make this mistake, and most users will not use the interface because of their browsers. Browsers like Safari, IE Edge, and Chrome support React JS file uploads.

  • File Component Call

You have to add a name for the file drop component and render it to call a file. The code is as follows;

<FileDrop >
    </FileDrop>

After you have done that, add another event in the components with the codes below;

<FileDrop
           onFrameDragEnter={(event) => 
console.log('onFrameDragEvent',event)
}
          onFrameDragLeave={(event) => 
console.log('onFrameDragEvent',event)
}
          onFrameDrop={(event) => 
console.log('onFrameDropEvent', 
event)}
          onDragOver={(event) => 
console.log('onDragOverEvent', event)}
          onDragLeave={(event) => 
console.log('onDragLeaveEvent', event)}
          onDrop={(files, event) => 
console.log('onDropEvent', event)}
        >
        </FileDrop>

By doing this, you have created several events.

  • Knowing how to handle several events

After creating these events, the next thing to add is information about the events. You can do the following;

    • onFrameDragEnter;

This event helps you start dragging files over the frame you are using.

    • onFrameDragLeave;

This event helps you stop dragging files over the frame you are using.

    • onFrameDrop;

This event helps you to drop your files in any location.

    • onDragOver;

This event helps you to stop dragging the file over the spot.

    • onDragLeave;

This event helps you to abscond from the spot.

    • onDrop;

This event helps you to drop your files on the spot.

  • Implementation of the function for the Ondrop tag

Handling the ondrop event is the next thing to do. The following codes will help you call work on the drop event;

<FileDrop 
onFrameDragEnter={(event) => console.log('
onFrameDragEvent',event)} onFrameDragLeave={(event) => console.log('
onFrameDragEvent',event)} onFrameDrop={(event) => console.log('onFrameDropEvent', event)} 
onDragOver={(event) => console.log('onDragOverEvent', event)} 
onDragLeave={(event) => console.log('onDragLeaveEvent', event)} 
onDrop={(files, event) => this.onDropFunction(files) }

After that, implement the function by calling the onDropFunction and passage of files as a framework. So write the following codes to do this;

drag_and_dropFile  ( files) {

           for(var i in files){

                              var file_type=files[i].type

                              var  file_size=files[i].size

                if( file_type === “text/CSV”){

                    console.log(“CSV file”)

                     }

                else{ 

                     console.log(“provide valid file type”)   

}                                              }}

You can now check the type and size of the file with the result of the above code. After that, implement authentications with the following codes;

for (i in files){

var file_size=files[i].size

var file_size_in_unit

if (file_size < 1024) {

        console.log(file_size + " Bytes");

        file_size_in_unit=file_size

                               }

else if (file_size < 1048576) {

         console.log("KB:" + (file_size / 1024).toFixed(3) + " KB");

         file_size_in_unit=(file_size / 1024).toFixed(3) 

                                             }

else if (file_size < 1073741824) {

          console.log("MB:" + (file_size / 1048576).toFixed(2) + " MB");

          file_size_in_unit= (file_size / 1048576).toFixed(2)

        If(file_size_in_unit > 25){

                 console.log("File size is greater than 25MB")

                                              }

                                                   }

                       }

The results of the codes will show the authentication.

  • Import CSV File into react

After you have done the above steps, the next thing is to import the CSV files into the react JS file. So the following codes will suffice for them;

import React, { Component } from 'react' 
import { FileDrop } from 'react-file-drop 
export class AddCSVFile extends Component {
     constructor(props) {
         super(props);
         this.state = { }
     }
    drag_and_dropFile ( files) {
            for (i in files){
                              var file_type=files[i].type
                              var file_size=files[i].size
                if( file_type === “text/CSV”){
                    console.log("CSV file")
                     }
                else{
                       console.log("provide valid file type")
    } }
 }
 render() {
        return (
 <div>
  <FileDrop

After writing these codes, you have successfully uploaded your CSV files into the react JS.

How to upload CSV files into react JS with FileReader?

If you cannot use the react file drop library, file reader is another suitable library to use and the following steps will help you upload your CSV files.

  • Create a form to enable the upload of CSV File;

Write the following codes to create a form;

function App()

{     return (         <div style={{ textAlign: “center” }}>             <h1>REACTJS CSV IMPORT EXAMPLE </h1>             <form>                 <input type={“file”} accept={“.csv”} />                 <button>IMPORT CSV</button>             </form>         </div>     ); }

  • Use FileReader to load the upload the CSV file with the form;

After creating a form, use the following codes to upload the CSV files;

import React, { useState } from "react"; 
function App() {
     const [file, setFile] = useState();
     const fileReader = new FileReader();
     const handleOnChange = (e) => {
         setFile(e.target.files[0]);
     };
     const handleOnSubmit = (e) => {         e.preventDefault();         if (file) {
             fileReader.onload = function (event) {
                 const csvOutput = event.target.result;
             };
             fileReader.readAsText(file);
         }
     };
     return (
         <div style={{ textAlign: "center" }}>
             <h1>REACTJS CSV IMPORT EXAMPLE </h1>
             <form>
                 <input
                     type={"file"}
                     id={"csvFileInput"}
                     accept={".csv"}
                     onChange={handleOnChange}
                 />
                 <button
                     onClick={(e) => {
                         handleOnSubmit(e);
                     }}
                 >
                     IMPORT CSV
                 </button>
             </form>
         </div>
     );
 }

The code results will show the uploaded CSV files in your React js.

Are you tired of not getting the right results when uploading your CSV file and you want to get started with a fresh challenge? You can visit Filestack to kick start your CSV file upload in react JS.

Read More →

Ready to get started?

Create an account now!