Intermediate5 min readShare
Was this chapter helpful?
Share
Let users upload images, documents, and videos. Learn the UI patterns, storage options, and validation rules to get it right.
A dashed-border area where users drag files from their computer. Shows a visual highlight when a file hovers over it. The most intuitive upload experience.
Drag & drop files here
or click to browse
PNG, JPG, WebP up to 5MB
A simple 'Choose File' or 'Upload' button that opens the system file picker. Less flashy but works everywhere, including mobile. Always include this as a fallback.
Accepted formats: JPG, PNG. Max 5MB.
After selecting an image, show a thumbnail preview before uploading. Lets users confirm they picked the right file. Add a remove/replace button next to the preview.
vacation-photo.jpg
2.4 MB · 1920 × 1080
A horizontal bar that fills up as the file uploads. Shows percentage complete. Essential for large files so users know the upload is working and don't close the page.
8.1 MB · Complete
3.2 of 4.8 MB · Uploading...
1.5 MB · Waiting...
Let users select or drag multiple files at once. Show each file in a list with its own preview, progress bar, and remove button. Great for galleries and bulk imports.
Drop more files or browse
WebP — Best for web — small file size, great quality
PNG — Supports transparency, larger files
JPG/JPEG — Good for photos, no transparency
SVG — Vector graphics, scales infinitely
PDF — Universal document format
CSV — Spreadsheet data, easy to parse
DOCX — Microsoft Word documents
TXT — Plain text, simplest format
MP4 — Most common video format
WebM — Modern video, smaller size
MP3 — Audio files, widely supported
GIF — Animated images, large files
Object storage with zero egress fees. Upload files via API and serve them globally through Cloudflare's CDN. Great price-to-performance ratio.
Pros
No egress (download) fees — huge cost savings
Global CDN built in
S3-compatible API (easy to switch)
Cons
Newer service, smaller community
Dashboard UI is more basic
The industry standard for file storage. Extremely reliable and scalable. Every other storage service is basically copying S3's API.
Pros
Battle-tested, used by millions of apps
Massive ecosystem of tools and integrations
Fine-grained access controls
Cons
Egress fees add up fast
Complex pricing and configuration
File storage built into the Supabase platform. Upload files and manage access with the same auth system you use for your database.
Pros
Integrated with Supabase Auth and database
Simple API with row-level security
Generous free tier (1GB)
Cons
Tied to the Supabase ecosystem
Fewer advanced features than S3
A file upload service built specifically for Next.js. Handles the upload flow, validation, and storage so you just write a few lines of code.
Pros
Easiest setup for Next.js projects
Built-in file validation and type safety
Pre-built React upload components
Cons
Only works with Next.js/React
Less control over storage infrastructure
Always set a maximum file size. For profile photos, 5MB is plenty. For documents, 10-25MB. For videos, 100-500MB. Show a clear error message when a file is too large: 'File must be under 5MB.'
Only accept the file types you actually need. For an avatar upload, accept image/jpeg, image/png, image/webp. Reject everything else. This prevents users from accidentally uploading the wrong file.
For profile photos or banners, check the image dimensions. Minimum 200x200 for avatars, minimum 1200x630 for social share images. Resize on the server if needed.
Never trust client-side validation alone. Always re-check file size, type, and content on the server. Someone can bypass your frontend and send anything directly to your API.
Copy-paste these prompts to quickly add file upload features to your project.
"Add an image upload with drag and drop, preview, and 5MB limit. Accept only JPG, PNG, and WebP. Show an error message if the file is too large or wrong type."
"Add a profile photo upload that shows a circular preview of the selected image. Include a 'Remove' button. Resize the image to 400x400 on the server before saving."
"Add a multi-file upload for a photo gallery. Let users drag up to 10 images at once. Show thumbnails with individual progress bars and remove buttons for each file."
"Set up Uploadthing for file uploads in my Next.js app. Create an upload endpoint that accepts images up to 4MB and PDFs up to 16MB. Show upload progress in the UI."
"Add a document upload form that accepts PDFs and CSV files. Show the file name and size after selection. Upload to Supabase Storage and save the URL in the database."
