Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dharmveer97/aws-image-uploading
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.
https://github.com/dharmveer97/aws-image-uploading
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
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/dharmveer97/aws-image-uploading
- Owner: dharmveer97
- Created: 2024-05-22T19:33:46.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-23T18:44:32.000Z (6 months ago)
- Last Synced: 2024-09-27T18:03:57.626Z (about 2 months ago)
- 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
- Language: JavaScript
- Homepage:
- Size: 110 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
# Setting up AWS S3 for Image Uploads
Follow these steps to enable image uploading to an AWS S3 bucket in your Next.js application:
## 1. Create an S3 Bucket
- Go to the [AWS S3 Management Console](https://ca-central-1.console.aws.amazon.com/s3/home?region=ca-central-1).
- Click on "Create bucket."
- Enter a unique bucket name and select the region from the URL (e.g., ca-central-1).
- Click "Create."
## 2. Set Up Environment Variables
Add the following environment variables to your `.env` file:
```dotenv
NEXT_PUBLIC_REGION=your-region
NEXT_PUBLIC_AWS_BUCKET=your-bucket-name
NEXT_PUBLIC_AWS_ACCESS_KEY_ID=your-access-key-id
NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY=your-secret-access-key
```
## 3. Create an S3 Bucket Policy
Add the following policy to your S3 bucket's CORS configuration to allow cross-origin requests:
```
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}
```
## 4. Configure Cross-Origin Resource Sharing (CORS)
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"http://localhost:3000",
"https://example.app",
"http://example.com",
"http://example.app"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
```
## Create IAM role
## Additional Information
- Customize the CORS policy according to your application's needs, specifying the allowed headers, methods, and origins.
- For security reasons, restrict permissions in the S3 bucket policy based on your application's requirements.
With these steps completed, your Next.js application should be configured to upload images to your AWS S3 bucket.
## Additional Information
- Customize the CORS policy according to your application's needs, specifying the allowed headers, methods, and origins.
- For security reasons, restrict permissions in the S3 bucket policy based on your application's requirements.
- 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.
- It is essential to carefully review and configure the bucket policy to ensure the security and integrity of your AWS S3 bucket.