restuta-react-dropzone-s3-uploader v0.20.4

Drag and drop s3 file uploader via react-dropzone + react-s3-uploader

For more detailed docs see these:

• https://github.com/paramaggarwal/react-dropzone
• https://github.com/odysseyscience/react-s3-uploader

Usage (client):

import DropzoneS3Uploader from 'react-dropzone-s3-uploader'

function MyComponent() {
  const style = {
    height: 200,
    border: 'dashed 2px #999',
    borderRadius: 5,
    position: 'relative',
    cursor: 'pointer',
  }

  const uploaderProps = {
    style,
    maxFileSize: 1024 * 1024 * 50,
    server: 'https://example/com',
    s3Url: 'https://my-bucket.s3.amazonaws.com/',
    signingUrlQueryParams: {uploadType: 'avatar'},
  }

  return (
    <DropzoneS3Uploader onFinish={this.handleFinishedUpload} {...uploaderProps} />
  )
}

Usage (server):

Use s3Router from react-s3-uploader to get signed urls for uploads. See https://github.com/odysseyscience/react-s3-uploader for more details. react-dropzone-s3-uploader/s3router can be used as an alias for react-s3-uploader/s3router.

app.use('/s3', require('react-dropzone-s3-uploader/s3router')({
    bucket: 'MyS3Bucket',
    region: 'us-east-1', //optional
    headers: {'Access-Control-Allow-Origin': '*'}, // optional
    ACL: 'private' // this is default
}));

Available options:

Custom display component:

Specify your own display for an uploaded file. Will receive these props: {fileUrl, s3Url, filename, progress, error, imageStyle}

<DropzoneS3Uploader onFinish={this.handleFinishedUpload} {...uploaderProps}>
  <CustomElement />
</DropzoneS3Uploader>