Drag and drop s3 file uploader via react-dropzone + react-s3-uploader
For more detailed docs see these:
Usage (client):
{ 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=thishandleFinishedUpload ...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;
Available options:
- server: your servers url if different to the current domain
- s3Url: your s3 base url
- signingUrl: The path on your server to your s3 signed url generator (see the server section above)
- signingUrlQueryParams: Query params to add when making a request to the signing url
- headers: headers to send to your s3 signed url generator
- multiple: Allow more than one file
- filename: Filename of an image already hosted in the s3 server (usually an image you've uploaded previously), to be displayed in place of the uploader region.
- maxFileSize: Max size in bytes
- style, activeStyle, rejectStyle: Styles to be passed to react-dropzone
- imageStyle: Style object for the preview image
- onError, onProgress, onFinish, preprocess: Callbacks for the respective events
- uploaderOptions: Any additional options to be passed to the S3Upload instance
- ProgressComponent: A React component to place while the image is being uploaded. It requires that an onProgress callback had been defined.
- hideErrorMessage: Do not show errors inside this component.
Custom display component:
Specify your own display for an uploaded file. Will receive these props:
{fileUrl, s3Url, filename, progress, error, imageStyle}
<DropzoneS3Uploader onFinish=thishandleFinishedUpload ...uploaderProps> <CustomElement /></DropzoneS3Uploader>