{"id":29667043,"url":"https://github.com/utrustdev/react-s3-post-uploader","last_synced_at":"2025-07-22T16:01:57.054Z","repository":{"id":34041201,"uuid":"160975560","full_name":"utrustdev/react-s3-post-uploader","owner":"utrustdev","description":" React component for S3 uploads via POST","archived":false,"fork":false,"pushed_at":"2023-01-03T18:28:38.000Z","size":4625,"stargazers_count":6,"open_issues_count":35,"forks_count":1,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-07-20T21:26:31.743Z","etag":null,"topics":["aws","react","uploads"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/utrustdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-08T20:22:19.000Z","updated_at":"2025-07-09T00:10:05.000Z","dependencies_parsed_at":"2023-01-15T04:15:24.763Z","dependency_job_id":null,"html_url":"https://github.com/utrustdev/react-s3-post-uploader","commit_stats":null,"previous_names":["zdenal/react-s3-post-uploader"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/utrustdev/react-s3-post-uploader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utrustdev%2Freact-s3-post-uploader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utrustdev%2Freact-s3-post-uploader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utrustdev%2Freact-s3-post-uploader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utrustdev%2Freact-s3-post-uploader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/utrustdev","download_url":"https://codeload.github.com/utrustdev/react-s3-post-uploader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utrustdev%2Freact-s3-post-uploader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266524840,"owners_count":23942829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","react","uploads"],"created_at":"2025-07-22T16:01:16.254Z","updated_at":"2025-07-22T16:01:57.028Z","avatar_url":"https://github.com/utrustdev.png","language":"JavaScript","readme":"# react-s3-post-uploader\n[![](https://img.shields.io/github/license/utrustdev/react-s3-post-uploader.svg)](https://github.com/utrustdev/react-s3-post-uploader)\n\nReact component for S3 uploads via POST (only) ([sigv4-post-example](https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html)).\n\n## Install\n`$ npm install --save @utrustdev/react-s3-post-uploader`\n\n## Code Example (simplified)\nWorking full example (eg. with rendering errors) is [here](example/src/components/Uploads/index.jsx)\n\n```jsx\nimport S3PostUploader from '@utrustdev/react-s3-post-uploader';\n\n\nclass Uploads extends Component {\n  setInputRef = input =\u003e {\n    this.uploadInput = input;\n  };\n\n  onClick = event =\u003e {\n    event.preventDefault();\n    this.uploadInput.click();\n  };\n\n  onUploadStart = () =\u003e {...}\n  onUploadProgress = (progressEvent) =\u003e {...}\n  onUploadFinish = (uploadResult, file) =\u003e {...}\n  onUploadError = error =\u003e {...}\n\n  getCredentials = (file, callback) =\u003e {\n    fetch('url-returning-credentials-for-post-upload')\n      .then(response =\u003e {\n        return response.json();\n      })\n      .then(({url, fields}) =\u003e {\n        callback(file, {\n          uploadUrl: url,\n          params: {\n            acl: fields.acl,\n            key: fields.key,\n            policy: fields.Policy,\n            success_action_status: fields.success_action_status,\n            'content-type': fields['Content-Type'],\n            'x-amz-signature': fields['X-Amz-Signature'],\n            'x-amz-algorithm': fields['X-Amz-Algorithm'],\n            'x-amz-date': fields['X-Amz-Date'],\n            'x-amz-credential': fields['X-Amz-Credential'],\n          },\n        });\n      })\n  }\n\n  render() {\n    \u003cS3PostUploader\n      onStart={this.onUploadStart}\n      onProgress={this.onUploadProgress}\n      onFinish={this.onUploadFinish}\n      onError={this.onUploadError}\n      getCredentials={this.getCredentials}\n      inputRef={this.setInputRef}\n    /\u003e\n    \u003cdiv\u003e\n      \u003cButton onClick={this.onClick} variant=\"outlined\" component=\"span\"\u003e\n        Upload Attachments\n      \u003c/Button\u003e\n    \u003c/div\u003e\n    }\n}\n```\n#### S3PostUploader Props\n- `onStart` - method called when uploading is started. Can be used to set some uploading state.\n- `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)\n- `onFinish` - function getting `(s3Result, file)` where `s3Result` is result from S3 and file is chosen file.\nYou can find relevant types [here](src/S3PostUploader.jsx) (type S3Result ...)\n- `onError` - function getting `(error)`. Error returning from S3 if something went wrong with upload. Relevant type in [here](src/S3PostUploader.jsx) (type Error ...)\n- `getCredentials` - function getting `(file, callback)`. File is chosen file. The `callback` is function\nresponsible for uploading file on S3 via POST with required credentials we were fetched from server.\n- `inputRef` - function getting reference to original file field. Used for save reference in component and\ncall actions later on it (as shown in simple example above).\n\n## Working Example\nIn [example](example) folder you can find working example with server. In readme of [example](example) are instructions\nfor running.\n\n![Output sample](example/public/s3-post-uploader-screencast.gif)\n\n## TODO\n\n- [x] make [Upload](example/src/components/Uploads/index.jsx) example component with flow as [S3PostUploader](src/S3PostUploader.jsx) is\n- [ ] add linter tests on CI with indicator in README\n- [ ] make better copy for `Contribution` section\n\n## Contribution\nPlease create an issue or open a pull request. Once you change something in `src/S3PostUploader.jsx` please don't\nforget to run `yarn build` which will compile and also update S3PostUploader componnent in [example](example). After\nthis make sure [example](example) app is still working.\n\n## Alternatives\n- 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))\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futrustdev%2Freact-s3-post-uploader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Futrustdev%2Freact-s3-post-uploader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futrustdev%2Freact-s3-post-uploader/lists"}