Back
File Storage UI
Multi-provider file storage with drag-and-drop upload (5 variants), progress tracking, presigned URLs, file dashboard, and category management. Supports AWS S3 and Cloudflare R2.
Next.jsMedia
What's Included
Multi-Provider (AWS S3 & Cloudflare R2)
Drag-and-Drop Upload (5 Variants)
Upload Progress Tracking
Presigned URL Generation
File Dashboard & Gallery
Category Management
Storage Statistics
File Type Validation
Installation
terminal
$ pnpm dlx shadcn@latest add https://file-storage-registry.vercel.app/r/file-storage.jsonHow to Use
1
Install the component
Run the shadcn CLI to add the file storage component.
pnpm dlx shadcn@latest add https://file-storage-registry.vercel.app/r/file-storage.json2
Configure storage provider
Set up your S3 or Cloudflare R2 credentials.
# AWS S3
AWS_ACCESS_KEY_ID="..."
AWS_SECRET_ACCESS_KEY="..."
AWS_S3_BUCKET="your-bucket"
AWS_REGION="us-east-1"
# Or Cloudflare R2
R2_ACCESS_KEY_ID="..."
R2_SECRET_ACCESS_KEY="..."
R2_BUCKET="your-bucket"
R2_ENDPOINT="https://..."3
Set up database
Run migrations to create file and category tables.
npx prisma migrate dev --name add-file-storage
npx prisma generate4
Use the file upload
Import and render the file upload component.
import { FileUpload } from '@/components/file-storage/file-upload'
import { FileDashboard } from '@/components/file-storage/file-dashboard'
// Upload page
export default function UploadPage() {
return <FileUpload variant="default" />
}Free
Open source component
Free to use · MIT License
CategoryMedia
PlatformsNext.js
Features8
Resources