In this episode, we focus on giving users (and ourselves, as developers) some real visual feedback while uploading files by building a clean progress bar. Instead of constantly checking the network tab, we'll add a progress bar directly to the UI, showing how much of the upload is complete.
We start by setting up the markup for the progress bar, styling it with a gray background and a blue fill that smoothly animates as the upload progresses. The progress bar lives in its own section, and only appears when there's an active upload.
Next, we wire up upload progress tracking from our uploader library. By listening to progress events, we dynamically update the progress bar's width in real time, so the blue fill grows as the upload advances. We also take care to hide the progress bar when there's nothing uploading, keeping the interface clean.
Finally, we tidy up by handling the final steps: resetting the progress, hiding the bar, and cleaning up the uploader state once the upload is done (including success and cancel actions). This ensures the progress always accurately reflects the current state and avoids any weird leftover state when users upload more files.
By the end of this episode, we have a fully functional and responsive progress bar ready for file uploads, setting us up for the next step: handling file chunks on the server!