sztm-excel/src/playerList/components/PlayerForm.js

import React from 'react'
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap'
import { fileSize, date2s, time2s } from '../../helpers'

function FieldGroup ({ id, label, help, file, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
      {file && <div>{fileSize(file.size)} {date2s(file.lastModified)} {time2s(file.lastModified)}</div>}
    </FormGroup>
  )
}

class PlayerForm extends React.Component {
  constructor () {
    super()
    this.handleFileUpload = this.handleFileUpload.bind(this)
  }

  handleFileUpload (event) {
    event.preventDefault()
    const { fileUploadStart } = this.props.actions
    const { alertAdd } = this.props.alerts
    const { files } = this.playerListFile
    if (files.length === 0) {
      alertAdd({ type: 'info', text: 'Datei entfernt' })
      return
    }
    if (files.length > 1) {
      alertAdd({ type: 'warning', text: 'Mehrere Dateien gesendet. Nur die erste wird verarbeitet.' })
    }
    const file = files[0]
    fileUploadStart(file)
  }

  render () {
    const { fileUpload, file } = this.props.state

    return (
      <div>
        <form>
          <FieldGroup
            id='playerListFile'
            label='PlayerList.xls File'
            help='Die Datei wird von der Swisstennis Turniersoftware generiert.'
            type='file'
            file={file}
            inputRef={input => { this.playerListFile = input }} 
            onChange={this.handleFileUpload}
            disabled={(fileUpload === 'started')}
          />
        </form>
      </div>
    )
  }
}

export default PlayerForm