mediumdata_state
Design a File Upload UI
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Asked In
DropboxGoogle DriveFigmaNotionSlackAWS S3 Console
Key Challenges
- ·Drag-and-drop with accurate visual feedback and drop-zone boundary detection
- ·XHR/Fetch progress events for per-file upload progress bars
- ·Concurrent upload queue with configurable parallelism (e.g., 3 at a time)
- ·Cancellation of in-flight uploads without leaving partial files on server
- ·Image previews generated client-side before upload completes
Key Takeaways
- ✓Presigned URLs offload upload bandwidth from your app server directly to cloud storage.
- ✓Concurrent upload queue (3 parallel) balances throughput vs perceived UI busyness.
- ✓XMLHttpRequest.upload.onprogress (or fetch + ReadableStream) drives per-file progress bars.
- ✓Client-side image preview via FileReader/createObjectURL is instant and requires no server round-trip.
- ✓Chunked uploads (e.g., 5MB chunks) enable resume-on-failure and progress for large files.