Build a Livewire Drag & Drop Uploader
This episode is for members only

Sign up to access "Build a Livewire Drag & Drop Uploader" right now.

Get started
Already a member? Sign in to continue
Playing
07. Creating a progress bar

Episodes

0%
Your progress
  • Total: 43m
  • Played: 0m
  • Remaining: 43m
Join or sign in to track your progress

Transcript

00:00
Before we work on the little box down here, it shows the files that we have uploaded. We're going to work on the progress bar.
00:06
Now, for this, you'll probably want to go ahead and add in some network throttling. So I'm just going to go ahead and slow this down very slightly. So how are we going to do this? Well, let's go back to our uploader.
00:18
This is obviously the component where we want to add in the percentage that has been completed. But at the top here, where we have this overall component, we want to keep track of the progress of the uploaded files. Of course, to start with, that's going to be zero.
00:35
Now, how are we going to track the progress of an uploaded file? Well, really easily, when we use this upload multiple or upload method within Livewire, we get a few callbacks here that we can use. So the first callback, which we're just going to add in here as a method,
00:54
is going to allow us to see when this starts. The next one is going to be when this fails. And the third one is going to be the progress. So we have three callbacks in here.
01:04
I think that's the correct order. So here, when this starts, we get an uploaded file name, which we're not actually going to use, but we'll add it in there anyway. So we want to do something in here when our upload starts.
01:16
When our upload errors, for any reason, we're going to get an error in here, which we can do something with. We could show a message. In our case, we're just going to be resetting the progress back to zero,
01:27
just to clear stuff up. And then here, the event that we get in is the progress. So in here, we will get, once we console log out this event, the progress of an upload as it's being uploaded.
01:41
So when it starts, when it fails, or if it fails, and the progress. So just by adding these three in here and console logging this here, we should see the progress as we go ahead and upload a file. So let's choose a fairly large one here.
01:56
And there we go. So you can see here that we've got a standard JavaScript event here, a progress event with all of the data, how much has been loaded, the total file size, and everything else that you would expect.
02:10
So that's just going to keep bumping up as we do this until it finishes. So what we want to do with this is set the progress here, and then we can use this progress to style that progress bar. So just down here, instead of console logging this out,
02:27
we're going to go ahead and set this progress to E detail and progress. So from the event, the detail section, or the detail property, or object, grab the progress property. Now, when we start the upload, we want to reset the progress,
02:43
just in case we upload one file after another. And if it fails, of course, you can do whatever you want. But in this case, we're also just going to reset the progress back to zero. So let's just try this out now.
02:54
And we can test this just by dumping this value out here like we did before. So let's go ahead and add in a span, output some text with Alpine, and we'll set the progress here. So let's go ahead and try this again.
03:07
Let's choose this one. And there we go. You can see the progress jumps up as it's uploaded. So let's refresh that.
03:17
And instead of doing this, let's upload or update the style just here. To do this, we can do a very similar thing that we did with the classes, but we can bind in a style. And then inside of here, we can add in some backticks.
03:32
So we can add this value in here with JavaScript, and we can just add the progress in. That's pretty much all we need to do. Now, the only issue with this is we're always going to see this progress bar,
03:44
and we also see a flicker here as well. So we want to condition on this overall wrapper just to only show this component if progress is a positive value, so only if it's greater than zero.
03:56
And you can see that it goes now. And we still have this flicker. We'll figure that out in just a second. But if we click Upload a File now and just choose,
04:03
we'll choose a slightly smaller one, you can see that the progress goes all the way up, of course, until it's finished. Now, I'm going to go ahead and cancel that off because we know what happens when an upload finishes, and of course, we have network throttling on,
04:16
so it's a little bit slow at the moment. But let's go ahead and look at this flickering issue just here. And the reason that this happens is this component is always going to be on the page.
04:25
When Alpine loads, so of course, we have Alpine being pulled in as an external dependency, it's only going to hide this when Alpine has loaded. Now, to get around this, we can use the xcloak attribute,
04:37
which basically attaches just this xcloak attribute to it. And we can style this xcloak attribute to always be hidden until the Alpine library kicks in. So all we need to do is head over to app.css over here, and we need to say
04:53
that we want to style xcloak to have a display of none, and we want that to be important. So we always want that to be overridden. So now what's going to happen is when we refresh this, that's always hidden
05:05
until Alpine kicks in, and then that specific attribute is going to be removed. So it will be visible when we need it to be. So now if we just go ahead and choose one of these, you can see it works.
05:17
Okay, so that is our progress bar done. Of course, you could change that up to also show the progress percentage on there instead of just the bar. It's entirely up to you what you do, but we now have our progress bar working.
05:28
In the next episode, we're going to look at showing a list of files that we've uploaded, and we're going to also refresh this Livewire component when these uploads finish. So this list is always up-to-date as we're uploading files.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!