content: import React from 'react';
  import FileUploadProgress from 'react-fileupload-progress';
  
  const styles = {
    progressWrapper: {
      height: '50px',
      marginTop: '10px',
      width: '400px',
      float: 'left',
      overflow: 'hidden',
      backgroundColor: '#f5f5f5',
      borderRadius: '4px',
      WebkitBoxShadow: 'inset 0 1px 2px rgba(0,0,0,.1)',
      boxShadow: 'inset 0 1px 2px rgba(0,0,0,.1)'
    },
    progressBar: {
      float: 'left',
      width: '0',
      height: '100%',
      fontSize: '12px',
      lineHeight: '20px',
      color: '#fff',
      textAlign: 'center',
      backgroundColor: '#5cb85c',
      WebkitBoxShadow: 'inset 0 -1px 0 rgba(0,0,0,.15)',
      boxShadow: 'inset 0 -1px 0 rgba(0,0,0,.15)',
      WebkitTransition: 'width .6s ease',
      Otransition: 'width .6s ease',
      transition: 'width .6s ease'
    },
    cancelButton: {
      marginTop: '5px',
      WebkitAppearance: 'none',
      padding: 0,
      cursor: 'pointer',
      background: '0 0',
      border: 0,
      float: 'left',
      fontSize: '21px',
      fontWeight: 700,
      lineHeight: 1,
      color: '#000',
      textShadow: '0 1px 0 #fff',
      filter: 'alpha(opacity=20)',
      opacity: '.2'
    },
  
    bslabel: {
      display: 'inline-block',
      maxWidth: '100%',
      marginBottom: '5px',
      fontWeight: 700
    },
  
    bsHelp: {
      display: 'block',
      marginTop: '5px',
      marginBottom: '10px',
      color: '#737373'
    },
  
    bsButton: {
      fontSize: '12px',
      lineHeight: '1.5',
      borderRadius: '3px',
      color: '#fff',
      backgroundColor: '#337ab7',
      borderColor: '#2e6da4',
      display: 'inline-block',
      padding: '6px 12px',
      marginBottom: 0,
      fontWeight: 400,
      textAlign: 'center',
      whiteSpace: 'nowrap',
      verticalAlign: 'middle',
      touchAction: 'manipulation',
      cursor: 'pointer',
      WebkitUserSelect: 'none',
      MozUserSelect: 'none',
      msUserSelect: 'none',
      userSelect: 'none',
      backgroundImage: 'none',
      border: '1px solid transparent'
    }
  };
  
  export default class FileUpload extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    formGetter() {
      return new FormData(document.getElementById('customForm'));
    }
  
    customFormRenderer(onSubmit) {
      return (
        <form id='customForm' style={ { marginBottom: '15px' } }>
          <label style={ styles.bslabel } htmlFor='exampleInputFile'>File input</label>
          <input style={ { display: 'block' } } type='file' name='file' id='exampleInputFile' />
          <p style={ styles.bsHelp }>This is custom form.</p>
          <button type='button' style={ styles.bsButton } onClick={ onSubmit }>Upload</button>
        </form>
      );
    }
  
    customProgressRenderer(progress, hasError, cancelHandler) {
      if (hasError || progress > -1 ) {
        const barStyle = Object.assign({}, styles.progressBar);
        barStyle.width = progress + '%';
        let message = (<span>{ barStyle.width }</span>);
        if (hasError) {
          barStyle.backgroundColor = '#d9534f';
          message = (<span style={ { 'color': '#a94442' } }>Failed to upload ...</span>);
        }
        if (progress === 100) {
          message = (<span >Done</span>);
        }
        return (
          <div>
            <div style={ styles.progressWrapper }>
              <div style={ barStyle }></div>
            </div>
            <button style={ styles.cancelButton } onClick={ cancelHandler }>
              <span>&times;</span>
            </button>
            <div style={ { 'clear': 'left' } }>
              { message }
            </div>
          </div>
        );
      } else {
        return null;
      }
    }
  
    render() {
      return (
        <div>
          <FileUploadProgress key='ex2' url='http://localhost:8088/poc/upload'
              onProgress={ (e, request, progress) => { console.log('progress', e, request, progress); } }
              onLoad={ (e, request) => { console.log('load', e, request); } }
              onError={ (e, request) => { console.log('error', e, request); } }
              onAbort={ (e, request) => { console.log('abort', e, request); } }
              formGetter={ this.formGetter.bind(this) }
              formRenderer={ this.customFormRenderer.bind(this) }
              progressRenderer={ this.customProgressRenderer.bind(this) }/>
        </div>
      );
    }
  }
  