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

1import DropzoneS3Uploader from 'react-dropzone-s3-uploader'
2
3export default class S3Uploader extends React.Component {
4
5  handleFinishedUpload = info => {
6    console.log('File uploaded with filename', info.filename)
7    console.log('Access it on s3 at', info.fileUrl)
8  }
9
10  render() {
11    const uploadOptions = {
12      server: 'http://localhost:4000',
13      signingUrlQueryParams: {uploadType: 'avatar'},
14    }
15    const s3Url = 'https://my-bucket.s3.amazonaws.com'
16
17    return (
18      <DropzoneS3Uploader
19        onFinish={this.handleFinishedUpload}
20        s3Url={s3Url}
21        maxSize={1024 * 1024 * 5}
22        upload={uploadOptions}
23      />
24    )
25  }
26}

Custom display component

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

1
2// elsewhere
3class UploadDisplay extends React.Component {
4  
5  renderFileUpload = (uploadedFile, i) => {
6    const {
7      filename,   // s3 filename
8      fileUrl,    // full s3 url of the file
9      file,       // file descriptor from the upload
10    } = uploadedFile
11
12    return (
13      <div key={i}>
14        <img src={fileUrl} />
15        <p>{file.name}</p>
16      </div>
17    )
18  }
19
20  render() {
21    const {uploadedFiles, s3Url} = this.props
22    return (
23      <div> 
24        {uploadedFiles.map(this.renderFileUpload)}
25      </div>
26    )
27  }
28}
29
30// back in your uploader...
31class S3Uploader extends React.Component {
32
33  //...
34
35  render() {
36    return (
37      <DropzoneS3Uploader 
38        onFinish={this.handleFinishedUpload} 
39        upload={uploadOptions}
40      >
41        <UploadDisplay />
42      </DropzoneS3Uploader>
43    )
44  }
45}

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.

1app.use('/s3', require('react-dropzone-s3-uploader/s3router')({
2  bucket: 'MyS3Bucket',                           // required
3  region: 'us-east-1',                            // optional
4  headers: {'Access-Control-Allow-Origin': '*'},  // optional
5  ACL: 'private',                                 // this is the default - set to `public-read` to let anyone view uploads
6}));