Chunking Large Uploads in Livewire
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
10. Cancelling uploads

Episodes

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

Transcript

00:00
OK, let's go back to our uploader component and add the ability to cancel our upload.
00:05
Now with the package that we're using, this is incredibly easy. So we're just going to add a button to invoke a function, which then cancels that upload. So inside of our uploader template
00:16
just here, just underneath our progress bar, we're going to go and create out a new section here, which has a bunch of buttons. So let's put these next to each other with flex item center.
00:27
We'll space these out on the x-axis, and we'll set our text to small. So in here, we're going to have a button, which is, of course, going to cancel this.
00:35
Because we're within a form here, let's just make sure that we add a type of button instead so we don't submit this form. OK, so this cancel button, let's just
00:45
style this up really quick with some text blue 500. And I'm just going to make sure that we space these out as well, so space y of 1. OK, let's just make sure that that looks OK on the page.
00:58
Then we'll add this functionality in. OK, great, so that looks fine. So with this functionality, when we're building this, the one thing you want to be able to do
01:07
is throttle your network requests so these don't upload too quickly. I already have this enabled here specifically in Chrome. I've created a custom profile called kind of slow.
01:17
If we take a look at this, you can see we've got 200 megabits per second for upload and download. And I've just created that and then swapped over to it. So that's just going to make everything
01:26
go a little bit slower so we have time to actually cancel the upload. OK, so now that we've done that, let's hook into a on event here.
01:35
When we click this button, we want to cancel this. So we can call this cancel whatever. Now let's go up to the top here within our Alpine component. And let's bring in a cancel function.
01:47
So what do we want to do in here? Well, our uploader contains the ability to abort a request. So we are just going to say this uploader abort. And that's pretty much all we need to do to cancel an upload.
01:59
We're going to do a little bit of clear up after this. But that is pretty much it. So if I go ahead and choose a file here, choose a fairly big one, hit upload.
02:07
I'm going to hit cancel. And there we go. It is canceled. Nothing else is getting uploaded here.
02:12
We're not going to create that record in the database. It's all good. But we kind of want to reset the state a little bit here. So let's go ahead and just set the uploader here to null.
02:24
And of course, we'll reset the progress as well. So we'll set the progress to zero. Now, if you had much more in here, if you were adding to this, what I'd recommend you do is create maybe like a reset function,
02:36
which goes ahead and sets the uploader to null, the progress to zero, and anything else you're doing. Just so we can invoke that from places like here, so it's a little bit more convenient and we don't have to keep repeating ourselves.
02:48
But doing this for now is not too much trouble. OK, let's go ahead and try this out now that we have added this in. And let's choose a file, hit upload. I'm going to hit cancel.
02:57
And there we go. We're back to our original state. We have canceled this off. And we're not showing our progress anymore.

Episode summary

In this episode, we jump back into our uploader component and add the super useful ability to cancel an ongoing file upload. Thanks to the library we're using, this turns out to be really straightforward — we just need to add a cancel button under the progress bar and wire up a function to halt the upload.

You'll see how to tweak the uploader's UI to add a new button and ensure it doesn't accidentally submit the form. Then, we style the button to fit in with the rest of the uploader, and set up some spacing so everything looks good.

To properly test our cancel functionality, we throttle our network speed so uploads don't happen too fast, giving us time to hit that button. After wiring up the cancel action (which just calls abort on the uploader), we see how the upload stops immediately — no record gets created, nothing gets uploaded anymore!

To wrap up, we do a little clean-up: resetting the uploader state and progress bar, and talk about creating a handy reset function if you have more state that needs to be cleared. Finally, we demo the feature to confirm it's working—canceling restores the uploader to its original state. Simple and effective!

Episode discussion

No comments, yet. Be the first!