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.
13 episodes• 53 mins

Overview

Effortlessly handle large file uploads in your Livewire apps with chunked, resumable uploading.

We’ll cover the entire upload process, 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!