AWS S3 Image Upload

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 or npm run dev, and test the upload functionality.
  • 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.
  • Commands:
    • pnpm dev or npm 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.

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.