UppyNextS3Multipart

This is a library designed to make it simple to integrate the Uppy uploader library with AWS S3 Multipart Uploads while using a NextJS server.

Normally Uppy wants you to include their Companion server for doing this, but it's a little bit overkill for this simple use case, and it means you'd have to switch to using Express, which causes you to lose many of the benefits of the NextJS server.

Setup

First install this library with yarn add uppy-next-s3-multipart or npm install uppy-next-s3-multipart

Then, create a new API endpoint at the location of your choosing. This endpoint should redirect all of its calls to new UppyNextS3MultipartEndpoint(...).handle(req, res). In this example, I'm creating it at pages/api/uppy-aws/[endpoint].ts:

1import { UppyFile } from '@uppy/core';
2import { S3 } from 'aws-sdk';
3import type { NextApiRequest, NextApiResponse } from 'next'
4import { v4 as uuid } from 'uuid';
5import { UppyNextS3MultipartEndpoint } from uppy-next-s3-multipart';
6
7const S3_ACCESS_KEY_ID = process.env.S3_ACCESS_KEY_ID;
8const S3_SECRET_ACCESS_KEY = process.env.S3_SECRET_ACCESS_KEY;
9const S3_REGION = process.env.S3_REGION;
10const S3_BUCKET_NAME = process.env.S3_BUCKET_NAME ?? '';
11
12const EXPIRE_TIME_SEC = 1 * 60 * 60;
13
14const s3 = new S3({
15  credentials: {
16    accessKeyId: S3_ACCESS_KEY_ID ?? '',
17    secretAccessKey: S3_SECRET_ACCESS_KEY ?? '',
18  },
19  region: S3_REGION,
20});
21
22export type FilenameGenParams = { prefix: string };
23
24const endpointHandler = new UppyNextS3MultipartEndpoint<FilenameGenParams>(
25  s3,
26  S3_BUCKET_NAME,
27  EXPIRE_TIME_SEC,
28  // This is used to specify how you would like the file to be named
29  // In this example, I am passing a prefix from the client, then adding
30  // a year-month folder, then a uuid with the filename appended at the end
31  (file, params) => {
32    const date = new Date();
33    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
34    const year = date.getUTCFullYear();
35    return `${params.prefix}/${year}-${month}/${uuid()}_${file.name}`;
36  }
37);
38
39export default async function handler(
40  req: NextApiRequest,
41  res: NextApiResponse,
42) {
43  return endpointHandler.handle(req, res);
44}

Finally, on the client side, create your Uppy instance as you normally would, but pass in the options from getUppyNextS3MultipartOptions(endpoint). For example:

1import '@uppy/core/dist/style.css'
2import '@uppy/dashboard/dist/style.css'
3
4import Uppy from '@uppy/core'
5import { Dashboard } from '@uppy/react'
6import { AwsS3Multipart } from 'uppy'
7import { getUppyNextS3MultipartOptions } from 'uppy-next-s3-multipart'
8import { FilenameGenParams } from '../pages/api/uppy-aws/[endpoint]'
9
10const uppy = new Uppy();
11uppy.use(AwsS3Multipart,
12  getUppyNextS3MultipartOptions<FilenameGenParams>(
13    // The endpoint you saved the earlier file at. No trailing slash.
14    '/api/uppy-aws',
15    // This is where we pass in the params used for filename generation
16    { prefix: 'music' },
17  ));
18
19export function FileUploadExample() {
20  return (
21    <Dashboard uppy={uppy} />
22  )
23}