AWS S3 Image Upload

AWS S3 Image Upload is a Next.js example application from Vercel's examples repository that demonstrates a browser-to-S3 image upload flow using the AWS SDK's presigned POST URLs.

What is the AWS S3 Image Upload example?

This is an official example from Vercel's examples repository, built with Next.js. It takes a locally selected .png or .jpg file and uploads it directly to an S3 bucket through a presigned POST URL, so the image never goes through your application server. The project runs on Next.js and can be deployed to Vercel with a single click, or bootstrapped locally with create-next-app and pnpm.

Key Features

• Presigned POST uploads — Uses the AWS SDK's createPresignedPost method instead of getSignedUrlPromise so you can set minimum and maximum file sizes via content-length-range.
• Environment variable defaults — Works with standard AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_REGION, and AWS_BUCKET_NAME; the AWS SDK picks them up automatically.
• One-click Vercel deployment — The provided Deploy button clones the repo and asks for the four environment variables during setup.
• CORS configuration guide — Includes ready-to-paste CORS JSON that enables GET, PUT, POST, and DELETE from any origin.
• IAM policy guidance — Lists the exact S3 permissions required: s3:DeleteObject, s3:GetObject, s3:ListBucket, s3:PutObject, and s3:PutObjectAcl.
• Local development workflow — Runs with pnpm dev or npm run dev at localhost:3000.

Who is it for?

• Next.js developers — who need a working reference for direct browser-to-S3 uploads without building a custom API route.
• Full-stack engineers — who want to add user-generated image uploads to their app and learn how presigned POST policies work.
• Vercel users — who want a one-click-deployed demo they can adapt to their own S3 bucket and credentials.

What can you do with it?

• Add avatar or profile picture uploads — modify the component to include a user ID as metadata in the presigned POST policy.
• Build a photo-sharing feature — use the S3 bucket as the storage backend and serve uploaded images through a CDN or CloudFront.
• Learn file upload security — study how content-length-range and the IAM policy restrict what can be uploaded and by whom.

How does it work?

After deploying or running locally, you create an S3 bucket (with ACLs enabled and public-access-block adjusted) and an IAM user with the listed permissions. You then set the environment variables, configure CORS on the bucket with the included JSON, and start the app. The upload page accepts a .png or .jpg, generates a presigned POST URL via the AWS SDK, and uploads the file directly to S3.

FAQ

Is this template free?

Yes. This is an open-source example in the Vercel examples repository, so you can use and modify it freely. You only pay AWS for the S3 storage and requests you use.

What AWS services do I need?

You need an S3 bucket and an IAM user with access keys. The example depends on the AWS SDK's client-s3 package and does not require Lambda or API Gateway.

Does it work outside Vercel?

Yes. The example runs locally with pnpm dev and relies only on standard environment variables, so it can be hosted on any platform that supports Next.js.

How do I secure the uploads?

The example uses a presigned POST policy with content-length-range to cap file sizes, and the IAM policy restricts which actions the access key can perform.