Getting started with Express
Added in
v5.6
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
Creating your first FileRoute
All files uploaded to uploadthing are associated with a FileRoute. The following is a very minimalistic example, with a single FileRoute "imageUploader". Think of a FileRoute similar to an endpoint, it has:
- Permitted types ["image", "video", etc]
- Max file size
- (Optional)
middleware
to authenticate and tag requests onUploadComplete
callback for when uploads are completed
To get full insight into what you can do with the FileRoutes, please refer to the File Router API.
import { createUploadthing, type FileRouter } from "uploadthing/express";
const f = createUploadthing();
export const uploadRouter = {
imageUploader: f({
image: {
maxFileSize: "4MB",
maxFileCount: 4,
},
}).onUploadComplete((data) => {
console.log("upload completed", data);
}),
} satisfies FileRouter;
export type OurFileRouter = typeof uploadRouter;
Create an API route using the FileRouter
Note: You need to serve this API from /api/uploadthing
on your application.
import express from "express";
import { createRouteHandler } from "uploadthing/express";
import { uploadRouter } from "./uploadthing";
const app = express();
app.use(
"/api/uploadthing",
createRouteHandler({
router: uploadRouter,
config: { ... },
}),
);
See configuration options in server API reference
Use the FileRouter in your app
Client side usage differs ever so slightly from the fullstack framework setups when using a separate backend server. You'll need to set the URL of your server when you generate the components and helpers.
import { generateUploadButton } from "@uploadthing/react";
export const UploadButton = generateUploadButton({
url: "https://your-server.com/api/uploadthing",
});
// ...
Please note that you might need to setup some CORS rules on your server to allow the client to make requests to the server.
For the remaining usage, please refer to client side examples of the fullstack framework guides: