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
04. Sending chunks to the server

Episodes

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

Transcript

00:00
There are a ton of different ways that we can chunk uploads. There are loads of packages that we can use. We can do this manually. But my favorite is Upchunk.
00:07
So we're going to get this installed, send the chunks down to our back end. We're going to create a controller to receive them. We're not going to do anything with them just yet.
00:15
We'll handle that a little bit later. But let's just get this working so at least it starts to send this data down to the server. So we're going to head over to Upchunk,
00:23
and we're going to go ahead and install this, of course, with NPM. This is all on the client side. And to be honest, that's pretty much what we need to do.
00:30
Let's go ahead and get this imported and trigger this to actually start to do this. So we're going to go up to the top here, and we're going to import the Create Upload
00:39
function from that package. So that is from mux and Upchunk. And then down here, we're just going to invoke this in here. So let's go ahead and invoke Create Upload.
00:53
Now, as you'd imagine, this takes a load of different options. This is really important because we need to do a couple of Laravel-specific things.
01:01
Behind the scenes, this package does not use something like Axios. So for example, our cross-site request forgery token won't get sent down automatically
01:10
with these requests. So let's look at the basics. The first one is going to be the endpoint that we send this down to.
01:17
Now, we don't have an endpoint for this just yet. Let's go ahead and just add in an empty string. The second is the method. So by default, this will be put.
01:26
But we can go ahead and specify that we want to post this if you need a different route. And then really important is going to be the file, which we know that comes from our state.
01:35
So we can just pass that down. Now, the last thing is going to be the chunk size. So you can choose the size of the chunks that you're actually sending down.
01:43
And of course, if the file that you're uploading is smaller than this chunk, the whole thing will be sent down in its entirety. So we're going to go ahead and multiply 10 by 1024, which,
01:55
of course, is 10 megabytes. But of course, you can go ahead and change this over if you want to and experiment with the sizes. OK, so let's go ahead and build this endpoint out
02:04
just so we can see what happens when we actually invoke this. So we don't need to fill anything in the controller just yet. So we're going to make a file store controller.
02:16
And if we head over to our routes, let's go ahead and create this out. So I'm just going to copy one of these. And let's go ahead and say post files and file store
02:27
controller. And we'll get rid of that method name as well because we're not going to need that. And let's just give this a name.
02:33
And we'll just call this files. So let's call that file store. So with this, what we can do, specifically with an inertia, is use the route helper because we have Ziggy set up
02:43
within this starter kit. But if you don't, you just want to put the endpoint name in there. OK, let's go over to our file store controller.
02:50
And let's just add in an invoke magic method. OK, so if we head over, let's open up our network tab just so we can keep an eye on what's happening. Now, just before we do anything, I've
02:59
created out a custom profile in here which will slow this process down. This is going to be important later when we test this. So if you want to add one of these,
03:07
go ahead and add this out with the reduced speeds. And we are good to go. We can just select that in here and then see this slightly slow down.
03:16
So I'm going to go ahead and choose a file in here. Again, the request is a little bit slow to actually grab the file. Hit Upload.
03:22
And as you can see, we get a 419. So that's the one thing that we need to fix to get this working. This is a Cross-Site Request Forgery mismatch exception.
03:31
So we need to put this into a header within here directly. So if you are using Inertia, what you can do is come over to your Handler Inertia Requests middleware. And you can just output your Cross-Site Request Forgery
03:44
token directly within here. That will be available globally. So let's go ahead and do that. We have a Cross-Site Request Forgery underscore token
03:53
function within Laravel, which will give you the token. And then we can pick this up over here and add it to our headers list. So this package allows you to send custom headers down.
04:03
So the header for Laravel is Cross-Site Request Forgery token. And then here, we're going to go ahead and pull in the use page directive from, not from view, from Inertia.
04:16
And then down here, we can invoke use page. And then we can access any of our props. So we can access props, Cross-Site Request Forgery token.
04:26
So now, with each of these chunks being sent down, that will send that Cross-Site Request Forgery header down. And it should work. So let's go over and try this out again.
04:35
So let's choose another file here, hit Upload. And as you can see, this file is now being sent to our back end, picked up in that controller in chunks until it completely finishes.
04:47
So this will just keep rolling until we get to the last chunk. And then we're pretty much done. Now, obviously, we're not handling
04:52
any events or anything yet. We're not even picking this up on the back end. But that is how we trigger the process of setting that, going ahead and kicking off the process
05:00
and sending them chunks down. Now, we can kind of improve on this. As part of our overall state, we kind of want to keep this uploaded in there
05:08
because we want to be able to access this and compute stuff within this. So I'm going to go ahead and create out an uploader value inside of our state.
05:17
And I'm going to assign this in here, just so we have it available and we can do stuff that we need to. So that's pretty much it. That is how we very easily use that package to grab our file,
05:30
start to send it down to our back end in chunks. Now, what we need to do is pick this up on the back end, receive each of them chunks, and then store that file once the whole process has been completed.

Episode summary

In this episode, we're kicking off chunked file uploads! We start by discussing all the different ways to handle chunked uploads and land on using the Upchunk package, which makes the client-side chunking super easy.

We run through installing Upchunk via npm and get it set up to send files to our backend. We also create a very basic Laravel controller and endpoint to receive the uploads—though we don’t actually handle the uploaded chunks just yet. At this stage, we just want to confirm the data is being sent and received.

There’s some nuance here, especially because Upchunk doesn’t use Axios under the hood. This means things like CSRF tokens won’t automatically get included in our requests. So, we include a little walkthrough on how to grab the CSRF token from Laravel and add it to your headers, making sure those chunked requests don’t get rejected (no more 419 errors!).

Finally, we do a quick test upload, see the chunks hitting our backend, and stash the uploader state so we can improve on it later. We leave things set up nicely—ready to handle the backend processing and storage in future episodes. So, by the end of this episode, you'll have chunked uploads firing off from the client and being picked up server-side!

Episode discussion

No comments, yet. Be the first!