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: