Chunking Large Uploads in Livewire
Playing
02. Getting a file

Episodes

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

Transcript

00:00
OK, so I've just gone ahead and freshly installed a new project with Laravel Breeze, which is a starter kit for Laravel. If you're already familiar with that, great. We're just going to run through a couple of things,
00:09
really important things that we want to do before we get started. OK, so I'm going to go ahead and run NPM run dev here just to build everything up together. And I haven't even migrated my database yet. So let's go ahead and do that now.
00:21
And I've got that open just here so we can keep an eye on it. Now, really importantly, before we forget, before we do anything and before we install Livewire, we want to go over to app.js, and I'm going to get rid of Alpine from here. The reason being is that when we go ahead and install Livewire to get this working,
00:37
this is going to come with Alpine. So we don't want a duplicate Alpine instance. OK, we can go ahead and install Livewire with composer require Livewire Livewire, and we should be pretty much done.
00:48
OK, so I'm going to go ahead and register our account. We're going to do everything on our dashboard here. So let's just quickly create an account now. And sure enough, we're on our dashboard.
00:56
Great. So let's head straight over to our dashboard component, and let's just tidy things up a little bit here. I'm going to reduce the size of the container,
01:06
and we're going to put our form directly in there. That's just going to be a Livewire component. So let's build that component out, and then we can get the form set up so we can actually grab this file. So we'll go ahead and say Livewire make, and let's just call this upload.
01:21
And let's go and just add this directly onto our dashboard. And we'll head over to the component here, and let's just put upload in here, just so we know that it's on the page. Great.
01:32
So that's our component created. Let's go ahead and create our basic form for this. So we'll change the entire thing out here for a form. And then in here, we need an input with a type of file, of course.
01:44
We're not going to allow this to be multiple. We'll give this an ID of file. We'll get rid of the name because we don't necessarily need that, and we should be good. So we need a primary button here to submit this.
01:56
So let's use the built-in one with Laravel Breeze, and we'll just say upload. So there are two things on the page. Great. Okay.
02:05
So inside of this form, let's just wrap these two things in here, and we're going to put these next to each other. So let's do that with flex and item center, and then we will set the input to grow. So we'll just say flex of grow on there, and we end up with something like this, which we saw from the introduction.
02:23
Okay. So now is the point where we want to obviously choose a file. So we want to click on here and choose one of these files. When we hit upload, we want to grab that file somehow.
02:32
So the easiest way to do this is to go ahead and add a ref on here and use Alpine. So we're going to make this entire component, this entire form component, an Alpine component. So let's initialize this with x data, and in here, we're going to have a submit method, and then we can pick this up with this ref.
02:48
So this ref is going to be called file, and then we're going to have a submit method in here, a submit function, which will then grab the file, and then we can do something with that. That's going to start off the chunked upload process. So now that we've got x ref in here with file, we can very easily pick this up directly in here with refs,
03:08
and then just the name of whatever we called it. So in this case, it's file. Okay. So for the form itself, let's go and add in a submit and prevent in here,
03:17
and we will call submit when we submit this form. Okay. Let's just check that this is working, and then we'll talk about why we're using Alpine to do this rather than actually submitting this through to a live wire component. So if we head over to our console here and just choose a file and hit upload, there we go.
03:34
So we've got the ref to the file. Now, from this, what we can do is we can access the files. This will be a file list object within JavaScript, and then we can just pluck out the first file because we're just dealing with one file here. So what we should have now when we go ahead and choose a file and hit upload is an actual file that we can start to chunk up and pass down to our backend.
03:54
Okay. So the one last thing I want to do is just assign this to a variable so we can easily use it within this submit method, and then I'm just going to add a really quick check here just to say, well, if there isn't any file and we have clicked this button, we're just going to go ahead and return.
04:09
And down here is where we're going to start the chunking process to send the data down to the backend. Okay. Let's talk about why we are not using a standard wire submit on this and sending this data down to live wire. We would do that if we just had a single file and we didn't want to chunk it.
04:28
But what we're going to do in the next episode is bring in a library, which will take a file within JavaScript. It will chunk it up for us, and it will allow us to pass each of them chunks down after each other to some sort of endpoint on our server. So we don't want to do this with live wire because as soon as we start to do this within the live wire component, and as soon as we start to introduce things inside of our upload component, like the with file uploads trait, this is just not going to work.
04:59
It's just going to go ahead and upload the entire file. So we need to do this on the JavaScript client side and then handle things on the backend once we've got each of them chunks. So that's how basic functionality for grabbing a file within Alpine and then getting to the point where we can eventually do something with it. And that is what we're going to start doing in the next episode.

Episode summary

In this episode, we’re setting up the foundation for chunked file uploads in a fresh Laravel project using Laravel Breeze as our starter kit. We kick off by making sure everything’s ready—compiling assets with npm run dev, migrating our database, and then tweaking the setup before adding Livewire. A key step is removing Alpine.js from our app.js, since Livewire will handle this for us to avoid duplicates.

Next, we walk through registering a new user and popping over to the dashboard. There, we tidy up the layout and build a new Livewire component specifically for file uploads. We drop a simple upload form directly into the dashboard, focusing just on single file input—nothing fancy yet!

Instead of using Livewire’s built-in file upload right away, we wire up the form to Alpine.js. This lets us grab the selected file using Alpine’s refs, making it nice and easy to grab the file in JS when the user hits upload. We make sure the file selection works, and show how to prevent submission if there’s no file chosen.

Why not just use Livewire’s wire:submit and call it a day? The whole point is to get ready for chunked uploads. We explain that standard Livewire form submission just sends the whole file at once, which isn’t what we need. In the next episode, we’ll bring in a JS library to break the file into chunks for upload, and start passing those to our backend one by one.

By the end, you’ll have a clean, basic setup for capturing file input in the browser, ready to take it further with client-side chunking in the next step!

Episode discussion

No comments, yet. Be the first!