instantjob-recruiter-client/src/components/file_field.es6.jsx

a set of tools for creating an instantjob recruiter react client

import React, {Component} from 'react'
import classNames from 'classnames/bind'
import {MdInsertDriveFile, MdEdit, MdFileUpload} from 'react-icons/lib/md'
import Field from './field'
import TimeAgo from 'components/utils/time_ago'
import ProgressIndicator from './progress_indicator'
import auto_bind from 'common/auto_bind'
import {action_upload_entity_file} from 'common/fields'
import {download_file} from 'common/utilities'

const cx = classNames.bind(require('../styles/field.scss'))

// copy pasted from react-dropzone/src/getDataTransferItems
function get_file(event) {
  let dataTransferItemsList = [];
  if (event.dataTransfer) {
    const dt = event.dataTransfer;
    if (dt.files && dt.files.length) {
      dataTransferItemsList = dt.files;
    } else if (dt.items && dt.items.length) {
      // During the drag, even the dataTransfer.files is null
      // but Chrome implements some drag store, which is accesible via dataTransfer.items
      dataTransferItemsList = dt.items;
    }
  } else if (event.target && event.target.files) {
    dataTransferItemsList = event.target.files;
  }

  return dataTransferItemsList[0]
}

class FileField extends Component {
  constructor(props) {
    super(props)
    this.state = {
      uploading: false,
    }
    auto_bind(this)
  }

  view() {
    let {file: {url, name}} = this.props
    download_file(url, name)
  }

  open(e) {
    this.input.click()
  }

  upload(e) {
    e.preventDefault()
    this.props.upload_file(get_file(e, false))
    .on('progress', ({percent: uploading}) => {
      this.setState({uploading})
    })
    .then(() => this.setState({uploading: false}))
    .then(() => this.input.value = "")
  }

  render() {
    let {file: {updated_at, url}, ...props} = this.props
    let {uploading} = this.state
    let display, className, onClick
    if (uploading) {
      className = 'field__display_uploading'
      display = [
        <ProgressIndicator small key={'uploading'} completed={uploading} total={100} text="##%"/>
      ]
    } else if (url) {
      display = [
        <div key={'file'} className={cx('field__display-file')}>
          <div onClick={this.view} className={cx('field__display-file-preview')}>
            <MdInsertDriveFile />
          </div>
          <div className={cx('field__display-file-edit')} onClick={this.open}>
            <MdEdit />
          </div>
        </div>,
        <div key={'updated_at'} className={cx('field__display-updated-at')}>
          Mis à jour <TimeAgo>{updated_at}</TimeAgo>
        </div>
      ]
    } else {
      className = 'field__display_upload'
      onClick = this.open
      display = [
        <MdFileUpload key={'upload'} />
      ]
    }
    return (
      <Field {...props} category="file">
        <input
          ref={(input) => this.input = input}
          type="file"
          className={cx('field__input')}
          onChange={this.upload}
          accept={["jpg", "jpeg", "gif", "png", "tif", "tiff", "txt", "doc", "pps", "pdf", "mp3",
            "wav", "avi", "mpg", "mpeg", "wmv", "iso", "flv", "mov", "dvr-ms", "vob", "zip", "rar",
            "r00", "r01"].map((extension) => '.' + extension).join(",")}
          multiple={false}
          />
        <div className={cx('field__display', className)} onClick={onClick}>
          {display}
        </div>
      </Field>
    )
  }
}

FileField.defaultProps = {
  file: {url: "", updated_at: ""},
  show_label: true,
  editable: true,
}

export default FileField