title: React / Ant Design - unable to Upload XLSX
body: <p>I'm learning React and currently using ant design for my upload button but somehow it won't work ( it works normally without the design.</p>
  
  <p>My original code(working version):</p>
  
  <pre><code>export default ({ addItem }) =&gt; {
    return (
      &lt;label className="btn"&gt;
        &lt;input
          type="file"
          onChange={e =&gt; {
            var reader = new FileReader();
  
            reader.onload = event =&gt; {
              var data = event.target.result;
              var workbook = XLSX.read(data, {
                type: "binary",
              });
              workbook.SheetNames.forEach(sheetName =&gt; {
                var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
                XL_row_object.forEach(x =&gt; {
                  addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
                });
              });
            };
            if (e.target.files[0]) {
              reader.readAsBinaryString(e.target.files[0]);
            }
          }}
        /&gt;
      &lt;/label&gt;
    );
  };
  </code></pre>
  
  <p>the mistakes I made:</p>
  
  <p>(in additional, my upload component only takes 4 columns/values: sku, description, quantity and unit_price)</p>
  
  <pre><code>import React, { Component } from "react";
  import * as XLSX from "xlsx";
  import { Button, Icon, message } from "antd";
  import "./styles.css";
  
  export default class UploadItem extends Component {
    onImportExcel = (file, addItem) =&gt; {
      const { files } = file.target;
      const fileReader = new FileReader();
      fileReader.onload = event =&gt; {
        try {
          const { result } = event.target;
          const workbook = XLSX.read(result, { type: "binary" });
          let data = [];
          for (const Sheet in workbook.Sheets) {
            // var XL_row_object =
            XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            if (workbook.Sheets.hasOwnProperty(Sheet)) {
              data = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);
              data.forEach(x =&gt; {
                addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
              });
            }
          }
          message.success("upload success!");
          console.log(data);
        } catch (e) {
          message = message.error("file type is incorrect!");
        }
      };
      fileReader.readAsBinaryString(files[0]);
    };
    render() {
      return (
        &lt;div style={{ marginTop: 100 }}&gt;
          &lt;Button className="upload-wrap"&gt;
            &lt;Icon type="upload" /&gt;
            &lt;input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={this.onImportExcel} /&gt;
            &lt;span className="upload-text"&gt;Upload files&lt;/span&gt;
          &lt;/Button&gt;
          &lt;p className="upload-tip"&gt;Supports files in .xlsx, .xls format&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>