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

• react-dropzone
• react-s3-uploader

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
}));