File uploads for Next.js

pnpm add @uploadkitdev/next @uploadkitdev/react

import { createUploadKitHandler } from '@uploadkitdev/next';
import type { FileRouter } from '@uploadkitdev/next';
import { auth } from '@/lib/auth'; // your Auth.js or Clerk auth helper

const router = {
  // Accept profile images up to 4 MB
  imageUploader: {
    maxFileSize: '4MB',
    allowedTypes: ['image/*'],
    onUploadComplete: async ({ file, metadata }) => {
      console.log('Image uploaded by user:', metadata.userId, file.url);
    },
  },

  // PDF / Word documents up to 16 MB, max 5 files at once
  documentUploader: {
    maxFileSize: '16MB',
    maxFileCount: 5,
    allowedTypes: ['application/pdf', 'application/msword'],
    middleware: async ({ req }) => {
      const session = await auth();
      if (!session?.user?.id) {
        throw new Error('Unauthorized');
      }
      // Anything returned here is passed to onUploadComplete as `metadata`
      return { userId: session.user.id };
    },
    onUploadComplete: async ({ file, metadata }) => {
      console.log('Document uploaded:', file.key, 'by', metadata.userId);
    },
  },
} satisfies FileRouter;

export const { GET, POST } = createUploadKitHandler({ router });

# Server-side only. Never prefix this with NEXT_PUBLIC_
UPLOADKIT_API_KEY=uk_live_xxxxxxxxxxxxxxxxxxxxx

import { UploadKitProvider } from '@uploadkitdev/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <UploadKitProvider endpoint="/api/uploadkit">
          {children}
        </UploadKitProvider>
      </body>
    </html>
  );
}

import { UploadDropzone } from '@uploadkitdev/react';

export default function DocumentsPage() {
  return (
    <UploadDropzone
      route="documentUploader"
      onUploadComplete={(files) => {
        console.log('Documents uploaded:', files);
      }}
    />
  );
}

import { generateReactHelpers } from '@uploadkitdev/react';
import type { FileRouter } from '@/app/api/uploadkit/route';

// Re-export typed components — route prop is now typed to your route names
export const { UploadButton, UploadDropzone, UploadModal, useUploadKit } =
  generateReactHelpers<FileRouter>();

export const { GET, POST } = createUploadKitHandler({
  router,
  storage: {
    endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    region: 'auto',
    accessKeyId: process.env.R2_ACCESS_KEY_ID!,
    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
    bucket: process.env.R2_BUCKET_NAME!,
  },
});