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

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.

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

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.

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.

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

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.

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.

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,

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.

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.

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

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.

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.

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

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

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.

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.

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

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.

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.

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.

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

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

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.

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.

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.

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.