{"id":15155270,"url":"https://github.com/dharmveer97/aws-image-uploading","last_synced_at":"2026-02-19T05:31:48.214Z","repository":{"id":241174462,"uuid":"804541785","full_name":"dharmveer97/aws-image-uploading","owner":"dharmveer97","description":"Code and resources for optimizing image uploading speed to AWS S3 buckets in a Next.js app directory using @apollo/server , including directory API routes for AWS S3 bucket integration. Utilizes @aws-sdk, @aws-sdk/client-s3, @as-integrations/next, dropzone, graphql, and graphql-tag.","archived":false,"fork":false,"pushed_at":"2024-05-23T18:44:32.000Z","size":113,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T18:02:09.338Z","etag":null,"topics":["apollo-server","aws","aws-s3","aws-sdk","browser-image-compression","buckets3","dropzone","formik","getsignedurl","graphql","image-processing","imagecompression","imageupload","multipleimagepicker","next","next-js","nextjs-app-router","nextjs14","sdk","yup"],"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/dharmveer97.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-22T19:33:46.000Z","updated_at":"2024-12-29T05:09:07.000Z","dependencies_parsed_at":"2024-05-22T20:47:36.867Z","dependency_job_id":"01011832-0c62-4a83-bc1e-cb3cf4c7a0d5","html_url":"https://github.com/dharmveer97/aws-image-uploading","commit_stats":null,"previous_names":["dharmveer97/aws-image-uploading"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dharmveer97/aws-image-uploading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Faws-image-uploading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Faws-image-uploading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Faws-image-uploading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Faws-image-uploading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dharmveer97","download_url":"https://codeload.github.com/dharmveer97/aws-image-uploading/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dharmveer97%2Faws-image-uploading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29604552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T05:11:50.834Z","status":"ssl_error","status_checked_at":"2026-02-19T05:11:38.921Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["apollo-server","aws","aws-s3","aws-sdk","browser-image-compression","buckets3","dropzone","formik","getsignedurl","graphql","image-processing","imagecompression","imageupload","multipleimagepicker","next","next-js","nextjs-app-router","nextjs14","sdk","yup"],"created_at":"2024-09-26T18:04:05.392Z","updated_at":"2026-02-19T05:31:48.192Z","avatar_url":"https://github.com/dharmveer97.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\n\u003c!-- [/api/graphql](http://localhost:3000/api/graphql) --\u003e\n\n# Setting up AWS S3 for Image Uploads\n\nFollow these steps to enable image uploading to an AWS S3 bucket in your Next.js application:\n\n## 1. Create an S3 Bucket\n\n- Go to the [AWS S3 Management Console](https://ca-central-1.console.aws.amazon.com/s3/home?region=ca-central-1).\n- Click on \"Create bucket.\"\n- Enter a unique bucket name and select the region from the URL (e.g., ca-central-1).\n- Click \"Create.\"\n\n## 2. Set Up Environment Variables\n\nAdd the following environment variables to your `.env` file:\n\n```dotenv\nNEXT_PUBLIC_REGION=your-region\nNEXT_PUBLIC_AWS_BUCKET=your-bucket-name\nNEXT_PUBLIC_AWS_ACCESS_KEY_ID=your-access-key-id\nNEXT_PUBLIC_AWS_SECRET_ACCESS_KEY=your-secret-access-key\n```\n\n## 3.  Create an S3 Bucket Policy\n\nAdd the following policy to your S3 bucket's CORS configuration to allow cross-origin requests:\n\n```\n{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"PublicReadGetObject\",\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::YOUR_BUCKET_NAME/*\"\n        }\n    ]\n}\n```\n\n## 4. Configure Cross-Origin Resource Sharing (CORS)\n\n```\n[\n    {\n        \"AllowedHeaders\": [\n            \"*\"\n        ],\n        \"AllowedMethods\": [\n            \"GET\",\n            \"PUT\",\n            \"POST\",\n            \"DELETE\",\n            \"HEAD\"\n        ],\n        \"AllowedOrigins\": [\n            \"http://localhost:3000\",\n            \"https://example.app\",\n            \"http://example.com\",\n            \"http://example.app\"\n        ],\n        \"ExposeHeaders\": [],\n        \"MaxAgeSeconds\": 3000\n    }\n]\n\n```\n\n## Create IAM role\n\n\n\n\n## Additional Information\n\n- Customize the CORS policy according to your application's needs, specifying the allowed headers, methods, and origins.\n- For security reasons, restrict permissions in the S3 bucket policy based on your application's requirements.\n\n With these steps completed, your Next.js application should be configured to upload images to your AWS S3 bucket.\n\n## Additional Information\n\n- Customize the CORS policy according to your application's needs, specifying the allowed headers, methods, and origins.\n\n- For security reasons, restrict permissions in the S3 bucket policy based on your application's requirements.\n\n- Additionally, in the policy section, you can create policies for specific actions such as requests, updates, or deletes. It is not recommended to provide full access for the live environment.\n\n- It is essential to carefully review and configure the bucket policy to ensure the security and integrity of your AWS S3 bucket.\n\n\u003c!--\n# Read (1 of 62)\n#   - GetObject\n# Write (2 of 63)\n#   - DeleteObject\n#   - PutObject\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdharmveer97%2Faws-image-uploading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdharmveer97%2Faws-image-uploading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdharmveer97%2Faws-image-uploading/lists"}