React S3 Uploader with Progressbar

Introduction and Installation

React-S3-Uploader provides convinent way to upload files from browser rather than from server

Installation in Client-Side Application

npm install --save react-s3-uploader
npm install --save react-bootstrap

Installation in Server-Side Application

npm install --save react-s3-uploader
npm install --save aws-config
npm install --save bluebird

Render the Uploader and ProgressBar

I render the Uploader and ProgressBar in React Modal

import {ProgressBar} from 'react-bootstrap';
const ReactS3Uploader = require('react-s3-uploader');

class AttachmentBody extends React.Component {
  constructor(props) {
    super(props);
    this.onUploadFinish = this.onUploadFinish.bind(this);
    this.onUploadProgress = this.onUploadProgress.bind(this);
    this.state = {completed: 0};
  }

  onUploadProgress(percent){
    this.setState({completed: percent});
  }

  onUploadFinish( e ){
    //Do things here
  }

  render() {
    return (
      <div className='modal-body'>
        <ReactS3Uploader
          signingUrl="s3/sign"
          signingUrlMethod="GET"
          onProgress={this.onUploadProgress}
          onFinish={this.onUploadFinish}
          signingUrlHeaders={getAuthHeader()}
          uploadRequestHeaders={{ 'x-amz-acl': 'public-read' }}
          contentDisposition="auto"
          scrubFilename={(filename) => filename.replace(/[^\w\d_\-.]+/ig, '')}
          server="http://localhost:3001" />
        <br />
        <div>
          <ProgressBar striped bsStyle="success" now={this.state.completed}  label={`${this.state.completed}%`}/>
        </div>
      </div>
    );
  }
}

Using Server Side to Provide Signature Method

Method1: Using Router

getFileKeyDir could be used to add prefix to the s3 location, e.g., you could upload to s3Bucket/aa/bb/cc/UUID_yourfile.txt

router.use(`/s3`, require('react-s3-uploader/s3router')({
    bucket: s3Bucket,
    headers: {'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'},
    getFileKeyDir: function(req) {
        return s3Prefix;
    },
    ACL: 'private',
    uniquePrefix: true
}));

Method2: Using App

app.use(`/s3`, require('react-s3-uploader/s3router')({
    bucket: s3Bucket,
    headers: {'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'},
    getFileKeyDir: function(req) {
        return s3Prefix;
    },
    ACL: 'private',
    uniquePrefix: true
}));