Chunking Large Uploads in Inertia
This episode is for members only

Sign up to access "Chunking Large Uploads in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
06. Showing progress

Episodes

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

Transcript

00:00
OK, we're going to head back over to the client side now and hook into the progress event on our uploader so we can store this in our own state, compute the progress, and then go ahead and show that on the page.
00:10
So let's go over to our state uploader here, and what we want to do is just start to hook into any of the events that this package fires. So let's go ahead and say state uploader on, and you guessed it, we've got progress. Now with this, we'll get through a progress object.
00:28
Let's go ahead and console log this progress object out and just see what we get. So let's head over. I'm going to, again, just throttle this to our slow, and let's choose a file in here to upload, and let's go ahead and hit upload in here and check out our console, and there
00:45
we go. We get a custom event wrapper coming through. Now inside of here, we have got, if we just pull this back up again, the detail, which gives us the progress in detail.
00:55
So what we can do is we can apply this to our state. So over here, I'm going to set out a progress to zero for our state, and then down here, we're going to set our state's progress to P and detail. So now we have got that in our state, which is great.
01:15
So let's build out a really simple progress bar down here, but we kind of want to know when this is uploading. So let's build this out first of all, and then we'll attach an if statement to that to get this working, and we can even do this inside of the form, to be honest, and we're
01:30
going to create out a div in here. Now this is where that if statement is going to be. We don't want to show this progress unless the thing is actually uploading, and then in here, we're going to have a wrapper.
01:41
So let's go ahead and start to style this out really quickly. We'll set a shadow inner, and let's make this a specific height. We'll make this rounded, and we'll say overflow hidden, because we're going to have the bar itself inside of here with the background.
01:56
So let's say background blue 500, or whatever color you want your progress bar to be. We'll set a height to full, which we'll set that to three with the outer wrapper, and that should be about it. So I'm going to go in here and add in a specific style, which we're later going to bind in,
02:13
and that will be the width based on the progress. So let's see, say 33%. So if we come over, that is what our progress bar now looks like. So let's go ahead and just space this stuff out very quickly.
02:24
So let's say space y of, let's say, six, and there we go. So that is our progress bar, 33%. So now what we want to do is when the upload starts, we want to set into our state here that the progress or the upload is actually happening.
02:42
So let's go ahead and say uploading false, because of course by default, this is not going to be uploading, and then let's hook into another event on here, and this is going to be on attempt. Now we don't necessarily have a on start, because we could just add this up here when
02:59
we start the upload, but on attempt, what we're going to do is set state uploading to true. So that's going to trigger that. We can always change this over later, but let's keep it like this for now.
03:13
So now down here where our progress bar is, we can say we'll only show this if we are currently uploading. So let's go over, and of course we don't see it, but when we do choose a file and hit upload, our progress bar shows.
03:28
So now all we really need to do is set the width to the current progress. So we could easily bind this in with view, and to do this, we're going to say vbind style, and then in here, we can enter a string, or we can use an object in here. So we can set the width to the state progress that we get, and then we can add onto this
03:51
percentage or we're not going to get the correct CSS value. So just to recap before we do this, let's go down to here. When this is being attempted, which will be run for every single chunk that we're uploading, we'll set uploading to true, and then up here, we will store that progress based on
04:09
that other event that we have. So we know that the state is uploading, it will show the progress bar, the progress will be updated, and that will be put into that style element. So let's go ahead and try this out.
04:20
Let's choose another file here and hit upload, and we should see that progress roll in. Now it's not actually working at the moment, so let's go and have a look. I put details, and that should be detail. So let's try that again, and we'll choose another file, and there we go.
04:36
We get our progress bar going up all the way to the end, and then, of course, when that finishes, that is going to be our file uploaded. Now let's go ahead and just go down to where we are showing our progress bar. I'm going to go ahead and just add in a transition on this, and we'll say transition all, and
04:55
we'll set duration to 200. That will just give it a nicer, smoother effect. So let's try this one more time, and there we go. So a little bit smoother just with the CSS transition.
05:04
Okay, now we're showing this progress. Let's just go down here and add a little bit of an extra section, which will also show the buttons and the progress. So we're going to go ahead and attach a flex item center and justify between here.
05:20
We're going to have our buttons just here, but we're also going to show our progress over this side. So let's just check this out, and that looks okay. Let's go and look at our progress.
05:33
Now if we just dump our progress directly out in here, you can imagine that because of the values that we're getting in here, we're going to end up with way too many decimal points. So rather than do this directly in the template, what we can actually do as part of our state
05:50
is create out a computed property, which will actually round this for us. So we're going to say formatted progress, and this is going to be a computed property, which we'll need to make sure we pull in from view, and we'll just do that manually up here. And then this will return to us our state progress, but around this we could do something
06:13
like math round to round that value. So now we can use this computed property directly within our state, and that will always give us back the formatted progress. So where we have our form, let's go down and instead use formatted progress.
06:29
That's it. So if we come over now, and we choose another file, and hit upload, we now have a nice formatted progress. Great.
06:38
So let's go ahead and make some adjustments to this. So I'm going to go ahead and make this text of small, and just around here we'll go ahead and create out a space Y of 3, just to space them things out, and let's bump that down a tiny bit, and there we go.
06:54
So all we need to do now is add a percentage sign on the end, and that is, as well as our progress bar, our progress percent showing. So let's click on that, upload it, and there we go. We have a nice progress bar with that progress percentage.

Episode summary

In this episode, we shift our focus back to the client side and start working on showing upload progress to the user. We begin by hooking into the uploader's progress event, tapping into the event system to grab ongoing updates as our file uploads. We explore the event payload to see what kind of progress details we get, and then update our local state with this info so we can use it in the UI.

After getting the progress data in our state, we build a simple progress bar in the page, using a conditional to only display it when an upload is happening. We make use of some quick styling to get the progress bar looking nice, and set up its width to dynamically reflect our upload progress. We also add a bit of a CSS transition for smoother visual feedback when the progress bar updates.

We then clean up how we display the exact percentage, rounding the number to avoid a pile of decimals by adding a computed property to our state. All that’s left is to polish the design a little and add the percentage sign next to the progress, and we’re all set: the user now gets clear and smooth feedback during file uploads, showing both a progress bar and a percentage label. Nice and user-friendly!

Episode discussion

No comments, yet. Be the first!