What is File Upload?

File Upload lets users select files from their device to send to your server. Includes file picker button, drag-and-drop zone, progress indicator, preview, and error handling. Critical for apps that handle documents, images, videos, or any user-generated files.

When Should You Use This?

Use file upload for profile pictures, document submission, image galleries, CSV imports, attachment features. Support both click-to-browse and drag-and-drop. Show file size/type requirements upfront. Display progress bar for large files. Generate previews for images. Validate file type and size before upload. Provide clear error messages.

Common Mistakes to Avoid

• •No drag-drop—users expect it; provide visual drop zone with hover state
• •No progress indicator—users need to see upload status, especially for large files
• •No file preview—show thumbnail or filename after selection, before upload
• •Accepting all file types—validate and restrict to required formats (images, PDFs, etc.)
• •No error recovery—if upload fails, let users retry without re-selecting file

Real-World Examples

• •Linear—drag-drop images into issue descriptions, instant preview, progress bar
• •Dropbox—drag-drop files anywhere, shows all files uploading in queue
• •Gmail—attach files via drag-drop or button, shows size limit, compresses images
• •Notion—drag images/files into pages, inline preview, automatic upload