Getting started with Fetch / Edge Runtimes

UploadThing is compatible with any runtime that follow the WinterCG (opens in a new tab).

Common setup

Package Setup

Install the package

npm install uploadthing

Add env variables

💡

If you don't already have a uploadthing secret key, sign up (opens in a new tab) and create one from the dashboard! (opens in a new tab)

UPLOADTHING_SECRET=... # A secret key for your app (starts with sk_live_)
UPLOADTHING_APP_ID=... # Your app id

Set Up A FileRouter

All files uploaded to uploadthing are associated with a FileRoute. Following example is very minimalistic. To get full insight into what you can do with the FileRoutes, please refer to the File Router API.

uploadthing.ts

import { createUploadthing, type FileRouter } from "uploadthing/server";
 
const f = createUploadthing();
 
export const uploadRouter = {
  videoAndImage: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 4,
    },
    video: {
      maxFileSize: "16MB",
    },
  }).onUploadComplete((data) => {
    console.log("upload completed", data);
  }),
} satisfies FileRouter;
 
export type OurFileRouter = typeof uploadRouter;

Runtimes-specific setup

Astro

pages/api/uploadthing.ts

import { createServerHandler } from "uploadthing/server";
 
import { uploadRouter } from "../../server/uploadthing";
 
export const { GET, POST } = createServerHandler({
  router: uploadRouter,
  config: {
    uploadthingId: import.meta.env.UPLOADTHING_APPID,
    uploadthingSecret: import.meta.env.UPLOADTHING_SECRET,
    callbackUrl: "http://localhost:4321/api/uploadthing",
  },
});

Elysia

src/index.ts

import { Elysia } from "elysia";
import { uploadRouter } from "uploadthing.ts";
 
import { createServerHandler } from "uploadthing/server";
 
const { GET, POST } = createServerHandler({
  router: uploadRouter,
});
 
const app = new Elysia().get("/", () => "Hello Elysia");
 
app.group("/api/uploadthing", (app) =>
  app
    .post("/", (context) => POST(context.request))
    .get("/", (context) => GET(context.request)),
);
 
app.listen(3000);

Hono

src/index.ts

import { Hono } from "hono";
 
import { createServerHandler } from "uploadthing/server";
 
import { uploadRouter } from "./uploadthing.ts";
 
const { GET, POST } = createServerHandler({
  router: uploadRouter,
});
 
const app = new Hono();
 
const ut = new Hono()
  .get("/", (context) => GET(context.req.raw))
  .post("/", (context) => POST(context.req.raw));
 
app.route("/api/uploadthing", ut);
 
export default app;

Use the FileRouter in your app

Please refer to client side examples: