RFileUploader support IE8

gistfile1.js

'use strict';

import React from 'react/addons';

const IS_FORM_SUPPORTED = (() => {return window.FormData !== undefined; })();
const UPLOAD_ACTION = '/api/fileupload';

const styles = {
  label: {
    display: 'block',
    width: '31px',
    height: '27px',
    cursor: 'pointer',
    textIndent: '-9999em',
    background: 'transparent url("/assets/fileIcon.png") 0 0 no-repeat'
  }
};

class FileUploader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileName: null
    };
  }

  componentDidMount() {
    if (!IS_FORM_SUPPORTED){
      // onChange does not fire on IE8
      // https://github.com/facebook/react/issues/2406
      let fileInput = this.refs.hiddenFileInput.getDOMNode();
      fileInput.attachEvent('onchange', this.handleFileInput.bind(this));
    }
  }

  // tirgger from label click
  // http://stackoverflow.com/questions/9396411/ie-javascript-form-submit-with-file-input
  // onFileButtonClicked(ev) {
  //   React.findDOMNode(this.refs.hiddenFileInput).click();
  // }

  handleFileInput(e) {
    let file;
    if (e && e.target && e.target.files) {
      file = e.target.files[0];
      this.setState({
        fileName: file.name
      }, () => {
        this.uploadFile(file);
      });
    } else {
      let filePath = React.findDOMNode(this.refs.hiddenFileInput).value;
      this.setState({
        fileName: filePath.replace(/^.*\\/, ''),
      }, () => {
        this.uploadFile();
      });
    }
  }

  uploadFile(file) {
    if (IS_FORM_SUPPORTED) {
      MyActionCreator.fileUploadByAjax(file)
      .then((result) => {
        this.onFileUploadSuccess(result);
      }, () => {
        this.onFileUploadFail();
      });
    } else {
      React.findDOMNode(this.refs.hiddenForm).submit();
    }
  }

  onFileUploadFormSubmitted() {
    let result = React.findDOMNode(this.refs.postFrame).contentWindow.document.body.innerText;
    if (result !== 'error' /* check server response */ ){
      this.onFileUploadSuccess(result);
    } else {
      this.onFileUploadFail();
    }
  }

  onFileUploadSuccess(result) {
    this.setState({
      fileName: null
    }, ()  => {
      console.log(result);
    });
  }

  onFileUploadFail(fileId) {
    this.setState({
      fileName: null
    }, () => {
      console.log('failed to upload');
    });
  }

  render() {
    // Do not use display:none when ajax upload is not supported
    let hiddenFileInputStyle = IS_FORM_SUPPORTED ? {display: 'none'} : {position: 'absolute', left: '-9999em'};
    return (
      <div style={styles.root} >
        <form ref='hiddenForm' action={UPLOAD_ACTION} method='post' encType='multipart/form-data' target='postFrame' style={{float: 'left'}}>
          <input type='hidden' name='csrf-token' value={Utils.getAntiCSRFToken()}/>
          <label htmlFor='hiddenFileInput' id='label' style={styles.label} />
          <input id='hiddenFileInput' ref='hiddenFileInput' type='file' name='file' style={hiddenFileInputStyle} onChange={this.handleFileInput.bind(this)} />
        </form>
        <iframe ref='postFrame' onLoad={this.onFileUploadFormSubmitted.bind(this)} name='postFrame' style={{display:'none'}}></iframe>
      </div>
    );
  }
}

FileUploader.propTypes = {
};

FileUploader.defaultProps = {
};

FileUploader.contextTypes = {
};
export default FileUploader;