Multiple Drag And Drop File Uploading and Processing with Inertia
This episode is for members only

Sign up to access "Multiple Drag And Drop File Uploading and Processing with Inertia" right now.

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

Episodes

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

Transcript

00:00
Okay so now within our video file store controller we need to receive each of these chunks for each of the files that are being uploaded and we need to piece them together. Now remember for each individual file we're only just sending down to this controller based on the video so although it seems like we're sending a bunch of chunks down and we need to figure out a load of stuff
00:19
on the server, think of this as like each file is just passing down to this controller with its id so we just need to handle one file really and then because we're working within that loop this will just work. Okay let's go over and see how we can do this. Now inside of this controller we're going to go ahead and bring in our request because we're going to need to read from the body
00:39
and get that file data and remember this is always attached to a video with root model binding just to remind you we have that video being passed down here. So inside of here we need to piece them chunks together. Again sounds much more complicated than it is there's actually a really good package called Laravel chunk upload which will allow us to handle this. Now this package
01:01
only really supports the libraries listed here at the time of recording. Now this is because all of these libraries are going to send down this data with a file chunk listed like form data basically. Now before we go ahead and install this package let's kind of figure out how these chunks are actually being sent down so we're just going to work with one file here and then I'm going
01:24
to head over to the network tab and check these out so we can just look at any of these individual chunks that are being sent down. So if we go over to our headers which is of course all the data that's being sent down if we come down to the bottom this is usually where we would see the data that's being sent down. Now we don't actually have data so this isn't like a form being posted
01:43
down instead the chunk is being sent down as the entire body of each of these requests and we have a content range in here and we have a content length so basically this is going to be the chunk size and the content length is going to be the length of the chunk so what we need to do is on the back end configure the Laravel chunk uploads package to receive this in as a content
02:08
range. So now that we have figured that out let's go over and look at how we use this package. The first thing to do is of course install it so let's go over and pull this in with composer and we're not going to adjust the configuration but we'll go ahead and publish that anyway just in case we do need to later. Okay now we've got this package pulled in let's look at what we need
02:29
to do first we need to create out a receiver so we can choose how to receive these in let's go ahead and create a new file receiver in here from that package and let's just take a look at this and see what we need to pass in so we'll go over to the constructor and have a look so we need a file to be passed in we need the request to be passed in and we need to handle a class and we
02:52
can configure some other stuff but these are the only three things we're going to be passing in so the file itself is tricky because we can't do something like this we can't say request get or request file because it's not being sent down like form data so we're going to need to do something in here to read that file into memory and then pass it down like we're receiving it
03:14
as a form the second thing is going to be the request which is really straightforward we've already got access to that here and the last thing that we're going to pass down is the handler and this is going to be a content range upload handler so there are multiple handlers within this package that you can choose but we know that we're working with the content range we saw that in our network
03:37
tab okay now we've got this receiver we need to figure out how to actually create a kind of temporary file now the first thought would be to go ahead and take the entire request body which we can do with get content so that will actually be and that will actually represent the entire video chunk or the file chunk we could store that in a temporary location on our file system
04:01
and then read it back in and pass it back into this file receiver or do some really hacky stuff but there's a much better way to do this and that is actually using an uploaded file directly now what we can do with an uploaded file is we can fake it much like we would use within our tests within laravel and we can go ahead and create this out with content so let's go ahead and use
04:22
the create with content method now what we can do is we can create a file called file so this is effectively the same as just receiving in an uploaded file via the request and just passing it directly in and we can create that with the content from the request and say get content so basically what we're doing here is we're building up a in-memory uploaded file using the content
04:46
from the request and then passing it in like it's something like request and file which is the name that we've given here so hopefully that makes sense but now we've got our receiver it knows how to receive that file and we can kick off the process of piecing these chunks together so we're going to go ahead and create out the receiver in here by using receive this will be the ability to
05:09
save this and then we're going to go ahead and trigger this like so so what this is now going to do is it's going to handle each of them chunks and it's going to start piecing them together we need to figure out in the middle of this whether it's finished or not and it knows when it's finished because we have a content range so it will know when all of the bytes have been sent
05:30
down so we just need an if statement in between this process to check if this is finished so we're going to say if is finished and here is where we want to store that file so we can call another method to actually create the file and I'll show you how to do that in a second first of all let's just make sure that the data that we're getting down here is being read by the receiver and this
05:50
is working nicely and we can test this just by uploading a file so let's keep an eye on our networks app here choose a file and we should get each of these requests being sent down successfully so these are all being sent down and successfully read in here now when this is finished that is when we want to go ahead and store that file so I'm just going to go ahead and pull this
06:10
into another method within this controller called store and attach file and what we can do is pass down from save the file itself and this will be an instance of an uploaded file much like we pulled in here and that means that with the uploaded file class we can just store this really easily the second thing we want to pass down is the video itself to this method so we know where to attach
06:36
it because remember we've already got the video created we just need to attach the file now okay so let's go ahead and create this method out so we'll create out a protected store and attach file this will receive in the uploaded file and we'll get in the video to here as well and then down here we can just go ahead and store and attach this so we're going to go
06:59
ahead and say video update so we're going to update this at the same time as storing this file within the file system and we have that video path so with this uploaded file now if we just look at this we can do something like store as so that will take in the path we can store it in a videos directory and the name as well so store as and then we're going to store that in a videos
07:22
directory again we're just working on the local public file system here we can generate a file name so we could just do this with the uuid helper on our string class and then we want to put this into a public directory or the public file system again you can change around the way that you store this check out the laravel documentation to see the other things that you can do here okay so now
07:45
that we've done that we're pretty much done so we're taking the uploaded file that's been pieced together with that library we're storing that returning the path that it's been stored at and putting that into our video inside of here okay great so let's go over to our database get rid of everything just sort of start fresh here and let's go and upload a file and by the end of this
08:07
we should see of course the record in the database but we should see that video path filled in so let's go ahead and choose a slightly smaller file wait for this to finish and once that's done it looks like it's worked let's head over to our database and there we go that is our video stored on our file system and the path being put into that model so if we just head over to our storage
08:30
section within our app we should see public videos and that file now it can't be read at the moment because we've not given this an extension later on what we're going to be doing is encoding this video so we're just going to take this without an extension and code it properly and then give it a file name but if i just temporarily add mp4 on the end to this you can see that sure enough that
08:52
file has been successfully uploaded and it just works so that's been pieced together with all of them chunks properly so there we go that is the process of receiving in each of them chunks with that specific handler going ahead and piecing them together and then storing that in the file system and updating our model once the whole process has completed

Episode summary

In this episode, we're diving into how to handle file uploads that come in "chunks" on the server—think big video files that need to be uploaded in smaller bits. We start by looking into our video file store controller, where each chunk for a file is sent, and talk about how, even though there are a lot of chunks, we're really just dealing with one file at a time thanks to how the controller is set up.

We go over how the client is sending these chunks by checking the network tab in the browser and notice that each chunk arrives as the request body and includes handy headers like Content-Range and Content-Length. These help us know where each chunk fits in the overall file.

Rather than reinventing the wheel, we use the Laravel chunk uploads package, which is well-suited for this job. After installing it, we set up a file receiver that can take in chunks using Laravel's UploadedFile tools. This involves reading the content from the request body and faking an uploaded file so we can work with it just like a standard file upload in Laravel.

The package handles piecing the chunks together as they arrive, and we add a check to see when the upload is complete. Once the last chunk is in, we move the file to our storage directory and update the corresponding video record in the database with the new file path.

Finally, we test everything, confirm the chunked upload works, the file gets stored correctly, and the record in the database is updated. For now, the file has no extension, but we'll handle video encoding and proper naming later. That's the full round-trip for chunked uploads using server-side handling!

Episode discussion

No comments, yet. Be the first!