Upload Documents Component

index.js

import * as ActionTypes from '../constants/ActionTypes';
import * as ApiRoutes from '../constants/ApiRoutes';

export function toggleUploader(documentType, bucket){
  return {
    type: ActionTypes.SET_DOCUMENT,
    documentType,
    bucket
  }
}

export function deleteDocument(doctype, bucket){
  return {
    type: ActionTypes.DELETE_DOCUMENT,
    doctype,
    bucket
  }
}

export function upload(doctype, bucket, file){
  return dispatch => {
    dispatch({type: ActionTypes.REQUEST_ATTEMPT});
    let fd = new FormData();
    let xhr = new XMLHttpRequest();

    xhr.addEventListener('progress', function(e){
      if(e.lengthComputable){
        dispatch({type: ActionTypes.REQUEST_PROGRESS, progress: Math.round(e.loaded / e.total * 90)});
      }
    });
    xhr.upload.addEventListener('progress', function(e){
      if(e.lengthComputable){
        dispatch({type: ActionTypes.REQUEST_PROGRESS, progress: e.loaded / e.total * 90});
      }
    });
    xhr.addEventListener('load', function(e){
      let response;
      if(xhr.response !== undefined){
        response = xhr.response;
      }else if(xhr.responseType === '' || xhr.responseType === 'text'){
        response = xhr.responseText;
      }
      if(!response){
        let error = "Ha ocurrido un error al subir el archivo. Inténtalo nuevamente.";
        dispatch({type: ActionTypes.REQUEST_FAILED, error});
        return;
      }
      if(typeof response === 'string') response = JSON.parse(response);
      if(response.code !== 200){
        let {message, code} = response;
        let error = message;
        dispatch({type: ActionTypes.REQUEST_FAILED, error, code});
      }else{
        let data = response.data;
        dispatch({type: ActionTypes.REQUEST_SUCCEED});
        dispatch({type: ActionTypes.UPLOAD_SUCCEED, doctype, bucket, data});
        //dispatch(getDetail(accessToken, current));
      }
    });
    xhr.addEventListener('error', function(e){
      let error = "Ha ocurrido un error al subir el archivo";
      dispatch({type: ActionTypes.REQUEST_FAILED, error});
      throw new Error('Request failed ' + error); 
    });
    xhr.addEventListener('abort', function(e){
      let error = "La transferencia ha sido cancelada por el usuario";
      dispatch({type: ActionTypes.REQUEST_FAILED, error});
      throw new Error('Request failed ' + error); 
    });
    fd.append('document_type',doctype);
    fd.append('file', file);
    xhr.open('POST', ApiRoutes.UPLOAD_URL);
    xhr.responseType='json';
    xhr.withCredentials = true;
    xhr.multipart = true;
    xhr.send(fd);
  }
}

Uploader.js

// Import
import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions';
import Dialog from 'material-ui/Dialog'
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import LinearProgress from 'material-ui/LinearProgress';
import ActionBackup from 'material-ui/svg-icons/action/backup';
import * as Styles from '../constants/Styles';

class Uploader extends Component {
  _clearUploader(e){
    if(e) e.preventDefault();
    this.props.dispatch(actions.toggleUploader(null));
  }
  _upload(){
    this.props.dispatch(actions.upload('PDF', documents.bucket, this.file));
  }
  _openSelectorFile(e){
    if(e) e.preventDefault();
    this.inputFile.click();
  }
  _selectFile(e){
    e.preventDefault();
    this.file = this.inputFile.files[0];
    this._upload();
  }
  _dropFile(e){
    e.preventDefault();
    e.stopPropagation();
    this.file = e.dataTransfer.files[0];
    this._upload();
  }
  _handleDragOver(e){
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  }
  render() {
    const {documents} = this.props;
    const uploadActions = [
      <FlatButton label="Cancelar" primary={true} className="buttonsecondary" onTouchTap={this._clearUploader.bind(this)} />
    ]
  	return (
      <Dialog title="Subir Documento" 
        actions={uploadActions} 
        modal={true} 
        open={documents.document_type !== null}>
        <div className="row middle-xs center-xs">
          <div className="col-xs-12">
            <div ref={(dropzone) => {this.dropzone = dropzone}} 
            onTouchTap={this._openSelectorFile.bind(this)} 
            onDrop={this._dropFile.bind(this)}
            onDragOver={this._handleDragOver.bind(this)}
            style={Styles.Dropzone}>
              <input hidden 
                type="file" 
                ref={(input) => {this.inputFile = input}} 
                accept="application/pdf"
                onChange={this._selectFile.bind(this)}/>
              <label>Arrastra tu archivo aquí o seleccionalo desde tu computadora.</label>
              <br />
              <IconButton 
                tooltip="Selecciona tu archivo dando clic aquí"
                iconStyle={Styles.Dropzone.IconButton}>
                <ActionBackup color={Styles.Dropzone.ActionBackup.color} />
              </IconButton>                
              <LinearProgress mode="determinate" value={documents.current_progress} />
            </div>
          </div>
        </div>
      </Dialog>
    );
  }
}
// Export
function mapStateToProps(state, ownProps){
  return { documents: state.Documents }
}

export default connect(mapStateToProps)(Uploader)