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
05. Handling chunks on the server

Episodes

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

Transcript

00:00
So at the moment, we have got a dummy route where all of this chunk data is being sent down to. What we want to do is receive this data in,
00:08
piece it together, and then eventually save the file. But we've got a couple of things that we need to think about here. We are not posting down to a Livewire component,
00:16
and we can't do that because we can't give the URL to a Livewire components method and then have our actual component update. So what we want to do is either create out
00:26
a completely separate controller, nothing to do with Livewire, or create a method within our upload component and then register that as a route.
00:34
Now, either of these two options are absolutely fine. It doesn't really matter what you do. But basically, we just want an endpoint to receive these chunks, put them together,
00:42
and have the ready, pieced-together file ready to do something with it. So let's roll through this, and then hopefully this will make sense as we go.
00:50
OK, so we're going to get rid of this dummy route here because we're not going to need that. And I'm going to choose to put this sort of endpoint within this component.
00:58
Now, that doesn't mean that this is going to be anything to do with the reactivity of Livewire. It's really just using this component as a controller. So we're going to go ahead and create out a method in here.
01:09
And let's call this handleChunk. And let's go and just do nothing in there for now. We'll register a route for this and then swap everything over. So in here, we will do this in our auth middleware group.
01:21
So let's go and create out a post route. And we could say something like Livewire and upload. Now, remember, we want to create this functionality so it works with any type of upload.
01:32
We want to be able to reuse this functionality. So this is just a generic way to send chunks down and piece these files together. So let's go and reference our upload class in here.
01:44
And let's reference that handleChunk method. And then we'll give this a more appropriate name. So let's call this Livewire.upload. So we don't want to forget to replace this over in our actual
01:55
upload component. So let's go over to upload.blade.php. And let's switch this over to that Livewire upload. So this should work now.
02:04
And it will be sending all this data down to this handleChunk functional method inside of our Livewire component. So let's just choose another file here.
02:12
And as you can see, it's still working. So inside of here now, let's bring in our request because we're going to need that to receive in this data. This is where we want to piece these chunks together.
02:22
Now, once again, I don't want to be doing this manually. I don't want to be taking these chunks, storing them, checking the amount of data we've already sent down and piecing them together myself.
02:31
So we're going to go ahead and use the Laravel chunk upload package, which is very, very easy to use. So let's go over here and install this. And then I'm going to walk you through exactly
02:40
what we need to do. So let's go ahead and grab the config just in case we need to change anything around. And we'll publish that.
02:46
And we are good. So let's close this off. And let's roll through piecing these chunks together. OK, so the first thing that we need to do
02:54
is choose how we're going to receive these. So I'm going to go and create out a receiver. And we're going to new up a file receiver from this package. Now, let's just check this out and see what this requires
03:06
that we pass in. So let's head over to the constructor. This requires a file to be passed in, the request object which we've got, and how we handle this,
03:14
and then optionally some other config. So the file itself is actually pretty tricky because upchunk, the client-side library that we're using, passes all this data down
03:24
in the body of the request. So that's going to be something like request get content. So that's not a file that we can actually just pass in. So we'll handle that in a second.
03:34
Request is easy. And the handler class is going to be a content range handler. Because as we already saw a little bit earlier, this is being sent down with a content range in the header.
03:43
OK, so the file receiver, we're not sure about the file yet. But we can easily pass the request in. And the content range handler is what we need here. So let's go ahead and pass the fully qualified name for that.
03:57
Now, the file itself, ideally what we would do, and some libraries do do this, is something like request get file. Now, that's what you do when you're normally
04:05
sending a file down to upload a file. You send it as part of a form. But in our case, upchunk is sending this down as the contents of the request.
04:14
So what we need to do is create out a kind of temporary in-memory file to handle this. Now, to do this, we can actually take advantage of Laravel's uploaded file class.
04:24
And we can fake this and then create the contents within this. So what this will do is it will just create a fake file as if we'd posted this down.
04:31
And it will just work. So let's go and say create with content. We're going to give this a name. The name of this doesn't really matter.
04:39
But the most important part is the content of this, which is going to be all of the content from the request. So let's say request get content.
04:47
And that's it. So basically, take the content of the request, which is just a load of data, and put it into an in-memory file that we can pass in here like we
04:55
would if we were submitting a traditional form. So that is our receiver. The next thing that we want to do is go and say receiver receive.
05:04
And then we want to kick off the process of receiving each of these chunks. So we're going to say save handler. Now, in between here, we want to check
05:13
if we have the whole file. That's really important. And that is where we're going to do something with that file. So I'm going to go ahead and just run this through.
05:21
And we're going to look inside of our storage directory and see what happens. So let's go and just choose a file to upload and see what we get.
05:28
So let's hit Upload on this. All of them chunks being sent down, handled by that kind of fake controller thing. And you can see that the chunks here
05:36
are being put into a file. So this library is storing these chunks for us. And then at the end, once they are all combined, we can check if that is the case.
05:45
So we're going to do that just inside of here. And we're going to say if save is finished. And if that is finished, what we're going to end up with is from that save variable here, get file.
05:57
So that's going to be the file, the uploaded file, that we want to use to actually store how we need to store it. So we can't really do anything from here. We can't really die dump and get the benefit
06:08
of this showing in the client, because we're not using a LiveWire component here. We're just using this like a controller. But we can go ahead and log this out.
06:15
So let's do a log info on save, get file, and just see what comes up. So I'm going to go ahead and clear out all my Laravel log here.
06:23
And let's choose another file to upload. So let's choose this small one, hit Upload, wait for this to finish. And that will now get logged to our Laravel log file.
06:31
And you can see here, sure enough, that this is the entire file with the parts. So that is the file that we want. And this has been cast to a string.
06:38
But this is actually going to be an instance of an uploaded file within Laravel. So we can extract all of the information we need from that. So that is piecing together the chunks.
06:49
But what we now need to figure out is what do we do with this file. What we can't do is we can't say something like this dispatch, and then dispatch an event from here,
07:00
because we're using this like a controller. All of this could go in a controller, and it would have exactly the same effect. So we need to figure out a way to let our LiveWire component
07:10
know when we have a finished file, and then we need to do something from there. So now we're piecing these chunks together. Let's figure out how to do that in the next episode.

Episode summary

In this episode, we're finally tackling how to handle file chunks on the server side. Up until now, we've just been sending our chunked uploads to a dummy route — but it's time to start doing something real with those chunks.

We start by deciding how to structure our endpoint: should we make a brand new controller just for this, or add a method to our existing Livewire upload component? Either approach is fine, so we go with adding a handleChunk method in our component and register a new route pointing to it.

After setting up the route and updating our frontend to use it, we jump into the main challenge: receiving and piecing together the chunks. Instead of manually handling the chunk logic (which can be messy and error-prone), we use the handy Laravel chunk upload package. This package simplifies the process by letting us pass a pseudo-file (created in memory from the raw request content) as the upload, and it takes care of merging the chunks behind the scenes.

We walk through how to set up the package, configure it, and pass in the necessary request data. When all the chunks have arrived, it conveniently tells us, giving us a complete uploaded file in Laravel’s usual format so we can do whatever we need with it—store it, move it, process it, you name it.

To wrap up, we test everything with a file upload and confirm it works by checking the logs. At this point, the backend can receive chunked uploads, assemble them, and store the final file. The next challenge? Figuring out how to notify our Livewire component when the upload is done. Stay tuned for that in the next episode!

Episode discussion

No comments, yet. Be the first!