https://github.com/utrustdev/react-s3-post-uploader
React component for S3 uploads via POST
https://github.com/utrustdev/react-s3-post-uploader
aws react uploads
Last synced: 9 months ago
JSON representation
React component for S3 uploads via POST
- Host: GitHub
- URL: https://github.com/utrustdev/react-s3-post-uploader
- Owner: utrustdev
- License: mit
- Created: 2018-12-08T20:22:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:28:38.000Z (over 3 years ago)
- Last Synced: 2025-07-20T21:26:31.743Z (9 months ago)
- Topics: aws, react, uploads
- Language: JavaScript
- Homepage:
- Size: 4.41 MB
- Stars: 6
- Watchers: 11
- Forks: 1
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-s3-post-uploader
[](https://github.com/utrustdev/react-s3-post-uploader)
React component for S3 uploads via POST (only) ([sigv4-post-example](https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html)).
## Install
`$ npm install --save @utrustdev/react-s3-post-uploader`
## Code Example (simplified)
Working full example (eg. with rendering errors) is [here](example/src/components/Uploads/index.jsx)
```jsx
import S3PostUploader from '@utrustdev/react-s3-post-uploader';
class Uploads extends Component {
setInputRef = input => {
this.uploadInput = input;
};
onClick = event => {
event.preventDefault();
this.uploadInput.click();
};
onUploadStart = () => {...}
onUploadProgress = (progressEvent) => {...}
onUploadFinish = (uploadResult, file) => {...}
onUploadError = error => {...}
getCredentials = (file, callback) => {
fetch('url-returning-credentials-for-post-upload')
.then(response => {
return response.json();
})
.then(({url, fields}) => {
callback(file, {
uploadUrl: url,
params: {
acl: fields.acl,
key: fields.key,
policy: fields.Policy,
success_action_status: fields.success_action_status,
'content-type': fields['Content-Type'],
'x-amz-signature': fields['X-Amz-Signature'],
'x-amz-algorithm': fields['X-Amz-Algorithm'],
'x-amz-date': fields['X-Amz-Date'],
'x-amz-credential': fields['X-Amz-Credential'],
},
});
})
}
render() {
Upload Attachments
}
}
```
#### S3PostUploader Props
- `onStart` - method called when uploading is started. Can be used to set some uploading state.
- `onProgress` - allows handling of progress events for uploads. The eventProgress struct is passing to function `{loaded: number, total: number, lengthComputable: boolean, ...}`. See usability for displaying uploaded percentage [here](example/src/components/Uploads/index.jsx)
- `onFinish` - function getting `(s3Result, file)` where `s3Result` is result from S3 and file is chosen file.
You can find relevant types [here](src/S3PostUploader.jsx) (type S3Result ...)
- `onError` - function getting `(error)`. Error returning from S3 if something went wrong with upload. Relevant type in [here](src/S3PostUploader.jsx) (type Error ...)
- `getCredentials` - function getting `(file, callback)`. File is chosen file. The `callback` is function
responsible for uploading file on S3 via POST with required credentials we were fetched from server.
- `inputRef` - function getting reference to original file field. Used for save reference in component and
call actions later on it (as shown in simple example above).
## Working Example
In [example](example) folder you can find working example with server. In readme of [example](example) are instructions
for running.
## TODO
- [x] make [Upload](example/src/components/Uploads/index.jsx) example component with flow as [S3PostUploader](src/S3PostUploader.jsx) is
- [ ] add linter tests on CI with indicator in README
- [ ] make better copy for `Contribution` section
## Contribution
Please create an issue or open a pull request. Once you change something in `src/S3PostUploader.jsx` please don't
forget to run `yarn build` which will compile and also update S3PostUploader componnent in [example](example). After
this make sure [example](example) app is still working.
## Alternatives
- https://github.com/odysseyscience/react-s3-uploader support only `PUT` upload with pressigned URL ([PresignedUrlUploadObject](https://docs.aws.amazon.com/AmazonS3/latest/dev/PresignedUrlUploadObject.html))