| name | slug | description | framework | deployUrl |
|---|---|---|---|---|
AWS S3 Image Upload |
aws-s3-image-upload |
Learn to use AWS S3 to upload images to your bucket. |
Next.js |
This is an example of a Next.js application allowing you to upload photos to an S3 bucket.
Option 1: Use an existing S3 bucket.
Retrieve your existing access key, secret key, S3 bucket region and name. Provide those values after clicking "Deploy" to automatically set the environment variables.
Option 2: Create an S3 bucket.
- Create a new IAM User:
- Choose programatic access.
- Select "Attach existing policies directly"
- Add
AmazonS3FullAccess.
- Save the access key and secret key for the IAM User.
- This is used for programmatic access in the API Route.
- Install the AWS CLI:
- Run
aws configure. - Enter your root AWS user access key and secret key.
- Enter your default region.
- Run
- Create an
.env.localfile similar to.env.example.- Enter your access key and secret key from the IAM user.
- You must configure cors, for the upload to work
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:DeleteObject", "s3:GetObject", "s3:ListBucket", "s3:PutObject", "s3:PutObjectAcl" ], "Resource": [ "arn:aws:s3:::BUCKET_NAME", "arn:aws:s3:::BUCKET_NAME/*" ] } ] }
3. Run `cdk bootstrap`.
4. Run `cdk deploy` to create an S3 bucket with an IAM policy.
5. Visit your newly created S3 bucket and retrieve the name and region.
6. Add the name and region to `.env.local`.
7. Run `yarn dev` to start the Next.js app at `localhost:3000`.
8. Choose a `.png` or `.jpg` file.
9. You should see your file successfully uploaded to S3.
This example uses [`createPresignedPost`](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#createPresignedPost-property) instead of [`getSignedUrlPromise`](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#getSignedUrlPromise-property) to allow setting max/min file sizes with `content-length-range`.
## Commands
- `yarn dev` – Starts the Next.js app at `localhost:3000`.
- `cdk deploy` – Deploy this stack to your default AWS account/region
- `cdk diff` – Compare deployed stack with current state
- `cdk synth` – Emits the synthesized CloudFormation template
### Clone and Deploy
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
npx create-next-app --example https://github.com/vercel/examples/tree/main/solutions/aws-s3-image-upload aws-s3-image-upload
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/solutions/aws-s3-image-upload aws-s3-image-upload
Copy the .env.example file in this directory to .env.local and set your AWS settings
cp .env.example .env.localNext, run Next.js in development mode:
npm install
npm run dev
# or
yarn
yarn devDeploy it to the cloud with Vercel (Documentation).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent