In this episode, we dive into building a progress bar for our file upload component. Before moving on to show the list of uploaded files, we focus on giving users some proper feedback about how their upload is progressing.
First, we slow down our network speed a bit to better notice the progress changes while uploading files. Then, we explore how to listen for upload events in the component—specifically the upload start, error, and progress events. We set up handlers for each, making sure we always reset or update the progress value at the right time.
To visually display the progress, we wire up a progress bar in our template, bind its width to the upload progress, and tidy things up so the bar appears only when an upload is underway. We also handle an annoying flicker that can happen before Alpine.js initializes by using the x-cloak
attribute and a simple CSS tweak.
By the end of this episode, you'll have a reactive progress bar that only shows during uploads and updates smoothly with the actual progress. We briefly mention options to display the exact percentage if you prefer. Next time, we'll tackle listing out the files as they're uploaded and keeping that list in sync automatically.