AWS S3 Image Upload
Type: Code
Framework: Next.js
CSS: Vanilla CSS
Database: AWS S3
- Overview: A Next.js application example enabling photo uploads to an AWS S3 bucket.
- How to Use:
- Option 1: Utilize an existing S3 bucket by providing your access key, secret key, bucket region, and name upon deployment to configure environment variables automatically.
- Option 2: Create a new S3 bucket following these steps:
- Bootstrap the project using
pnpm create next-app
with the provided GitHub example link. - Set up a new S3 bucket with specific public access and ownership settings.
- Create a new IAM user with direct policy attachments for necessary S3 permissions.
- Save the access and secret keys from the newly created IAM user.
- Configure an
.env.local
file with your AWS credentials and S3 bucket details, following the.env.example
structure. - Set up CORS on your S3 bucket to allow uploads.
- Run the application locally with
pnpm dev
ornpm run dev
, and test the upload functionality.
- Bootstrap the project using
- Credentials and Environment Variables:
- AWS credentials and region can be directly used as environment variables (e.g.,
AWS_ACCESS_KEY_ID
,AWS_SECRET_ACCESS_KEY
,AWS_REGION
), simplifying the AWS SDK usage.
- AWS credentials and region can be directly used as environment variables (e.g.,
- Commands:
pnpm dev
ornpm run dev
to start the application locally.
- Additional Resources:
- Documentation on AWS environment variables, using PresignedPost URLs, initializing S3Client, generating a presigned post, and setting AWS ACL permissions.