Upload Queue with Progress
Problem statement
Build a file upload queue similar to Dropbox, Drive, or an admin media library. Users can drag files into a drop zone or browse from disk, and the UI should validate files before adding them to the upload queue.
The queue should show each file's name, size, status, and progress. Process at most three uploads at once, keep the rest queued, and support cancel, retry, and remove actions.
The core interview challenge is modeling the queue as durable item state while keeping upload timers, abort handles, and concurrency bookkeeping outside the render path.
Requirements & constraints
- Accept files through drag-and-drop and click-to-browse.
- Validate file type and size before upload starts.
- Render per-file status and accessible progress bars.
- Process a maximum of three uploads concurrently.
- Queued files should start automatically when a slot opens.
- Support cancel, retry, and remove actions per file.
How to approach Upload Queue with Progress
The strategy an interviewer expects you to reach for.
How to Think About This Problem This is not mainly a drag-and-drop question. It is a queue orchestration question. A senior engineer first separates the problem into two parts: the data the UI needs to render, and the side effects that actually upload files. The UI data is simple and serializable: file name, size, status, progress, attempts, and error. The side effects are not serializable: timers, request handles, or AbortControllers. Keep those in refs, not in React state.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.