YourSaaS

Add a complete file upload system in ~8 minutes. Includes drag-and-drop upload zone, progress tracking, file grid, and delete — all backed by UploadThing (S3) and Prisma.

What's Included

File	Description
`file-manager.tsx`	Page layout — combines FileGrid + UploadZone
`file-grid.tsx`	Responsive grid of file cards with empty state
`file-card.tsx`	Name, size, type icon, date, download/delete actions
`upload-zone.tsx`	Drag-and-drop upload with progress bar and validation
`hooks/features/use-files.ts`	`useFiles`, `useUploadFile`, `useDeleteFile` hooks
`lib/features/uploadthing.ts`	Server-side UploadThing router with auth + file validation

Setup

Install dependencies

pnpm add uploadthing @uploadthing/react

Add environment variables

UPLOADTHING_TOKEN="your-uploadthing-token"

Get your token from uploadthing.com → Your App → API Keys.

Create the UploadThing route handler

Create app/api/uploadthing/route.ts:

import { createRouteHandler } from "uploadthing/next"
import { uploadRouter } from "@/lib/features/uploadthing"

export const { GET, POST } = createRouteHandler({ router: uploadRouter })

Create the files API routes

Create app/api/files/route.ts (GET — list user files) and app/api/files/[id]/route.ts (DELETE — remove a file). See README.md in components/features/file-uploads/ for full implementations.

Add to dashboard

// app/(dashboard)/dashboard/files/page.tsx
import { FileManager } from "@/components/features/file-uploads/file-manager"

export default function FilesPage() {
  return <FileManager />
}

The UploadedFile model is already in prisma/schema.prisma. Run pnpm prisma db push if you haven't already.

Environment Variables

Variable	Required	Description
`UPLOADTHING_TOKEN`	Yes	UploadThing project token

Verification

Start dev: pnpm dev
Navigate to /dashboard/files
Drag a file onto the upload zone — progress bar should appear
File appears in the grid after upload completes
Click download — verify the file URL works
Click delete — file is removed from the grid and storage
Check UploadThing dashboard to confirm files are stored