Back to components
File storage component

File Storage UI

Drag-drop file uploads with S3 + R2 support, presigned URLs, and management.

Read full guideBrowse all components

Install

$ Run in your project root
pnpm dlx shadcn@latest add https://file-storage.desishub.com/r/file-storage.json

What it does

  • Multi-provider support: AWS S3 and Cloudflare R2
  • Drag-and-drop uploads with 5 visual variants
  • Real-time upload progress tracking via XHR
  • File management (track, list, delete) with presigned URLs
  • Full TypeScript support with Prisma DB integration

When to use

Use it

Apps requiring secure file uploads, multi-cloud storage, or file management dashboards.

Skip it

Local-only storage, or projects choosing UploadThing (use UploadThing SDK directly).

Prerequisites

  • Next.js with shadcn/ui
  • Prisma ORM
  • AWS S3 OR Cloudflare R2 bucket with credentials

Environment variables

NameDescription
DATABASE_URLDatabase connection string
AWS_S3_REGIONRequired if using S3
AWS_S3_BUCKET_NAMERequired if using S3
AWS_S3_ACCESS_KEY_IDRequired if using S3
AWS_S3_SECRET_ACCESS_KEYRequired if using S3
CLOUDFLARE_R2_ACCESS_KEY_IDRequired if using R2
CLOUDFLARE_R2_SECRET_ACCESS_KEYRequired if using R2
CLOUDFLARE_R2_ENDPOINTRequired if using R2
CLOUDFLARE_R2_BUCKET_NAMERequired if using R2
CLOUDFLARE_R2_PUBLIC_DEV_URLRequired if using R2

Files & routes added

  • /categories, /file-storage
  • /api/s3/upload, /api/s3/delete, /api/r2/upload, /api/r2/delete
  • /api/v1/categories/*, /api/v1/files, /api/v1/files/stats
  • Components: Dropzone.tsx, ErrorDisplay.tsx + management UI
  • Prisma: File, StorageProvider, Category models