Chunking Large Uploads in Inertia
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
05. Handling chunks on the server

Episodes

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

Transcript

00:00
So typically when we upload files in Laravel and we receive these into a controller, we would go ahead and grab these from the request and they'd be available as an uploaded file. Now we have this uploaded file class just here, which allows us to then store this.
00:14
So for example, we could store this publicly under a certain path. That's a really easy way to do stuff, but that relies on having one single file being sent down in the request. What we have is a bunch of chunks. So we need to piece these together. And then once that whole process is completed,
00:32
then we have a file that we can store. Now we're not going to do this on our own. There's a really nice package that will handle all of this for us called Laravel chunk upload. So let's go ahead and install this and then I'll walk you through how we use this. So we'll go ahead and install this with composer. Of course,
00:49
we can publish the configuration as well. We shouldn't really need to touch that here, but we'll go ahead and publish it anyway, just in case we need to. Okay, so let's go over to invoke and let's bring in our request in here. So we can at least get our user when we have this file and store it and attach it to them. And inside of here,
01:07
the first thing that we're going to do is create a receiver. So a file receiver from that package. So let's go ahead and pull this in. Now let's just take a look at this and see what this requires, because we're going to need a little bit of a workaround here. So if we just take a look at the constructor for this, you can see that it takes in a file index or a file.
01:28
It takes in the request so it can read the data and we take in a handler class as well. So we need to choose how we want to handle this. Now to know how we want to handle this, we need to look at the way that up chunk actually sends this data down. So let's go over to our network tab again and let's just choose a file in here and hit upload.
01:48
So we get a 500 of course at the moment. So let's just comment this out and try that again. And let's look at any of these requests and just see what is actually going on here. So obviously we're posting this data down. If we take a look at the data that we're sending down, you can see that there's no actual data in here that we're passing down. The entire chunk is being
02:08
sent down in the body of the request here. It's not being sent down like a traditional form, like you would have a file property that you could just pick up. So we need to handle that in a certain way. What we also have here is a content range. So this will give the range of content that has been sent down in this body of this request. So that is how we're going to need
02:27
to pick that up on the back end. So let's go over and just talk about the file receiver again. And in here we need our uploaded file, which we're not sure of at the moment. We know that we can pass our request in. That's pretty straightforward. And then the handler here is going to be a content range upload handler. So we just pass the class
02:46
name directly into that. Now, our file that we want to send down, remember, this is going to be a file or the index of a file. Now, because the data here is being sent down in the entire body of the request, this package doesn't actually handle that. We need to think of a kind of workaround. Now, this does support lots of different libraries that send this data down
03:10
in a certain way. But what we need to do is kind of create a temporary file that we would normally pluck out of the request to pass into this first argument. So let's pull all these down just so we can make this a little bit neater. And what we're going to do is we're actually going to use the file fake functionality. So usually we would use this for when we're testing. But we're going
03:35
to build up a fake file with that content that can be passed directly into here. So we're going to go ahead and use an uploaded file, which we already spoke about. This comes from Illuminate and HTTP. And we're going to go ahead and fake this and then create it with content. Now, the content needs to have a name. So this is how we would normally do this. So for example, if this
03:59
data was being sent down from the request and was called file, we could just do something like request file. But we want to build up a fake file called file, but with the content of the request. So basically grab the entire body of the request, create out a fake file for this, and pass it into this receiver. So if you're using any of the other libraries that are supported by this package,
04:25
you can just go ahead and access this directly from the request. But since we're just sending all of this data down within the body, we need to create out this fake file. So that's it. We've got our receiver. Now what we can do is go ahead and use any of the methods on this library to get this working. So the first thing that we need to do is create our temporary variable that's going to
04:44
be used to start to receive this data in. So this will just start to receive this as we go through and receive each chunk. Then what we can do is create out a save is finished check. And that will be when the last chunk gets passed down. Now how does this package know that the last chunk has been passed down? Well that's why we're using the content range upload handler. And we have that
05:09
range data being sent down with this request. This will detect when this is finished by the range that's being sent down. So when it's finished, that is where we want to store the file. Now just after this, we want to go ahead and say save handler. And that will just kick the process off. So basically choose how we are receiving this file in. Go ahead and create out a receiver here
05:31
using receive. And just start to handle it. But in between that, when it's finished, do something with this. So that's going to be when this gets stored. Okay so now that we've done this, let's go and just check that this is actually being sent down properly. And then we'll handle the finish of the file. So let's go ahead and choose any of these files. And let's get rid of
05:52
our throttling. Hit upload. And we should see each of them chunks being sent down. And that all looks good. Great. Okay so once all them chunks have been sent down and this has finished, what do we want to do? Well we want to save the file out. So let's go ahead and create out another method in here called store file. Now into this we need our request because we're going to be
06:14
storing this for that particular user. And then the file that we actually get is an instance of uploaded file. So let's grab that file in. So let's invoke store file from here. Pass our request in. And then we're going to pass in the file. Now where does the file come from? Well we can just use that save variable that we passed out to get the file that's been uploaded.
06:36
So that's going to be an uploaded file like we normally get within Laravel. And that means we can just use any of them nice methods on it like store publicly as or whatever we need to do. Okay so inside of here this is pretty straightforward. We aren't introducing too much complex functionality here. So we just want to say user files and create. And then we
06:58
want to pass in the file path. And the file path is going to be the uploaded file. And we can just say something like store as. We could store it in a directory called videos. We can generate a file name maybe with a uuid. And we can add on a file extension or just not add on a file extension and then use this to validate it afterwards and process it depending on what you need to do. So
07:22
I'm just going to do that for now. Okay so the last argument is just going to be public. That's going to be the file system that we're storing this in. We'll just store it in the public directory for now. Okay so now that we've done all this and we're receiving this in checking if it's finished and when it's finished we're storing it. Let's go over and see if this actually works. And of course
07:40
keep an eye on our database. So let's choose out a file here and we'll just choose this one. Hit upload and once that gets to the end sure enough we've got a 500. So let's just have a look. Okay so let's check our laravel log here and yeah we just need to make sure that we have that set in fillable or just completely unguard this. So let's add in the file path to fillable. Okay we'll
08:03
head over and try this again. So let's go ahead and choose a file. Hit upload and once we get to the end we get a 200. A final 200. So over in our database that has now been created. The file location here should be that video. So if we head over to our storage under app and public we should have a couple of these files inside of here. Now I haven't given these a file extension but I'm
08:30
just assuming that we're going to process these afterwards somehow. I'm just going to rename that to mp4 just so we can see this video on here and sure enough you can see this is just a video from another course. Great. So the file has been uploaded. What you do with them files afterwards is entirely up to you. I'm going to go ahead and delete them and delete this from here but now
08:48
we are handling each of them chunks on the back end really easily with this package and of course going ahead and storing that once this is finished. We're going to come back here a little bit later because we need to add in some error handling but for now that's all of our chunks being handled and stored in the database and on the file system.

Episode summary

In this episode, we tackle how to handle chunked file uploads on the server side with Laravel. Normally, when you upload a file, Laravel gives you a nice UploadedFile object that you can simply store. But with chunked uploads, we get lots of little pieces instead of one big file, so we need to stitch those together on the backend.

To make our lives easier, we use the Laravel Chunk Upload package. After installing it and publishing its config, we set up a Receiver that can accept file chunks as they come in. However, the way our front-end is sending these chunks means Laravel doesn’t get a standard file input; instead, all the chunk data is in the body of the request. We use some of Laravel’s file faking features to build a temporary UploadedFile object from the raw request body so the package can process it.

We walk through how to hook everything up: receiving each chunk, determining when the upload is complete, and using the package’s handler to store the final assembled file. Once that's done, we save the file path to our database associated with the user, and the uploaded video is ready for post-processing or whatever else you need.

Finally, we do a quick check to make sure everything works, talk through a couple of common gotchas (like fillable properties or file extensions), and at the end you're left with a robust chunk upload solution. We'll revisit error handling later, but for now, you've got chunked uploads working with Laravel!

Episode discussion

No comments, yet. Be the first!