{"id":19200986,"url":"https://github.com/dabit3/react-appsync-graphql-images-s3","last_synced_at":"2025-11-17T15:16:24.028Z","repository":{"id":49516543,"uuid":"193856759","full_name":"dabit3/react-appsync-graphql-images-s3","owner":"dabit3","description":"An example project showing how to upload and download images from S3 using AppSync and S3","archived":false,"fork":false,"pushed_at":"2021-06-16T02:03:00.000Z","size":991,"stargazers_count":14,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-09T09:59:00.256Z","etag":null,"topics":["aws","aws-appsync","graphql","s3","serverless"],"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/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-26T07:55:12.000Z","updated_at":"2022-04-25T16:10:25.000Z","dependencies_parsed_at":"2022-08-31T22:00:28.290Z","dependency_job_id":null,"html_url":"https://github.com/dabit3/react-appsync-graphql-images-s3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dabit3/react-appsync-graphql-images-s3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-appsync-graphql-images-s3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-appsync-graphql-images-s3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-appsync-graphql-images-s3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-appsync-graphql-images-s3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabit3","download_url":"https://codeload.github.com/dabit3/react-appsync-graphql-images-s3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabit3%2Freact-appsync-graphql-images-s3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284905175,"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":["aws","aws-appsync","graphql","s3","serverless"],"created_at":"2024-11-09T12:35:49.404Z","updated_at":"2025-11-17T15:16:24.010Z","avatar_url":"https://github.com/dabit3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Image uploads and downloads with React, AWS Amplify, AWS AppSync, and Amazon S3\n\nThis is an example project showing how to upload and download images from S3 using AWS Amplify, AWS AppSync, and Amazon S3\n\n### The question\n\nHow do I securely upload images 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 (Amazon S3)\n* After you have finished uploading the image, you will then be given a `key` to reference this image. You then need to store this reference in a database using a GraphQL mutation.\n* When you want to view this image, 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\n2. Fetch a list of images and render them in a React application\n\n\u003e To view the main code for this app, open [src/App.js](https://github.com/dabit3/react-amplify-appsync-s3/blob/master/src/App.js)\n\n## To deploy this app\n\n1. Clone the project and change into the directory\n\n```sh\ngit clone https://github.com/dabit3/react-amplify-appsync-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```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-appsync-graphql-images-s3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabit3%2Freact-appsync-graphql-images-s3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabit3%2Freact-appsync-graphql-images-s3/lists"}