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
07. Clearing up and refreshing on success

Transcript

00:00
OK, so we want to do a couple of things once this upload finishes.
00:03
Let's just remind ourselves what happens when we don't clear up anything after the upload is complete. And once this is done, what we'll pretty much see is the progress stuck at 100%. And of course, we're not going to see the new file rolling either. So just waiting to get this to 100.
00:20
And there we go. Nothing is really happening. So let's work on the easy one first, and then we'll look at the state reset. So we want this list to update.
00:28
Now, just to make this easier for ourselves, I'm going to go ahead and get rid of everything we've got in here at the moment. And let's go up to our on event handlers just down here. Now, the last thing is a success handler.
00:40
So let's go and just get rid of the progress in here because we're not going to need that. And this is what happens when this has been successfully uploaded. All chunks have been uploaded. Now, what we can do with this is we can just access our inertia router and we can go ahead
00:55
and reload. Now, obviously, if you're not using inertia and you're just using plain view, you're going to need to make another request to push this file on. But for us, we can just use the router to reload the page.
01:06
We can choose what we want to reload, which is really important. We just want to reload that files prop that's being passed down. We don't need any other information here. And then we can just use something like preserve scroll just in case the user scrolled so we
01:20
don't get pushed to the top of the page. So let's make sure our router is imported up here from inertia. And we should be good. We should see that new file roll in when this happens.
01:31
So I'm going to go ahead and turn throttling off. And let's go and choose this file. Hit upload. Wait for that to finish.
01:38
And there we go. We get the new file roll in really nicely. OK, so now what we want to do is clear up our state. Now, this can be really easy.
01:47
Or we can make it slightly more complicated but a little bit easier to manage. Now, we've got our state listed up here. And we could just go state.file null, state.uploader null, and just do these one after another. But it kind of makes sense when we have this state to create an initial state,
02:06
spread this in, and then just overwrite these properties with objects assigned within JavaScript all in one go. And that will just give us a nice reset method, which will just reset everything for us. And we don't have to manually target each of these properties.
02:21
To do that, let's go ahead and pick out what we want to be in our initial state. And that's just going to be a plain object with all of these things in here, minus stuff like our computed properties. So I'm going to move these over to an initial state.
02:36
What we can then do is we can spread in our initial state directly into here. And we shouldn't see any difference at all. This is just going to work in exactly the same way. And you can see that this functions as we've built it.
02:48
And everything works nicely. But what we can now do is we can introduce a reset method on our state, which will basically take these and merge them back into this object once this is finished. So we're going to go ahead and say object assign.
03:06
We're going to take our state. And we're going to assign the initial state to this. That's pretty much what we need to do to reset this state. That's just going to overwrite all of these things in this state.
03:17
And we'll be back to where we started. So now we've got this reset method. Let's go down to our success and just say state reset. And we should be good.
03:29
Let's try this out. So I'm going to go ahead and choose a file here. And let's choose this one. Hit upload.
03:35
Once that progress finishes, you can see we are back to where we started. So at the moment, we have a little bit of flickering just because the way we've laid this out. You could even keep the same progress in there to show that this has been uploaded.
03:47
But at this point, you'll probably be flashing a message. And of course, this will roll in. So the user should know that it's uploaded. So that is our state reset.
03:56
Very, very simple once we progress this. And of course, we can use this state reset later when we implement the ability to cancel an upload. We can just reset everything back to how it was.
10 episodes 46 mins

Overview

Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading.

We’ll cover the entire upload process for the client and server, display a progress bar, then add the ability to pause, resume and cancel uploads.

From there, you’ll be able to handle huge file uploads anywhere in your applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!