UploadKit
SDK@uploadkitdev/next

Backend Adapters

Use UploadKit with Express, Fastify, or Hono — same FileRouter, different runtime.

UploadKit ships adapters for Express, Fastify, and Hono. Each adapter wraps the same createUploadKitHandler but adapts the request/response interface for the target framework. Your FileRouter definition is identical across all adapters — swap the adapter without changing any frontend code.

Express

import express from 'express';
import { createExpressHandler } from '@uploadkitdev/next/express';
import { ourFileRouter } from './file-router';

const app = express();

// Express v5 uses named wildcards
app.all(
  '/api/uploadkit/{*path}',
  createExpressHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);

// Express v4 uses a positional wildcard
// app.all('/api/uploadkit/*', createExpressHandler({ router: ourFileRouter, apiKey: process.env.UPLOADKIT_API_KEY }));

Fastify

import Fastify from 'fastify';
import { createFastifyHandler } from '@uploadkitdev/next/fastify';
import { ourFileRouter } from './file-router';

const fastify = Fastify();

fastify.all(
  '/api/uploadkit/*',
  createFastifyHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);

Hono

import { Hono } from 'hono';
import { createHonoHandler } from '@uploadkitdev/next/hono';
import { ourFileRouter } from './file-router';

const app = new Hono();

app.all(
  '/api/uploadkit/*',
  createHonoHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);

Pointing React components at your adapter

Set the endpoint prop (or configure UploadKitProvider) to the URL where your adapter is mounted:

<UploadButton
  route="imageUploader"
  endpoint="/api/uploadkit"
/>

This is identical to how you'd point components at a Next.js route handler — the adapter URL is the only thing that changes.

All adapters share the same FileRouter definition — you can move from Next.js to Express (or any other supported framework) without changing your frontend components or your FileRouter.

Config options

Each adapter accepts the same UploadKitHandlerConfig as createUploadKitHandler:

OptionTypeRequiredDescription
routerFileRouterYesYour application's file router.
apiKeystringConditionalYour UploadKit API key (uk_live_…). Required in managed mode.
storageS3CompatibleStorageConditionalBYOS configuration. Required in bring-your-own-storage mode.

Provide either apiKey (managed mode) or storage (BYOS mode). Supplying both throws MISSING_CONFIG.

See the Next.js API reference for the full UploadKitHandlerConfig shape.

On this page