How would you implement a file upload with progress in React?

🧩 Scenario

You need a reusable file upload component that:

• Shows upload progress (percentage + bytes)
• Allows cancelling an in-flight upload
• Supports retrying on failure
• Handles multiple file uploads with per-file progress
• Provides UX for large files (show estimated time, chunking notes)

Implement a demo component and explain tradeoffs.

🧠 Answer (Design Overview)

Key points:

1. Use XHR for upload progress — xhr.upload.onprogress gives bytes transferred.
2. Track per-file state — queue, progress, status (idle, uploading, done, error, canceled).
3. Support cancellation — hold a reference to xhr and call abort().
4. Retry logic — allow retry with exponential backoff.
5. Chunking (optional) — split large files into parts and upload sequentially with resume capability.

Tradeoffs:

• XHR works well for progress but has older API; fetch with streams could work in modern browsers but is more complex for uploads.
• Chunking adds server complexity (assemble parts) but improves reliability for large files.

🎮 Live Demo: File Upload with Progress

🔍 Real-World Tips

• Use a resumable/chunked upload protocol (Tus, S3 multipart) for large files.
• Show estimated time remaining by measuring throughput (bytes/sec).
• Protect uploads with authentication tokens and signed URLs for direct-to-storage uploads.
• Validate file types and sizes client-side to provide immediate feedback.

🧭 Diagram

sequenceDiagram
  participant User
  participant UI
  participant XHR
  participant Server
  User->>UI: select files
  UI->>XHR: send file
  XHR->>UI: progress events
  XHR->>Server: upload data
  Server-->>XHR: 200 OK
  XHR-->>UI: upload complete

Quick Practice

1. Implement chunked upload (split file into 5MB parts) and assemble on server.
2. Add speed estimation and ETA using a rolling average of bytes/sec.
3. Add client-side type/size validation and a file preview for images.

Summary

• Use XHR for precise upload progress.
• Support cancel & retry; provide clear UX for large files.
• Prefer resumable protocols for reliability and user experience.