UploadThing is a type-safe file upload library for TypeScript web applications. Its FileRouter pattern keeps upload configuration, authentication middleware, and completion callbacks co-located on the server.
0 / 5 completed
1 / 5
What is a FileRouter in UploadThing?
A FileRouter in UploadThing is the server-side configuration object created with createUploadthing(). Each key is a named endpoint (a file route) that declares constraints like image({ maxFileSize: '4MB' }) and runs middleware for authentication before the upload proceeds.
2 / 5
What does createUploadthing() return?
createUploadthing() is called once and returns a builder function, typically named f. You call f({ image: { maxFileSize: '4MB' } }).middleware(async ({ req }) => { ... }).onUploadComplete(async ({ file }) => { ... }) to define a route. The chaining is fully typed, ensuring middleware return values are available in the completion callback.
3 / 5
What React hook does UploadThing provide for triggering uploads from the client?
useUploadThing(routeName) is the primary client hook. It returns { startUpload, isUploading, permittedFileInfo }. You call startUpload(files) with a FileList or File[], and it handles chunking, progress tracking, and calling your onUploadComplete server callback.
4 / 5
What is the purpose of metadata returned from the UploadThing middleware?
The middleware function in UploadThing can return an object (the metadata) that is forwarded to the onUploadComplete callback. A typical pattern is return { userId: session.user.id } so the completion handler can save the file URL alongside the correct user record in the database.
5 / 5
What does the UploadThing <UploadButton> component provide out of the box?
UploadButton is a pre-built UI component from @uploadthing/react that wires up to a named file route endpoint. It enforces the route's accepted file types (shown in the file picker), displays a progress indicator, and calls onClientUploadComplete and onUploadError callbacks after the upload finishes.