hbm-react-components/components/upload/index.js

HBM React components

import React from 'react'
import classNames from 'classnames'
import accept from 'attr-accept'
import Button from '../button/'

export default class Upload extends React.Component {

  static propTypes = {
    accept: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    onChange: React.PropTypes.func.isRequired,
    buttonText: React.PropTypes.string,
    textBefore: React.PropTypes.string,
    textAfter: React.PropTypes.string
  }

  static defaultProps = {
    accept: '*',
    disabled: false,
    buttonText: 'Select File',
    textBefore: '',
    textAfter: 'or drag file in this area'
  }

  state = {
    isOverWindow: false,
    isOverDropzone: false
  }

  // counter is an internal variable which is updated during drag enter and drag leave events.
  // the problem is that the browser fires drag leave and drag enter events
  // when dragging over a child element of window.
  counter = 0

  // prevent drag and drop of multiple files
  // this only works in chrome since Firefox does not allow access to files while dragging
  isInvalid (event) {
    const edt = event.dataTransfer
    // event.dataTransfer is empty during tests. no need to check every time in the following if ...
    if (!edt) return false
    // check for disabled
    if (this.props.disabled) return true
    // check firefox
    if (edt.mozItemCount && edt.mozItemCount !== 1) {
      return true
    }
    // check chrome
    if (edt.items && edt.items.length !== 1) {
      return true
    }
    // check mime types. only works in chrome. files is a FileList (no real array)
    const unaccepted = edt.files && Array.prototype.slice.call(edt.files).every((file) =>
      !accept(file, this.props.accept)
    )
    return unaccepted
  }

  onDragEnter = (event) => {
    if (this.isInvalid(event)) return
    // prevent event to allow drop
    event.preventDefault()
    this.setState({
      isOverDropzone: true
    })
  }

  onDragOver = (event) => {
    if (this.isInvalid(event)) return
    // If you want to allow a drop, you must prevent the default handling by cancelling the event
    // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#Specifying_Drop_Targets
    event.preventDefault()
  }

  onDragLeave = (event) => {
    event.preventDefault()
    this.setState({
      isOverDropzone: false
    })
  }

  onDocumentDragEnter = (event) => {
    // prevent drag & drop of multiple items
    if (this.isInvalid(event)) return
    ++this.counter
    this.setState({
      isOverWindow: true
    })
  }

  onDocumentDragLeave = (event) => {
    event.preventDefault()
    if (--this.counter > 0) {
      return
    }
    // update state only when really leaving the document
    // not when leaving document children
    this.setState({
      isOverWindow: false
    })
  }

  onChange = (event) => {
    event.preventDefault()
    this.counter = 0
    // event.target.files is from standard file upload dialog
    // event.dataTransfer.files is from drap and drop api
    let files = event.target.files || event.dataTransfer.files
    this.setState({
      isOverWindow: false,
      isOverDropzone: false
    })
    // call callback to send files to parent
    this.props.onChange(files)
  }

  onClick = (event) => {
    this.fileInput.click()
  }

  componentDidMount () {
    document.addEventListener('dragenter', this.onDocumentDragEnter)
    document.addEventListener('dragleave', this.onDocumentDragLeave)
  }

  componentWillUnmount () {
    document.removeEventListener('dragenter', this.onDocumentDragEnter)
    document.removeEventListener('dragleave', this.onDocumentDragLeave)
  }

  render () {
    const klass = classNames('Upload', {
      'is-disabled': this.props.disabled,
      'is-over-window': this.state.isOverWindow,
      'is-over-dropzone': this.state.isOverDropzone
    })

    return (
      <div
        className={klass}
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDragLeave={this.onDragLeave}
        onDrop={this.onChange}
      >
        <div className='Upload-textBefore'>
          {this.props.textBefore}
        </div>
        <Button raised onClick={this.onClick} disabled={this.props.disabled}>
          {this.props.buttonText}
        </Button>
        <div className='Upload-textAfter'>
          {this.props.textAfter}
        </div>
        <input
          accept={this.props.accept}
          className='Upload-fileInput'
          disabled={this.props.disabled}
          type='file'
          onChange={this.onChange}
          ref={(el) => (this.fileInput = el)}
        />
      </div>
    )
  }

}