Drag and drop s3 file uploader via react-dropzone + react-s3-uploader
Clone or download
Latest commit 3f55cac Sep 7, 2017

readme.md

Drag and drop s3 file uploader for React

This component uploads files dropped into react-dropzone to s3 with react-s3-uploader.

For more detailed docs see the source packages

Usage (client)

Available props

s3Url and upload are the only props that require configuration. All others have sensible defaults that may be overridden.

Prop Type Description
s3Url string.isRequired The url of your s3 bucket (https://my-bucket.s3.amazonaws.com)
upload object.isRequired Upload options passed to react-s3-uploader. See react-s3-uploader for available options. Don't set onProgress, onError or onFinish here - use the ones below
filename string Used as the default value if present. Filename of an image already hosted on s3 (i.e. one that was uploaded previously)
notDropzoneProps array A list of props to not pass to react-dropzone
isImage func A function that takes a filename and returns true if it's an image
imageComponent func Component used to render an uploaded image
fileComponent func Component used to render an uploaded file
progressComponent func Component used to render upload progress
errorComponent func Component used to render an error
children node || func If present the above components will be ignored in favour of the children
passChildrenProps bool If true we pass the current state to children of this component. Default is true. Set to false to avoid React warnings about unused props.
onDrop func Called when a file is dropped onto the uploader
onError func Called when an upload error occurs
onProgress func Called when a chunk has been uploaded
onFinish func Called when a file has completed uploading. Called once per file if multi=true
...rest All other props are passed on to the react-dropzone component

Example

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

export default class S3Uploader extends React.Component {

  handleFinishedUpload = info => {
    console.log('File uploaded with filename', info.filename)
    console.log('Access it on s3 at', info.fileUrl)
  }

  render() {
    const uploadOptions = {
      server: 'http://localhost:4000',
      signingUrlQueryParams: {uploadType: 'avatar'},
    }
    const s3Url = 'https://my-bucket.s3.amazonaws.com'

    return (
      <DropzoneS3Uploader
        onFinish={this.handleFinishedUpload}
        s3Url={s3Url}
        maxSize={1024 * 1024 * 5}
        upload={uploadOptions}
      />
    )
  }
}

Custom display component

Specify your own component to display uploaded files. Passed a list of uploadedFile objects.

// elsewhere
class UploadDisplay extends React.Component {
  
  renderFileUpload = (uploadedFile, i) => {
    const {
      filename,   // s3 filename
      fileUrl,    // full s3 url of the file
      file,       // file descriptor from the upload
    } = uploadedFile

    return (
      <div key={i}>
        <img src={fileUrl} />
        <p>{file.name}</p>
      </div>
    )
  }

  render() {
    const {uploadedFiles, s3Url} = this.props
    return (
      <div> 
        {uploadedFiles.map(this.renderFileUpload)}
      </div>
    )
  }
}

// back in your uploader...
class S3Uploader extends React.Component {

  //...

  render() {
    return (
      <DropzoneS3Uploader 
        onFinish={this.handleFinishedUpload} 
        upload={uploadOptions}
      >
        <UploadDisplay />
      </DropzoneS3Uploader>
    )
  }
}

Usage (server)

  • Use s3Router from react-s3-uploader to get signed urls for uploads.
  • react-dropzone-s3-uploader/s3router can be used as an alias for react-s3-uploader/s3router.
  • See react-s3-uploader for more details.
app.use('/s3', require('react-dropzone-s3-uploader/s3router')({
  bucket: 'MyS3Bucket',                           // required
  region: 'us-east-1',                            // optional
  headers: {'Access-Control-Allow-Origin': '*'},  // optional
  ACL: 'private',                                 // this is the default - set to `public-read` to let anyone view uploads
}));