How to upload file in React Application

This will explain you how we can manage to upload specific extension/type file in React.

1. Install below npm to upload file in react

npm install react-file-reader --save

2. Create Home component where you will have upload button and callback function to upload CSV file.

3. Import required packages as below

import React, { Component } from 'react';
import ReactFileReader from 'react-file-reader';

4. In Render, add below code to create upload component.
Here we are calling handleUploadedFiles function to fetch uploaded file data
fileTypes is used to speficy/validate uploaded file extension

render(){ 
 return(
 <div>
 <div className="row">Header</div> 
 <div className="row">
 <div className="col-md-12">
 <h4>Upload File</h4>
 <div className="m-b-10">Accepted File format: csv</div>
 </div>
 <div className="col-md-12">
 <p>
 <ReactFileReader handleUploadedFiles={this.handleUploadedFiles} fileTypes={'.csv'}>
 <button className='btn btn-primary btn-file'>Upload</button>
 </ReactFileReader>
 </p>
 </div>
 </div>
 </div>
 );
 }

5. Write below Callback function to read csv file, considering csv file having id, name, age and address columns.

/**
* Function to upload file
*/
handleUploadedFiles = files => {
var reader = new FileReader();
reader.onload = (e) => {
//Split csv file data by new line so that we can skip first row which is header
let jsonData = reader.result.split('\n');
let data = [];
jsonData.forEach((element, index) => {
if(index) {
//Split csv file data by comma so that we will have column data
const elementRaw = element.split(',');
console.log(element, index);
if(element) {
let param = {
'id' : elementRaw[0],
'name' : elementRaw[1],
'age' : elementRaw[2],
'address' : elementRaw[3]
}
data.push(param);
}
}
});
}
console.log("TCL: Dashboard -> reader.readyState", reader.readyState)
reader.readAsText(files[0]);
}

6. Find below full code of component

import React, { Component } from 'react';
import ReactFileReader from 'react-file-reader';

class Home extends Component{
    constructor(props) {
        super(props);      
        this.handleUploadedFiles = this.handleUploadedFiles.bind(this);
    }

    /** 
     * Function to upload file
    */
    handleUploadedFiles = files => {
        var reader = new FileReader();
        reader.onload = (e) => {
            //Split csv file data by new line so that we can skip first row which is header
            let jsonData = reader.result.split('\n');    
            let data = [];
            jsonData.forEach((element, index) => {
                if(index) {
                     //Split csv file data by comma so that we will have column data
                    const elementRaw = element.split(',');
                    console.log(element, index);
                    if(element) {
                        let param = {
                            'id' : elementRaw[0],
                            'name' : elementRaw[1],
                            'age' : elementRaw[2],
                            'address' : elementRaw[3]
                        }
                        data.push(param);
                    }
                }
            });
        }
        console.log("TCL: Dashboard -> reader.readyState", reader.readyState)          
        reader.readAsText(files[0]);
    }
    
    render(){       
      return(
          <div>
            <div className="row">Header</div>            
            <div className="row">
                <div className="col-md-12">
                    <h4>Upload File</h4>
                    <div className="m-b-10">Accepted File format: csv</div>
                </div>
                <div className="col-md-12">
                    <p>
                        <ReactFileReader handleUploadedFiles={this.handleUploadedFiles} fileTypes={'.csv'}>
                            <button className='btn btn-primary btn-file'>Upload</button>
                        </ReactFileReader>
                    </p>
                </div>
            </div>
          </div>
      );
   }
}
export default Home;