Chunking Large Uploads in Inertia
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
If you're allowing users to upload really large files, it's a very good idea to chunk your uploads on the client side and send these
00:07
down piece by piece to the back end. Now, there's a load of benefits to actually doing this. First of all, it's going to be a little bit faster. Second of all, you're going to have the benefit of being able to resume or pause
00:18
and resume the upload on the client side as well. So in this course, we're going to build out a really simple example that you can take and apply to anywhere in your apps. And we are going to use a couple of
00:28
packages that are going to make this incredibly easy. And I'm going to guide you through every single thing that we can do here to get what you can see here working. So let's go ahead and look at a demo of this just so we can see how it works.
00:39
Now, I'm working in Chrome here. I've got my network tab open and I have network throttling enabled. That's going to be really important while we're developing. So I've created this kind of slow
00:49
profile, which will just slow everything down. But you can choose any of these and we'll go through that a little bit later on in the course. OK, so I'm going to go ahead and choose a file here.
00:58
I've got a few video files that we can work with. So obviously they're quite big and we're going to go ahead and hit upload. So as you can see, I'm just going to pause this. That's one of the features we're building in.
01:08
We've got a progress bar, pretty standard. And I've gone ahead and paused this. Now, because these are chunked, we can pause this at the latest chunk that's been uploaded and then the user can just go ahead and resume this whenever you want.
01:19
The next chunk will be sent down to the back end. And then when this is completely finished, that is when we're going to piece this file together, save it, store it in the database and do whatever else we need to do after that.
01:30
So I'm going to go ahead and resume this. We can also cancel it, which is pretty straightforward. We'll just cancel the whole thing off. And once this is finished with Inertia
01:38
specifically, we're just going to reload the page here, just refreshing our list of files that have been updated. And if we have a look in the database, you can see that is the file path that has been stored on our file system
01:50
within Laravel. So even if you're not using Inertia here, this functionality doesn't really touch any Inertia specific stuff. The two packages that we're going to pull in are for any client. So it could be Vue, it could be anything else.
02:04
And the back end is for Laravel. So now that we can see how this works, let's go through step by step and get each piece of this put together so we can get really fast, resumable chunked uploads working in Inertia, Laravel and Vue.

Episode summary

Welcome to the course! In this first episode, we're diving into why uploading large files is best done by breaking (or 'chunking') them up on the client side before sending them to the server. We talk about the big advantages of this approach—like faster uploads and being able to pause and resume transferring files, which is super handy for users.

To kick things off, we show a quick demo of the app you'll be building, walking through the upload process with the Chrome dev tools and some network throttling. You'll see how to upload a big video file, how you can pause it mid-way, watch the progress bar, and then resume the upload. When the upload is complete, the file's chunks are put back together on the back end and stored in the database. There's also the option to cancel uploads completely.

We highlight that this solution is pretty flexible and isn't tied strictly to Inertia.js or Vue—you could use it with any front-end framework. For the back end, we'll be working with Laravel, and the packages we'll use make adding chunked, resumable uploads much easier.

By the end of this episode, you'll have seen what we're building and all the cool features it supports. Next up, we'll start building it step by step so you can add fast, reliable, chunked uploads to your own projects!

Episode discussion

No comments, yet. Be the first!