Can't read excel file in SheetJS, react - reactjs

Question

I am very new to react and try to import excel file to browse in react.
I tried to use sheetJS but it didn't work due to below error message.
TypeError: _fs.readFileSync is not a function
import React from 'react';
import XLSX from 'xlsx';
class Readfile extends React.Components {
...
var filename = 'test.xlsx';
var book = XLSX.readFile(filename);
...
Error seems to come from readFile function.
Is there any steps I missed to code? Thanks in advance.

Answer 1

xlsx library has support for both browser & NodeJS. However, some specific functions only work in NodeJS.
readFile functions read files from the file system and you don't have access to the file system in the browser.
In the browser following options are available:
Browser download file (ajax)
Browser drag-and-drop
Browser file upload form element
For example, this file is available on https://example.com/test.xlsx, you can use the following snippet:
var url = "https://example.com/test.xlsx";
/* set up async GET request */
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onload = function(e) {
var data = new Uint8Array(req.response);
var workbook = XLSX.read(data, {type:"array"});
/* DO SOMETHING WITH workbook HERE */
}
req.send();