Site icon Filestack Blog

How to Upload CSV File in React JS

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 file 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 file 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:

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 determine 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.

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.

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

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.

After you have done the above steps, the next thing is to import the CSV files into the react JS file.

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.

Use 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>     ); }

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 want to get started with a fresh challenge? You can visit Filestack for more on how to upload CSV file in react JS.

Exit mobile version