UploadImagesDialog.jsx

const React = require('react')
const ReactDOM = require('react-dom')
const Api = require('./../../utils/Api')
const LoadingIndicator = require('./../common/LoadingIndicator')
const Dialog = require('./../common/Dialog')
const Dropzone = require('react-dropzone')
const async = require('async')

export default class UploadImagesDialog extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      error: null
    }
  }
  render () {
    let { loading, status, error  } = this.state
    return (
      <Dialog
        ref='dialog'
        onClose={(e) => this.props.onClose()}
        size='small'
        title={`Upload Images`}>
        <p>Supported formats are JPEG and PNG with a maximum file size of 5 MB</p>
        { error && (<div className='ui error message'>Error: {error.message}</div>)}
        { loading ? (
          <div className='ui icon message'>
            <i className='notched circle loading icon'></i>
            <div className='content'>
              <div className='header'>
                Uploading
              </div>
              { (status && status.total > 1) ? (
                <p>{status.current} out of {status.total} images</p>
              ) : (
                <p>1 image</p>
              ) }
            </div>
          </div>
        ) : (
          <Dropzone maxSize={5*1024*1024} onDrop={(acceptedFiles, rejectedFiles) => this.drop(acceptedFiles, rejectedFiles)} className='ui icon message upload-dropzone' activeClassName='ui icon blue message upload-dropzone-active'>
            <i className='upload icon'></i>
            <div className='content'>
              <div className='header'>
                Upload Files
              </div>
              <p>Try dropping some files here, or click to select files to upload.</p>
            </div>
          </Dropzone>
        ) }
      </Dialog>
    )
  }
  close () {
    this.refs.dialog.close()
  }
  drop (acceptedFiles, rejectedFiles) {
    let loading = true
    let error = null
    let status = { total: acceptedFiles.length, current: 0 }
    if (rejectedFiles.length) {
      error = new Error('File did not meet criteria: ' + rejectedFiles[0].name)
      return this.setState({ error })
    }

    this.setState({ loading, error })
    this.upload(acceptedFiles, status)
  }
  upload (files, status) {
    let loading = false
    async.mapSeries(files, (file, next) => {
      Api.upload('/collections/' + this.props.collection._id + '/upload', file, (error) => {
        if (error) return next(error)
        status.current++
        this.setState({ status })
        next()
      })
    }, (error) => {
      if (error) return this.setState({ error, loading })
      this.setState({ loading })
      this.close()
      this.props.onClose && this.props.onClose()
    })
  }
}