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

Episodes

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

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.

Episode summary

In this episode, we tidy up what happens after a file upload finishes. First, we look at what occurs if we don't clean things up — the UI gets stuck with the progress bar at 100% and doesn't reflect the new file, which is not ideal.

To fix this, we update our success handler so that after a successful upload, the file list gets refreshed. If you’re using Inertia, we show how to use the router to reload just the files prop (and not the whole page!), making everything seamless for the user. We even preserve the user’s scroll position so nothing jumps around unexpectedly.

Next, we focus on resetting state after an upload, so our upload form and progress bar clear out properly. We create an initial state object and introduce a convenient reset method to restore everything to its original state in one go — much neater than clearing every property individually. This makes things simpler not only for uploads, but also sets us up nicely for future features like canceling an upload.

By the end, uploads feel much smoother: file lists update instantly, the UI resets ready for the next upload, and the overall experience is more polished. Super useful tweaks! 🎉

Episode discussion

No comments, yet. Be the first!