How would you show system status during a multi-megabyte file upload?

WHAT THIS TESTS: This question tests whether you can operationalize a foundational UX heuristic into production-ready frontend architecture. Interviewers want to see that you understand visibility of system status is not merely a visual design concern but a technical requirement involving state management, network awareness, and error handling. Specifically, they are looking for your ability to reduce the gulf of evaluation for users who cannot see backend progress, preventing duplicate submissions and abandoned sessions during long-running tasks.

A GOOD ANSWER COVERS: A strong answer hits four things in order. First, granular real-time feedback such as a determinate progress bar showing percentage complete, megabytes uploaded versus total size, and throughput speed like two megabytes per second. Second, explicit state machine labels that distinguish between preparing, uploading, processing, and completed so the user knows exactly which phase is active. Third, time estimation including an optimistic but realistic countdown or range such as about thirty seconds remaining that updates dynamically based on actual transfer speed rather than a static guess. Fourth, resilient error handling that surfaces specific failures like network timeout or server rejection with actionable recovery paths including resume, retry, or cancel without losing already-uploaded chunks.

COMMON WRONG ANSWERS: The biggest red flag is suggesting an indeterminate spinner or a disabled submit button with no data for a process lasting more than a few seconds. Another weak pattern is showing only a toast notification on completion while leaving the user in the dark during the upload itself. Some candidates also conflate upload progress with overall completion, forgetting that the server may need additional processing time after the bytes arrive, which leaves users staring at a finished progress bar wondering why the file is not yet usable.

LIKELY FOLLOW-UPS: Interviewers often push deeper by asking how you would handle progress tracking if the backend does not natively support it, which should lead to chunked uploads with XMLHttpRequest or the Fetch API reporting per-chunk progress. They may ask how to prevent users from closing the browser tab accidentally, which should trigger a beforeunload warning and optionally background the upload using a service worker. Another common pivot is accessibility, such as how you would communicate changing progress to screen readers via ARIA live regions without overwhelming the user with constant announcements.

ONE CONCRETE EXAMPLE: Imagine a ten megabyte video upload. On selection, the UI immediately shows a progress bar at zero percent and a state label reading preparing upload. As the file streams, the bar advances in one percent increments, the label switches to uploading, and a subtitle shows three point two of ten megabytes at one point one megabytes per second with about eight seconds left. If the connection drops at sixty percent, the state changes to waiting for network with a retry now button that resumes from the last successful chunk rather than restarting. On completion, the label shifts to processing video and then to done, at which point the progress bar is replaced by a thumbnail preview and a success message.

Source: nngroup.com