Skip to content

uploadthing

Use when implementing file uploads with Uploadthing — type-safe uploads, image processing, or file management in Next.js or React applications. Also use when choosing a file upload solution or handling user-generated content.

ModelSource
sonnetpack: storage
Full Reference

┏━ 🔧 uploadthing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when implementing file uploads with Upload… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Type-safe file uploads for TypeScript. Handles presigned URLs, S3 ingestion, and CDN delivery with no S3 config required. SDK: uploadthing v7.x + @uploadthing/react v7.x.

ItemValue
Installnpm install uploadthing @uploadthing/react
Env varUPLOADTHING_TOKEN=... (from uploadthing.com/dashboard > API Keys)
API routeapp/api/uploadthing/route.ts
File routerapp/api/uploadthing/core.ts
Component exportsutils/uploadthing.ts
Dashboarduploadthing.com/dashboard
I want to…File
Install, configure environment variables, and set up project structurereference/setup.md
Define file routes, middleware, validators, and the upload lifecyclereference/file-router.md
Use UploadButton, UploadDropzone, or build custom upload UIreference/upload-component.md
Upload files server-side, manage files via UTApi, or integrate with a databasereference/server-upload.md
Delete files, update ACL, rename, or generate signed URLs for private filesreference/delete.md

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.