{"id":13565759,"url":"https://github.com/dabit3/react-amplify-appsync-files-s3","last_synced_at":"2025-11-17T15:16:19.497Z","repository":{"id":47547785,"uuid":"194118759","full_name":"dabit3/react-amplify-appsync-files-s3","owner":"dabit3","description":"An example project showing how to upload and download public and private images in GraphQL using AppSync and S3","archived":false,"fork":false,"pushed_at":"2021-06-16T02:08:58.000Z","size":1230,"stargazers_count":70,"open_issues_count":17,"forks_count":59,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-09T09:59:00.231Z","etag":null,"topics":["amplify","appsync","graphql","react","serverless"],"latest_commit_sha":null,"homepage":"","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/dabit3.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":"2019-06-27T15:19:29.000Z","updated_at":"2023-04-05T07:59:02.000Z","dependencies_parsed_at":"2022-09-23T10:15:24.097Z","dependency_job_id":null,"html_url":"https://github.com/dabit3/react-amplify-appsync-files-s3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dabit3/react-amplify-appsync-files-s3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-amplify-appsync-files-s3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-amplify-appsync-files-s3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-amplify-appsync-files-s3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-amplify-appsync-files-s3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/react-amplify-appsync-files-s3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-amplify-appsync-files-s3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284905167,"owners_count":27082394,"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-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["amplify","appsync","graphql","react","serverless"],"created_at":"2024-08-01T13:01:54.908Z","updated_at":"2025-11-17T15:16:19.481Z","avatar_url":"https://github.com/dabit3.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## File uploads and downloads with React, AWS Amplify, AWS AppSync, and Amazon S3\n\nThis is an example project showing how to upload and download files and images using AWS Amplify, AWS AppSync, and Amazon S3\n\n![How to upload files and images with GraphQL](header.jpg)\n\nThis project goes along with the [GraphQL Tutorial - How to Manage Image \u0026 File Uploads \u0026 Downloads with AWS AppSync \u0026 AWS Amplify](https://dev.to/dabit3/graphql-tutorial-how-to-manage-image-file-uploads-downloads-with-aws-appsync-aws-amplify-hga) on [Dev.to](https://dev.to/).\n\n### The question\n\nHow do I upload images and files using GraphQL with AWS AppSync?\n\n### The solution\n\nThere are a few parts to this solution:\n\n* You must first upload the image to a storage solution (in this example, Amazon S3)\n* After you have finished uploading the image, you will need to store a reference to this image in a database using a GraphQL mutation.\n* When you want to view a public image (public bucket), you need to:\n  * Query the image URL from your database using GraphQL\n* When you want to view a private image (non-public bucket), you need to do two things:\n  * First, query the image reference from your database using GraphQL\n  * Get a signed URL for the image from S3\n\nIn this example, I show how to:\n\n1. Store images using GraphQL, AppSync, and S3 (both using public and private access)\n2. Fetch a list of images and render them in a React application\n2. Fetch a single image and render it in a React application\n\n## To deploy this app\n\n### Amplify CLI\n\n1. Clone the project and change into the directory\n\n```sh\ngit clone https://github.com/dabit3/react-amplify-appsync-files-s3.git\n\ncd react-amplify-appsync-s3\n```\n\n2. Install the dependencies\n\n```sh\nnpm install\n\n# or\n\nyarn\n```\n\n3. Initialize and deploy the amplify project\n\n```sh\namplify init\n\namplify push\n```\n\n4. Run the app\n\n```sh\nnpm start\n```\n\n5. Change the bucket policy [in your S3 bucket](https://s3.console.aws.amazon.com/s3/home) for files in the `images` folder to be public (in order for the Product images to be publicly viewable):\n\n```json\n{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::\u003cYOUR_BUCKET_NAME\u003e/public/images/*\"\n        }\n    ]\n}\n```\n\n6. Render either the private (Users) or public (Products) example in __src/App.js__:\n\n```javascript\nimport React from 'react'\nimport Products from './Products'\nimport Users from './Users'\n\nfunction App() {\n  return (\n    \u003cUsers /\u003e\n    // or \u003cProducts /\u003e\n  )\n}\n\nexport default App;\n\n```\n\n### Amplify Console\n\nClick the button to deploy this application to the Amplify console.\n\n[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/dabit3/react-amplify-appsync-files-s3)\n\nThen change the bucket policy [in your S3 bucket](https://s3.console.aws.amazon.com/s3/home) for files in the `images` folder to be public (in order for the Product images to be publicly viewable):\n\n```json\n{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::\u003cYOUR_BUCKET_NAME\u003e/public/images/*\"\n        }\n    ]\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-amplify-appsync-files-s3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Freact-amplify-appsync-files-s3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-amplify-appsync-files-s3/lists"}