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
03. Starting the chunked upload

Episodes

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

Transcript

00:00
Okay, so by the end of this episode, we are going to be sending chunks for this pile down to our server. We're not going to be doing anything with them yet, but we want to get this functionality working on the client side before this.
00:11
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,
00:32
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.
00:45
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.
01:08
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.
01:27
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.
01:43
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.
01:53
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.
02:08
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.
02:22
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.
02:34
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.
02:45
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.
02:57
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.
03:12
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.
03:26
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.
03:46
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.
04:01
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.
04:18
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.
04:37
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.
04:53
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.
05:04
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.

Episode summary

In this episode, we're diving into actually sending file chunks from the client to the server — the first big step in chunked uploads! We're using the UpChunk library to split files into chunks and post each one to a backend endpoint. Most of this episode is about setting up that whole process on the client-side, even though we won't be handling the chunks just yet on the backend.

We'll walk through integrating UpChunk with Livewire and Alpine.js, pointing out a few tricky parts with reactivity and endpoints. To keep things simple and get things moving, we create a dummy backend route—so we're just getting the files to send, not worry about actually processing them yet.

We also bump into a classic Laravel gotcha: the CSRF (Cross-Site Request Forgery) token. Because UpChunk uses a plain XHR request, we need to manually attach the CSRF token in the headers or Laravel will block our requests. You'll see how to add the token to make the upload work safely.

Towards the end, we mess around with the chunk size setting, showing how to adjust the upload behavior for larger or smaller transfers. Finally, you'll see the uploads happening in chunks in your browser's network tab, setting the stage for wiring up the real backend next!

So, after this video, you'll have the groundwork laid for chunked uploads: files are getting split, sent, and received by your Laravel app (even if it's just a dummy endpoint for now). Next up, we'll look at what to actually do with those chunks on the server side.

Episode discussion

No comments, yet. Be the first!