react convert excel to json

1import React, { useState } from "react";
2import "./App.css";
3import * as XLSX from "xlsx";
4
5class ExcelToJson extends React.Component {
6  constructor(props) {
7    super(props);
8    this.handleClick = this.handleClick.bind(this);
9    this.state = {
10      file: "",
11    };
12  }
13
14  handleClick(e) {
15    this.refs.fileUploader.click();
16  }
17
18  filePathset(e) {
19    e.stopPropagation();
20    e.preventDefault();
21    var file = e.target.files[0];
22    console.log(file);
23    this.setState({ file });
24
25    console.log(this.state.file);
26  }
27
28  readFile() {
29    var f = this.state.file;
30    var name = f.name;
31    const reader = new FileReader();
32    reader.onload = (evt) => {
33      // evt = on_file_select event
34      /* Parse data */
35      const bstr = evt.target.result;
36      const wb = XLSX.read(bstr, { type: "binary" });
37      /* Get first worksheet */
38      const wsname = wb.SheetNames[0];
39      const ws = wb.Sheets[wsname];
40      /* Convert array of arrays */
41      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
42      /* Update state */
43      console.log("Data>>>" + data);// shows that excel data is read
44      console.log(this.convertToJson(data)); // shows data in json format
45    };
46    reader.readAsBinaryString(f);
47  }
48
49  convertToJson(csv) {
50    var lines = csv.split("\n");
51
52    var result = [];
53
54    var headers = lines[0].split(",");
55
56    for (var i = 1; i < lines.length; i++) {
57      var obj = {};
58      var currentline = lines[i].split(",");
59
60      for (var j = 0; j < headers.length; j++) {
61        obj[headers[j]] = currentline[j];
62      }
63
64      result.push(obj);
65    }
66
67    //return result; //JavaScript object
68    return JSON.stringify(result); //JSON
69  }
70
71  render() {
72    return (
73      <div>
74        <input
75          type="file"
76          id="file"
77          ref="fileUploader"
78          onChange={this.filePathset.bind(this)}
79        />
80        <button
81          onClick={() => {
82            this.readFile();
83          }}
84        >
85          Read File
86        </button>
87      </div>
88    );
89  }
90}
91
92export default ExcelToJson;
93