upload-file-client.jsx

import React from 'react'
import classNames from 'classnames'
import request from 'superagent'

export default class FileUploader extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      fileName: '',
      loading: false
    }
  }

  handleFileSelect = (e) => {
    // in this case the input field handles displaying the file name natively
    // but you can choose to display it yourself somewhere on the page
    var name = e.target.files[0].name
    this.setState({fileName: name})
  }

  submit = () => {
    var file = React.findDOMNode(this.refs.file).files[0]

    // if we don't have a file just return and do nothing
    if (!file) { return }

    this.setState({loading: true})
    request.post('/upload')
    // it's important to set the name of the file so that the server knows what to look for
    .attach('users.csv', file)
    .end(function (err, res) {
      this.setState({loading: false})
      if (err) {
        // error
      }

      // success
    }.bind(this))
  }

  render () {
    return (
      <div>
        <input type='file' id='file' ref='file' onChange={this.handleFileSelect}/>
        <button className={classNames({loading: this.state.loading})} onClick={this.submit}>
          Upload
        </button>
      </div>
    )
  }
}