So we're going to implement a chunked uploader in Livewire, and this gives us some really nice benefits. So we can pause uploads, we can resume uploads, and we can easily cancel them as well. So we'll dive into a demo of this, and then we'll just start building this out completely from scratch. Okay, so let's go ahead and choose a file here.

I've got a couple of large files. I'm just going to choose this big one here and hit upload. And as you can see, I can go ahead and pause and resume this. I've just caught it in time.

Obviously, because we're working on a local machine, it's incredibly quick, but I can go ahead and pause that. So when I do go ahead and resume this, that's going to finish, and then we're going to let this other Livewire component know that that file was uploaded. And of course, we can also cancel files off as well. So let's just go ahead and choose this file again, hit upload, and I'm going to hit cancel.

There was a bit of a weird thing there where the progress was at 100%, but we'll fix that through the course. Okay, so the really difficult thing about building something like this in Livewire is that when we send requests to our Livewire component, we don't want to make too many of them. So normally, when we're uploading a file within Livewire, we just choose the file within a file. We go ahead and send it through.

We get that temporary uploaded file class back, and then we can just store this where we want. Now, the problem with chunking is we're going to be sending lots of requests down for each of the chunks for this file. So that's one issue. We don't want to be sending too many requests down to our Livewire component and potentially re-rendering over and over again.

The other issue with this is that I don't want to implement all of the functionality to break files up myself. There are a ton of really great packages that allow us to do this. So we're going to take advantage of this package, this specific package that we're going to be using, but there's going to be an issue with this. So we're going to need to do a little bit of tweaking to actually get this working with Livewire really nicely.

And once you've finished watching this course, we're not going to cover everything, but you'll then be able to go ahead and customize this to work how you want. Now, the great thing about what we are doing here is that this component is completely reusable. So if you wanted to implement some upload functionality with another model or in a completely different location within your app, you can very just easily extend the base uploader component here.

And then what will happen is we'll trigger a request to say, well, what do we want to do when this particular file has finished uploading? And then you can just introduce custom functionality throughout your app. So different models will have different things happen when files are uploaded. Or you might just have the ability to upload a file and do something with it, in which case you could just create a new component and implement separate functionality.

So we'll keep this super quick as always. And we will also make this very flexible so we can use this pretty much anywhere. Okay, that's pretty much it. Let's jump over and just start building this out.