Chunking Large Uploads in Livewire
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
If you're uploading really large files with Livewire, you'll probably run across the problem where your server just can't handle these. Now the one option is to configure your server to allow larger files, but then you just run into a bunch of other issues.
00:13
So we're going to implement a chunked uploader in Livewire, and this gives us some really nice benefits. So we can pause uploads, we can resume uploads, and we can easily cancel them as well. So we'll dive into a demo of this, and then we'll just start building this out completely from scratch. Okay, so let's go ahead and choose a file here.
00:31
I've got a couple of large files. I'm just going to choose this big one here and hit upload. And as you can see, I can go ahead and pause and resume this. I've just caught it in time.
00:41
Obviously, because we're working on a local machine, it's incredibly quick, but I can go ahead and pause that. So when I do go ahead and resume this, that's going to finish, and then we're going to let this other Livewire component know that that file was uploaded. And of course, we can also cancel files off as well. So let's just go ahead and choose this file again, hit upload, and I'm going to hit cancel.
01:01
There was a bit of a weird thing there where the progress was at 100%, but we'll fix that through the course. Okay, so the really difficult thing about building something like this in Livewire is that when we send requests to our Livewire component, we don't want to make too many of them. So normally, when we're uploading a file within Livewire, we just choose the file within a file. We go ahead and send it through.
01:23
We get that temporary uploaded file class back, and then we can just store this where we want. Now, the problem with chunking is we're going to be sending lots of requests down for each of the chunks for this file. So that's one issue. We don't want to be sending too many requests down to our Livewire component and potentially re-rendering over and over again.
01:42
The other issue with this is that I don't want to implement all of the functionality to break files up myself. There are a ton of really great packages that allow us to do this. So we're going to take advantage of this package, this specific package that we're going to be using, but there's going to be an issue with this. So we're going to need to do a little bit of tweaking to actually get this working with Livewire really nicely.
02:04
And once you've finished watching this course, we're not going to cover everything, but you'll then be able to go ahead and customize this to work how you want. Now, the great thing about what we are doing here is that this component is completely reusable. So if you wanted to implement some upload functionality with another model or in a completely different location within your app, you can very just easily extend the base uploader component here.
02:30
And then what will happen is we'll trigger a request to say, well, what do we want to do when this particular file has finished uploading? And then you can just introduce custom functionality throughout your app. So different models will have different things happen when files are uploaded. Or you might just have the ability to upload a file and do something with it, in which case you could just create a new component and implement separate functionality.
02:52
So we'll keep this super quick as always. And we will also make this very flexible so we can use this pretty much anywhere. Okay, that's pretty much it. Let's jump over and just start building this out.

Episode summary

In this intro episode, we kick things off by talking about the big problem with uploading large files in Livewire – traditional uploads just don't cut it when your files are massive, and changing server settings isn't always practical. Instead, we're going to build a chunked uploader with Livewire! This means uploads can be paused, resumed, and even cancelled, making things way more user-friendly and robust.

You'll see a quick demo where we upload a big file, pause and resume the upload, and play around with cancelling uploads. There's a funny little bug with progress showing 100% at the wrong time, but don't worry, we're going to fix that as we go.

We also talk through some of the technical challenges: Livewire isn't really built for tons of upload requests (which is what happens when you chunk files), so we'll need to be smart about how we handle Livewire reactivity. Plus, we're leaning on a great JavaScript package to do most of the chunking work in the browser, but there's a little tweaking needed to make everything play nicely with Livewire.

The best part? The upload component we're making is reusable and flexible! Once you finish the course, you'll be able to quickly slap it onto any model or part of your app and add your own custom actions for when uploads finish—super handy for all sorts of use cases.

Alright, that's the plan for the series. Let's dive in and start building our chunked uploader from scratch!

Episode discussion

No comments, yet. Be the first!