Read multiple Excel files with React SheetJs

Question

I have an issue reading multiple excel files even when i put the "multiple" HTML tag.

This is the handleFile function :

handleFile(file /*:File*/) {
/* Boilerplate to set up FileReader */
const reader = new FileReader()
const rABS = !!reader.readAsBinaryString
reader.onload = e => {
  /* Parse data */
  const bstr = e.target.result
  const wb = XLSX.read(bstr, { type: rABS ? "binary" : "array" })
  /* Get first worksheet */
  const wsname = wb.SheetNames[0]
  const ws = wb.Sheets[wsname]
  /* Convert array of arrays */
  const data = XLSX.utils.sheet_to_json(ws, { header: 1 })
  /* Update state */
  this.setState({
    data: data,
    cols: make_cols(ws["!ref"]),
    // jsonDATA: this.convertToJSON(data),
  })
}
if (rABS) reader.readAsBinaryString(file)
else reader.readAsArrayBuffer(file)}

This is the DragDropFile component :

export default class DragDropFile extends Component {
  constructor(props) {
    super(props)
    this.onDrop = this.onDrop.bind(this)
  }
  suppress(evt) {
    evt.stopPropagation()
    evt.preventDefault()
  }
  onDrop(evt) {
    evt.stopPropagation()
    evt.preventDefault()
    const files = evt.dataTransfer.files
    if (files && files[0]) this.props.handleFile(files[0])
  }
  render() {
    return (
      <div
        onDrop={this.onDrop}
        onDragEnter={this.suppress}
        onDragOver={this.suppress}
      >
        {this.props.children}
      </div>
    )
  }
}

This is the JSX code :

<DragDropFile handleFile={this.handleFile}>
    <div className="row">
      <div className="col-xs-12">
        <form className="form-inline">
          <div className="form-group">
            <label htmlFor="file">Spreadsheet</label>
            <input
              type="file"
              className="form-control"
              id="file"
              accept={SheetJSFT}
              onChange={this.handleChange}
            />
          </div>
        </form>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-12">
        <button
          disabled={!this.state.data.length}
          className="btn btn-success"
          onClick={this.exportFile}
        >
          Export
        </button>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-12">
        {/* <OutTable data={this.state.data} cols={this.state.cols} /> */}
      </div>
    </div>
    <SingleFile fileData={this.state} />
  </DragDropFile>

I don't know if i should change the the DragDrop component or the handleFile function inside the App component

I would really appreciate it you could help with that. Thank you!

Read multiple Excel files with React SheetJs

0 Answers0