File Upload Component

Design a file upload component that handles large files, shows progress, and provides good UX.

R - Requirements

Key Questions:

• Maximum file size? (10MB, 100MB, 1GB+)
• File types allowed? (images, documents, videos)
• Single or multiple files?
• Progress feedback needed?
• Offline support required?
• Drag & drop needed?

Common Answers:

• Images: 10MB max, JPG/PNG/WebP
• Documents: 50MB max, PDF/DOCX
• Videos: 1GB+ with chunking

A - Architecture

Upload Flow:

Component Architecture:

Architecture Decisions:

• Chunked uploads for files > 10MB (prevents timeouts)
• Concurrent upload limit (3-5 simultaneous) to avoid overwhelming server
• Retry mechanism with exponential backoff for failed chunks
• Client-side validation before upload (saves bandwidth)
• MVC pattern (View → Controller → Model → Services)

Relevant Content:

• File Upload Architecture - High-level design
• File Chunking - Chunked uploads

D - Data Model

State Management:

• Upload queue (pending, uploading, completed, failed)
• File metadata (name, size, type, progress)
• Chunk tracking for large files

Persistence:

• Resume interrupted uploads (store chunk info)
• Upload history (localStorage/IndexedDB)

Relevant Content:

• File Hashing - Deduplication
• Concurrent Upload Limiter - Rate limiting

I - Interface

Features:

• Drag & drop zone (visual feedback)
• File preview (thumbnails for images)
• Progress indicators (per file, overall)
• Error states (validation, network, server)
• Cancel/retry buttons

Accessibility:

• Keyboard navigation
• Screen reader announcements
• ARIA labels for progress
• Focus management

Relevant Content:

• File Preview Factory - Preview generation
• Accessible Forms - Form patterns

O - Optimizations

Performance:

• Image compression before upload (client-side)
• Chunked uploads for large files
• Concurrent limit to avoid overwhelming server
• Request deduplication (same file, same hash)

Network:

• Network-aware uploads (adjust chunk size based on connection)
• Retry with backoff for failed chunks
• Resume capability for interrupted uploads

UX:

• Optimistic UI (show success before server confirms)
• Progressive enhancement (works without JS for basic upload)

Relevant Content:

• Image Compression - Client-side compression
• Network-Aware Components - Adapt to network
• Optimistic Updates - Instant feedback

Implementation Checklist

• File size validation (client + server)
• File type validation (MIME type check)
• Chunked upload for large files
• Progress tracking and display
• Retry mechanism with backoff
• Drag & drop support
• Keyboard accessibility
• Image preview/compression
• Concurrent upload limiting
• Resume interrupted uploads

Common Pitfalls

❌ No chunking for large files → Timeouts, poor UX
✅ Chunk files > 10MB, upload in parallel

❌ No progress feedback → Users don't know status
✅ Show progress per file and overall

❌ No retry mechanism → Failed uploads frustrate users
✅ Auto-retry with exponential backoff

❌ No client-side validation → Wastes bandwidth
✅ Validate before upload, show errors immediately