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
06. Starting chunked uploads

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 let's kick off our chunked uploading.
00:03
Now, if you're not familiar with chunked uploading, essentially what we want to do is break these potentially really large files down into small chunks and send these across individually. Then on the back end, once the entire upload process is complete,
00:19
so once all of them chunks have been sent down, we will then piece them back together and then store that file. Now, this sounds a lot more complicated than it is. There's a couple of packages that we're going to pull in to make this absolutely effortless.
00:32
So where do we want to kick the process off of our file upload? Well, we want to do this inside of the object that we're pushing to our uploads because we want to be able to access all of this information as we're uploading this, like the progress, and we want to be able to trigger methods on this,
00:49
like the ability to pause and resume and cancel our upload. So essentially what we're going to have in here is a file and then this is going to be where we go ahead and start that upload. So let's go ahead and just create our a start chunked upload function in here
01:07
and that's going to take in the file itself. We know that because we actually need to pass each of our files in to actually upload them and we're also going to pass the id of this in to here as well. So we'll grab the id here so we know what we are actually uploading
01:23
because when we send each individual file down to actually upload we need to know where to post that through to. Okay, so let's go ahead and create this start chunk upload method or function and let's accept in the file into here and of course the id.
01:41
So to do this we're going to go ahead and lean on a package called upchunk which as you'd imagine will upload files in chunks. So we're going to go ahead and pull this in and I'm going to guide you through how to get this working.
01:53
Let's go ahead and do an npm install on this. This is purely client side. This will be nothing to do with our backend but the goal here is to get these chunks actually sending through to a controller.
02:03
Okay, so we've pulled upchunk in. The first thing that we're going to do is go ahead and import create upload and that is of course going to come from that upchunk package which is under mux and upchunk and this is where we're going to start this out.
02:18
So I'm going to create an upload variable here. We're going to trigger this and then we're going to return that upload. So once we pass through all the options to this that we need we'll return that of course because it needs to be returned and stored within this object.
02:33
Okay, so for uploading what do we need? Well we need to choose where this is going to go to. That's a really important point. So we don't have an endpoint at the moment.
02:42
Let's tackle that now. So at least we've got the endpoint in there and then we can go ahead and fill that in later. So let's go and create out a controller
02:50
and we're going to call this video file store controller. So this will be a file that we will eventually attach to a video. So let's go over to our roots here and let's create out a post videos slash video and then file and then choose video file store controller
03:09
and we'll say videos file and store. Okay, great. Let's make this singular because we're only ever going to have one file for each of them and let's grab the name for this and then we can put that in there using our root helper.
03:22
Now let's just make sure if we open up that controller we have an invoke in there but we're not going to do anything in here just for now. Okay, so that's the endpoint. The next is the method.
03:33
By default this package uses put which is fine. You can change it to put but I'm going to go ahead and switch this over to post. Next and of course really importantly is the file itself. We need to pass this file to the list of options here so it can be broken up and actually sent down
03:49
and then also the chunk size is really important. So with this you can choose the chunk size but typically what I do here is just go ahead and multiply the chunk size that I want. So let's say 10 megabytes by 1024.
04:03
So this would be 10 megabytes but we can increase that. So let's bump this up to 30 and we'll see how we go but you can experiment with the chunk size. Okay, so we've got an endpoint that each of the chunks for this file is going to be sent down to.
04:16
We've got the method. We've got the file that's going to be broken up and we've got the chunk size. Let's try this out and just see what happens when we start to upload a file. So let's go ahead and give this page a refresh.
04:27
Of course I'm going to bring up my console and the network tab. Really important that we monitor this and let's make sure we filter by XHR as well. Okay, so I'm going to go ahead and just head back over to the network tab here. Choose one of these files.
04:39
I'm going to choose one of the slightly larger ones and let's see what happens. Okay, so we've sent a request down to create the video but we've got an error here. So let's just have a look. So video parameters required.
04:50
Yeah, of course. So we need to specify the ID in there. That's really important. Okay, let's try this again.
04:56
So I'm going to go ahead and choose one of these larger files and we are now posting down to this endpoint. Now what's happened here is we've got a 419. Now what this package does is it uses an XHR request to send this down.
05:12
So it's going to post this data down. But all of our routes within Laravel have cross-site request forgery protection enabled. Now I wouldn't recommend you disable cross-site request forgery protection even for routes like this that are kind of hidden.
05:25
So we need to pass down some custom headers here. So the header that we want to send down is X cross-site request forgery token. But where do we get this from? Well, because we're working with an inertia,
05:37
we can head over to the handle inertia requests middleware and we can just add the cross-site request forgery token to be sent down with every request in our app. So let's create a closure in here and return the cross-site request forgery token function.
05:52
And now everywhere in our inertia app, we will have the current cross-site request forgery token, which we can use for purposes like this. So how do we grab this?
06:00
Well, within our inertia package, we pull in use page and that will give us access if we invoke this to our props and then we can grab the cross-site request forgery token. Okay, so that header is being sent down.
06:16
So this should now not fail that cross-site request forgery protection check. Let's have a look and see what we get. So I'm going to click on this and let's have a look. That's pending for each of these.
06:26
So you can see that now each chunk is getting sent down here. Now, this is slow because I have the network throttled. If you want to do that, you're going to go and we just pull this back down here, go over to the profiles.
06:41
I'm using Chrome here, create a profile like this and then you'll be able to switch over to that throttling. So it's a little bit slower and that just means that later on, we can catch this and pause and cancel the upload.
06:53
Otherwise, it's going to be super quick because it's on your local machine. Okay, so we've got each of the chunks now being sent down. Now, what we can do is because we're returning this upload and it's being stored in here, we can access any of the things within that file
07:10
inside of each of the components here. We can listen for events, we can show progress, all that good stuff. But they are all of the chunks now being sent down. And of course, if we upload multiple files,
07:21
we're going to have each of these sending chunks down as we go. So each of these will now be sending chunks down and you can see that we've got requests happening down here. So there we go.
07:33
That is how we implement chunked uploading. But now what we want to do is handle these on the back end so we can piece them together. We're going to put in another really good package to do that in the next episode.

Episode summary

In this episode, we kick off the chunked uploads feature for our app! If you're new to chunked uploading, don't worry—it's just a way to break up really big files into smaller pieces (chunks) before sending them to the server. This makes uploads more reliable for large files, since if anything goes wrong, you only have to resend a small piece rather than the whole file.

We start by outlining how chunked uploading works, both on the frontend (breaking things into chunks and sending them) and the backend (stitching the chunks back together). To keep things simple on the client side, we pull in a package called upchunk which handles a lot of the heavy lifting for us — breaking up the file, handling chunked requests, and so on. We set up a startChunkedUpload function that gets triggered when we want to upload a file, and we make sure it's flexible enough to track progress and allow things like pause, resume, or cancel.

We lay out our upload endpoint and create a basic controller in our backend for handling files, even if it doesn't actually do much yet (we'll get to that in a later episode). While wiring this up, we bump into an important gotcha: Laravel's CSRF (Cross-Site Request Forgery) protection. Since we're sending requests with xhr, we need to manually include the CSRF token, and we show how to make that token available everywhere in your app with a tweak to our Inertia middleware.

Once that's sorted, we test everything. We see each chunk being sent over the network (and even slow down the network in Chrome DevTools just to make debugging easier). Now, uploads are being sent in chunks, and we're in a good spot to start listening for progress and handling multiple simultaneous uploads.

Next up: taking care of things on the backend, where we'll stitch all the pieces back into a complete file with even more handy packages!

Episode discussion

No comments, yet. Be the first!