Playing
01. Introduction and demo
01. Introduction and demo
2m 17s
0%
02. Basic starter app
3m 42s
0%
03. Setting up state and selecting a file
4m 41s
0%
04. Sending chunks to the server
5m 42s
0%
05. Handling chunks on the server
9m 7s
0%
06. Showing progress
7m 6s
0%
07. Clearing up and refreshing on success
4m 8s
0%
08. Cancelling uploads
2m 1s
0%
09. Pausing uploads
2m 58s
0%
10. Handling errors
4m 51s
0%
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.
10 episodes• 46 mins•1 year ago
Overview
Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading.
We’ll cover the entire upload process for the client and server, display a progress bar, then add the ability to pause, resume and cancel uploads.
From there, you’ll be able to handle huge file uploads anywhere in your applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!