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

So let's go over and look at the upchunk library. Now, this is going to be really tricky to integrate into LiveWire because this library requires that we post data down to an endpoint. Now, when we're working in the client side within Alpine in our LiveWire component, we can access any methods within LiveWire components,

but we can't just give a URL for that component because then the reactivity is just not going to work. So don't worry if that doesn't make too much sense. We'll go through this and as we work through the course, we'll see how we can get around this. So we're just going to pull this upchunk library in.

Pretty much the whole purpose of this is just to chunk a file and send them chunks down to some sort of backend URL. So let's go ahead and pull this into our project. And just while that's installing, we'll come over to our app.js file and let's go ahead and import this. So we're going to import the create upload function from upchunk.

And just for now, I'm just going to add this to our window object just so we can invoke it very easily from Alpine. There are better ways to do this, but this is absolutely fine for now. Okay, so now that we've done that, we can just immediately invoke this inside of here. So we can just call create upload and we can pass down any of the options that we need.

But I also kind of want to store this uploader within the Alpine form here. So I'm going to go ahead and add in an uploader property. And when we do this, we'll set the uploader to this. Now, this isn't very important at the moment, but later we're going to want to be able to get the progress from this.

We're going to want to be able to pause and resume. So we'll need a reference to this so we can do that. Okay, so what does create upload take? Well, obviously it takes the file, which we already have.

So we're just going to pass the file down here as the first thing into this options object. The second is the endpoint, which is a little bit more tricky. What we're going to do for now is just create out a kind of fake endpoint that this data gets sent down to. We're going to look at handling all of this later.

So I'm going to go over to our web routes here. And just at the bottom, I'm going to create out a sort of dummy URL that's going to allow us to post down to this. So I'll just create this out as a closure-based route. And we'll give this a name.

And let's just call this dummy for now. And we're just not going to do anything inside of here at all. So let's come over here and reference this because we're working in Blade. Of course, we can use our route helper here and pass that down to dummy.

The next thing we want to do is choose the method. Now, by default, this library uses put. But we can change that over to post if we want to. And we'll make sure that that is post so it gets received in properly.

And let's just try this out. Let's see what happens when we invoke this with pretty much all the data that we would expect. So let's go ahead and choose a file here. We'll keep our network tab open so we can see what's going on.

And let's hit upload and see what happens. Okay, so we've already got an error here. And we've actually got a 419 unknown status. Now, the reason for this error is that the library that we're using here uses just a standard XHR request to send this down.

It doesn't use Axios or anything like that. So Laravel can't pick up the cross-site request forgery token that we need. So another thing that we're going to need to add to this is manually passing down the cross-site request forgery token. Or we could disable this for the route.

But I wouldn't recommend disabling cross-site request forgery checks for any of your web routes. So let's go and create out a headers object in here. The header that we want is X cross-site request forgery token. And because, again, we're working in Blade, we can just very easily use the cross-site request forgery token helper within Laravel to put that into the headers.

And then our request should work. So let's jump over to the browser again, give everything a refresh, and let's choose another file, hit upload, and let's see what happens. And as you can see here, this is now chunking this upload. And it's making one request after another.

And it's sending all of that data down. So if we take a look at this, you can see that we've got no body for this request. It just sends the entire chunk down as the content of this request. And we have, if we just come down here and have a look, we've got a content length and a content range.

So that is how we're going to be picking this up in the back end to piece this together and work out whether the entire file has been uploaded. Now, one extra option that we can pass down here is the chunk size. So let's go ahead and specify the chunk size in here. And you can just customize this based on how it feels for your application.

But what I tend to do is just multiply the megabyte chunk that I want by 1024. So you can see here this is going to be 10 megabytes. But, of course, if you wanted to bump this up to 50, you'd just change what you're multiplying this by. So that's now going to send that down in 10 megabyte chunks.

We'll see a slight difference here from the default. If we just hit upload, you can see that we've got a lot more being sent down. But they are, of course, smaller chunks. So you can customize that based on how it feels.

Okay, so we are now successfully sending chunks for this file down to our back end. But, of course, what we are doing is sending this down to a dummy root. Next, we need to kind of figure out where we're going to send this down to because we're not sending it down to a live wire component. And then we'll take it from there.