{"id":17996593,"url":"https://github.com/maxbeatty/aws-s3-browser-upload-example","last_synced_at":"2025-03-26T04:30:39.430Z","repository":{"id":25972357,"uuid":"29414358","full_name":"maxbeatty/aws-s3-browser-upload-example","owner":"maxbeatty","description":"Example of uploading a file to AWS S3 from your browser using Node.js and AWS Signature Versioning 4","archived":false,"fork":false,"pushed_at":"2015-01-19T20:53:32.000Z","size":704,"stargazers_count":19,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T05:22:14.131Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxbeatty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-18T03:24:28.000Z","updated_at":"2022-06-05T05:34:39.000Z","dependencies_parsed_at":"2022-07-27T05:46:32.049Z","dependency_job_id":null,"html_url":"https://github.com/maxbeatty/aws-s3-browser-upload-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxbeatty%2Faws-s3-browser-upload-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxbeatty%2Faws-s3-browser-upload-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxbeatty%2Faws-s3-browser-upload-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxbeatty%2Faws-s3-browser-upload-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxbeatty","download_url":"https://codeload.github.com/maxbeatty/aws-s3-browser-upload-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245589121,"owners_count":20640228,"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","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":[],"created_at":"2024-10-29T21:15:08.839Z","updated_at":"2025-03-26T04:30:39.072Z","avatar_url":"https://github.com/maxbeatty.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AWS S3 Browser Upload Example\n\nVanilla JavaScript (and Node.js) example to upload a file directly, asynchronously (AJAX) to Amazon Web Services (AWS) Simple Storage Service (S3) from the browser using AWS Signature Version 4\n\n![example workflow](example.gif)\n\n## Setup\n\nYou'll need [Node.js](http://nodejs.org/) installed and an AWS account. There are no external dependencies code-wise.\n\n### IAM\n\nYou'll need an access key id (`AWS_ACCESS_KEY_ID`) and secret access key (`AWS_SECRET_ACCESS_KEY`)\n\n1. Create or choose an existing User\n2. On their profile, scroll down to the Security Credentials section and \"Manage Access Keys\"\n3. \"Create Access Key\" (limit 2 per user)\n\n**Replace [`AWS_ACCESS_KEY_ID` in `upload.html`](https://github.com/maxbeatty/aws-s3-browser-upload-example/blob/master/upload.html#L9) and use your own `AWS_SECRET_ACCESS_KEY` when starting the node server below**\n\n### S3\n\n1. \"Create Bucket\" in S3\n2. [Generate Policy](http://awspolicygen.s3.amazonaws.com/policygen.html) (sample below)\n\n    ```\n{\n  \"Version\": \"2008-10-17\",\n  \"Id\": \"Policy123456\",\n  \"Statement\": [\n  {\n    \"Sid\": \"Stmt123456\",\n    \"Effect\": \"Allow\",\n    \"Principal\": {\n      \"AWS\": \"*\"\n      },\n      \"Action\": [\n      \"s3:PutObject\"\n      ],\n      \"Resource\": \"arn:aws:s3:::your-bucket-name/*\"\n    }\n    ]\n  }\n    ```\n\n3. \"Edit bucket policy\" in the Permissions section of your bucket's Properties (save the policy you generated)\n4. \"Edit CORS Configuration\" in the Permissions section of your bucket's Properties (sample below)\n\n    ```\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003cCORSConfiguration xmlns=\"http://s3.amazonaws.com/doc/2006-03-01/\"\u003e\n  \u003cCORSRule\u003e\n    \u003cAllowedOrigin\u003e*\u003c/AllowedOrigin\u003e\n    \u003cAllowedMethod\u003ePOST\u003c/AllowedMethod\u003e\n    \u003cAllowedHeader\u003e*\u003c/AllowedHeader\u003e\n  \u003c/CORSRule\u003e\n\u003c/CORSConfiguration\u003e\n    ```\n\n5. \"Save\" your Permissions (just in case the other saves didn't save?)\n\nYour bucket should now be ready to upload files to.\n\n## Usage\n\n1. Start server (`AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY node index.js`)\n2. Open [http://localhost:8000](http://localhost:8000)\n3. Choose a file to upload (you'll see a progress bar and a link to your file when complete)\n\n## Questions? Problems?\n\nPlease create an [issue](https://github.com/maxbeatty/aws-s3-browser-upload-example/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxbeatty%2Faws-s3-browser-upload-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxbeatty%2Faws-s3-browser-upload-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxbeatty%2Faws-s3-browser-upload-example/lists"}