Skip to content
Search...
⌘K
← Back to Guides

How can I use AWS S3 with Vercel?

Amazon Web Services (AWS) S3 is a popular way to upload and store files. You can use AWS S3 together with Vercel to upload, store, and retrieve objects.

With an Existing S3 Bucket

If you already have an existing AWS S3 bucket configured, you can retrieve (or generate) the access key and secret key for that IAM User. Ensure it has access to AmazonS3FullAccess.

Ensure the access key and secret key are added as Environment Variables inside your Vercel project.

1
import { S3Client } from '@aws-sdk/client-s3';
2


3
// AWS credentials are picked up from the environment
4
const s3Client = new S3Client({});
Example code to connect to the AWS SDK.

Creating a New S3 Bucket

We’ve created an example Next.js application that allows you to upload photos to an S3 bucket. After cloning the repository, the following steps will enable you to create an S3 bucket with the proper permissions using the AWS CDK:

Create a new IAM User

  1. Create a new IAM user
  2. Choose programmatic access
  3. Select "Attach existing policies directly"
  4. Add AmazonS3FullAccess

Save the access key and secret key for the IAM User

  1. This is used for programmatic access in the API Route

Install the AWS CLI

  1. Install the AWS CLI
  2. Run aws configure
  3. Enter your root AWS user access key and secret key
  4. Enter your default region

Create an .env.local file similar to .env.example

  1. Enter your access key and secret key from the IAM user
  2. Add your S3 bucket name

Run cdk commands

  1. Run the cdk bootstrap command
  2. Run cdk deploy to create an S3 bucket with an IAM policy

Test

  1. Run yarn dev to start the Next.js app at localhost:3000
  2. Choose a .png or .jpg file
  3. You should see your file successfully uploaded to S3

Uploading files on the server

You can use Vercel Serverless Functions to upload files to AWS S3 on the server. After creating an instance of the AWS S3 client, you can use upload to create a new object with the given file name and body (based on a stream).

pages/api/uploadToS3.ts

1
import { createReadStream } from 'fs';
2
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
3
import { NextApiRequest, NextApiResponse } from 'next';
4


5
export default async function handler(
6
  req: NextApiRequest,
7
  res: NextApiResponse,
8
) {
9
  const s3Client = new S3Client({});
10


11
  const uploadCommand = new PutObjectCommand({
12
    Bucket: process.env.S3_BUCKET_NAME,
13
    Key: 'file-name',
14
    Body: createReadStream('file-path'),
15
  });
16


17
  const response = await s3Client.send(uploadCommand);
18


19
  res.status(200).json(response);
20
}
An API Route to upload a file to an S3 bucket.

Uploading files in the browser

Alternatively, you can allow file uploads directly from the browser. For example, a user can select a file using an input, which then generates a pre-signed POST from an API Route to allow for secure uploads.

pages/index.tsx

1
export default function Upload() {
2
  return (
3
    <>
4
      <p>Upload a .png or .jpg image (max 1MB).</p>
5
      <input
6
        onChange={uploadPhoto}
7
        type="file"
8
        accept="image/png, image/jpeg"
9
      />
10
    </>
11
  );
12
}
13


14
const uploadPhoto = async (e: React.ChangeEvent<HTMLInputElement>) => {
15
  const file = e.target.files?.[0]!;
16
  const filename = encodeURIComponent(file.name);
17
  const fileType = encodeURIComponent(file.type);
18


19
  const res = await fetch(
20
    `/api/upload-url?file=${filename}&fileType=${fileType}`,
21
  );
22
  const { url, fields } = await res.json();
23
  const formData = new FormData();
24


25
  Object.entries({ ...fields, file }).forEach(([key, value]) => {
26
    formData.append(key, value as string);
27
  });
28


29
  const upload = await fetch(url, {
30
    method: 'POST',
31
    body: formData,
32
  });
33


34
  if (upload.ok) {
35
    console.log('Uploaded successfully!');
36
  } else {
37
    console.error('Upload failed.');
38
  }
39
};
A React component that uploads files using an input.

The API Route to generate the pre-signed POST is as follows:

pages/api/index.ts

1
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
2
import { createPresignedPost } from '@aws-sdk/s3-presigned-post';
3
import { NextApiRequest, NextApiResponse } from 'next';
4


5
export default async function handler(
6
  req: NextApiRequest,
7
  res: NextApiResponse,
8
) {
9
  const s3Client = new S3Client({});
10


11
  const post = await createPresignedPost(s3Client, {
12
    Bucket: process.env.S3_BUCKET_NAME,
13
    Key: req.query.file,
14
    Fields: {
15
      acl: 'public-read',
16
      'Content-Type': req.query.fileType,
17
    },
18
    Expires: 600, // seconds
19
    Conditions: [
20
      ['content-length-range', 0, 1048576], // up to 1 MB
21
    ],
22
  });
23


24
  res.status(200).json(post);
25
}
An API Route to generate a pre-signed POST URL.

If you need to support pausing and resuming uploads, as well as other advanced file upload strategies, explore libraries like Evaporate.

Couldn't find the guide you need?