How to upload and read .csv, .xls and .xlsx in React

Question

I'm trying to upload a file with the format of .csv/.xls/.xlsx and then read the file contents.

For example the following file

would output:

name,age,key  
Mark,25,1  
Jones,30,2

This is what I've implemented so far using react-file-reader and base-62 but it only works for the .csv files:

  onFileUpload(file) {
    var decodedData = base64.decode(file.base64);
  }

  <ReactFileReader fileTypes={[".csv",".xls", ".xlsx"]} base64={true} multipleFiles={false} handleFiles={this.onFileUpload}>
    <button className='btn'>Upload</button>
  </ReactFileReader>

Is there any way I can get the content of .xls and .xlsx files using the same way as I did for .csv files? Or maybe another module that does this...

I'm pretty sure that .xls and .xlsx files are in binary and that you won't be able easily to parse and render them. IMO, best way to do so is to involve some backend, there are plenty of libs that do so and that could return you a proper json to interpret frontend side. — guillaumepotier, May 16 '18 at 08:18
Though, see https://stackoverflow.com/questions/8238407/how-to-parse-excel-file-in-javascript-html5 or https://stackoverflow.com/questions/6382572/how-to-read-an-excel-file-contents-on-client-side — guillaumepotier, May 16 '18 at 08:18

score 0 · Answer 1 · answered Oct 17 '20 at 19:17

I added the code as bellow,

Select Excel File

                        <ReactFileReader handleFiles={this.handleFiles} fileTypes={[".xls", ".xlsx", ".csv"]} base64={true}>
                            <button className='btn btn-warning btn-sm'>Select File</button>
                            { this.state.isFileLoaded ? <label>File Loaded</label> 
                            : <label>File Not Selected</label>  }
                        </ReactFileReader>

                        <span id="errprojectLogoUrl" className="text text-danger"></span>

then I wrote the handleFiles as following and it was successful for me,

handleFiles = files => { this.showLoading();

    const currentMsgModal = {
        ...this.state.messageModal
    };

    currentMsgModal["isModalHidden"] = true;

    let jsonBase64 = files.base64;
    let index = jsonBase64.indexOf(',');
    let encodedString = jsonBase64.substr(index + 1);
            
    let fileName = files.fileList[0].name;
    let formatString = /[^.]*$/.exec(fileName)[0];

    let isCSVFile = formatString.includes('csv');
    let isXLSFile = formatString.includes('xls');
    let isXLSXFile = formatString.includes('xlsx');
    

    if (isCSVFile || isXLSFile || isXLSXFile)
    {
        this.setState({
            inputFileBaseString: encodedString,
            isFileLoaded: true,
            messageModal: currentMsgModal
        });
    }
    else
    {
        currentMsgModal["messageType"] = "Error"
        currentMsgModal["messageDescription"] = "File Type Not Supported"
        currentMsgModal["isModalHidden"] = false;
        
        this.setState({
            messageModal: currentMsgModal
        });
    }
    this.hideLoading();
  }

ReactFileReader is not working as expect and I have done this in backend as it was difficult to do this in frontend side. If anyone found a way to do this in frontend side please leave me a comment — Uthpalavi Dias, Apr 12 '22 at 11:06

How to upload and read .csv, .xls and .xlsx in React

1 Answers1