ReactJS Dropzone Example

reactjs-dropzone-example.jsx

// http://stackoverflow.com/questions/4212861/what-is-a-correct-mime-type-for-docx-pptx-etc
// https://technet.microsoft.com/en-us/library/ee309278(office.12).aspx

import Dropzone from 'react-dropzone';
import Button from 'react-bootstrap/lib/Button';

const acceptedMimeTypes = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel";

...

  importFiles = () => {
    this.refs.dropzone.open();
  }

  onDragEnter = () => {
    this.setState({dragging: true});
  }

  onDragLeave = () => {
    this.setState({dragging: false});
  }

  onDrop = (files) => {
    this.setState({
      dragging: false,
      fileAdded: true,
      fileName: files[0].name,
      fileUploaded: false,
      fileUploadError: false,
    });

    let file = files[0];
    let contentType = files[0].type;
    let fileName = files[0].name;
    
    ...
    
  };

...

<Dropzone 
  accept={acceptedMimeTypes} 
  onDrop={this.onDrop} 
  ref="dropzone" 
  style={this.state.dragging ? styles.dropzone.drag : styles.dropzone.noDrag} 
  onDragEnter={this.onDragEnter} 
  onDragLeave={this.onDragLeave}>
  
  <div>
    Drag & Drop Here
  </div>
</Dropzone>

<Button onTouchTap={this.importFiles}>Browse</Button>

...