Build a Livewire Drag & Drop Uploader
Playing
02. Setting up

Episodes

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

Transcript

00:00
Okay, so a really quick setup of Laravel and Livewire now if you're new. If you already have Livewire installed then you probably don't need to go through this.
00:07
You can head on over to the next video. So we are going to go ahead and first of all start with a new Laravel project. So we're going to call this Livewire drag drop upload or whatever you want to call it. And we're just going to wait for that to finish.
00:20
Meanwhile, if we head over to our browser, we're going to be using the Laravel Breeze starter kit that just gives us all of our authentication routes, our dashboard that we saw in the last episode. So we're going to grab the command for this and head over.
00:33
Once this is completely finished, we're going to go and open this up. So we now have that open in our editor and we're going to go and cd into that or we could just close this off and start it up again. And there we go.
00:46
So we're inside of this directory and we're just going to go ahead and paste in that Laravel Breeze command just to pull everything in. Before we go any further, we're going to make sure that we've got a database set up. So I've created a Livewire drag drop upload database here.
01:00
And if we head over to our EMV file, we can just start to fiddle around with the settings. In my case, I'm using Postgres. MySQL is absolutely fine. We've got the database created. We just need to switch over the credentials.
01:11
So I'm going to go ahead and add in my full name there and we should be good to go and run our default migrations. So let's say phpArtisan migrate and we are done. All of them are in there and we have everything that we need to get started.
01:25
So to go ahead and fire up a Laravel server, we're just going to use phpArtisan serve. And we also, because we're running Vite with Laravel here, we're going to run npm run dev. That's going to start up our front end server. We also have to do an npm install and then do npm run dev.
01:43
So let's run npm install first of all and just wait for that to finish. And now that's done, we can go ahead and do npm run dev. So if we head over to the browser now, we should see the Laravel dashboard. We haven't actually installed Breeze yet.
01:56
So let's go down to run phpArtisan Breeze install. That's going to go ahead and create all of our controllers and stuff for us. So let's just paste that into a new terminal tab here. And now that's done, we can just exit out of here and head over to here again.
02:10
And there we go. We can now register an account. So let's do that now just so we're logged in and we see that dashboard. That's where we're going to be putting this live wire component.
02:19
And there we go. So we're now on our dashboard. Okay, so we're going to head over to the dashboard. So let's open up dashboard.blade.php, make a couple of changes here,
02:29
and then we'll get live wire installed and add in our component. So I kind of want to make this a little bit smaller, just so we have something that we can add our uploader to. So I think that looks absolutely fine.
02:41
And then what we can do is we can apply our uploader here. So we can take this markup and add that to the live wire component. And then we can duplicate this down for the list of files that we've uploaded. So we'll leave that in there just for now.
02:55
And then we'll go ahead and grab this once we've installed live wire. So that's the next step. Very, very easy to do. We're just going to come over and run the composer require command in here.
03:04
So let's just go ahead and pull this in a new tab here. And just while that's finishing, let's see what else we need to do. We just need to include the assets. And we're also going to publish the config file because we're dealing with file uploads.
03:15
We need to configure this as well. So let's go over to our root here, which is app.blade.php, our root layout. And we're going to go ahead and add these live wire styles at the top of the page. And we're going to grab the scripts tag.
03:28
And we're going to pull these down just before the closing body. So that's pretty much live wire installed now. The only other thing that we want to do here, like I just mentioned, is publish the config file so we can adjust this.
03:40
So we're going to go ahead and run that here as well. Let's just move these out of the way because we don't really need to see them. This is going to be our main tab. OK, so that is live wire installed.
03:50
Not much is going to change here. But we can create our first component and effectively move this container over. So let's go ahead and say php artisan live wire make. And we're going to create a component called uploader.
04:01
Let's go ahead and run that. Feel free to start the repo. We're not going to do that just now. And that's our component created.
04:07
So if you're new to live wire, that will have created a live wire directory inside of HTTP with this uploader component, which is a class. And we'll also have an uploader.blade.php file in here, which is where we can add our markup. So the kind of logic for our live wire will go inside of that uploader.php file.
04:27
And all of the template will go inside of here. So we know how to do this already. Or we know what we want in there already. It's going to be this entire thing here.
04:35
So I'm going to cut that out. And we'll go over to uploader.blade.php. And we'll just paste this in. So it's exactly the same thing.
04:42
I'm actually going to change the text here so we can see this as well. So now what we need to do is over on our dashboard, add in the uploader component in here. That's as easy as just saying live wire, uploader, and ending that tag. So if we head over now, you can see that that uploader component is now in there.
04:59
And we can start to make this into a real live wire component, which handles and uploads our files. So while we're here, we're going to go and pull over some pre-made markup, which you'll find in the course resources.
05:10
And we're going to add this to the uploader just here. So let's go and get rid of all of this, because we've kind of got the container within this markup just here. And I'm just going to go ahead and paste in all of this markup here.
05:23
Don't worry too much. We'll go over and have a look at it, which it looks like this. And pretty much all this is is the top section just here, which is the uploader component here, which really is just our styled out component with this border, this image, and
05:40
the text. It also has an input in there as well, which we'll need to hook into. So let's head down to this input just here. We'll go ahead and see how we can hook into that later.
05:50
And we have some just text here. Obviously, you can change this. We've got the validation error underneath here. And really importantly, we've got our progress bar, which we're going to control, obviously,
06:02
with the upload progress of the files. We've selected. And we're going to dynamically set this style based on the percentage of the upload. So that's pretty much all of that.
06:13
Obviously, go ahead and grab that from the course downloads if you're following along. Paste it in. And we are pretty much ready to move on to the next part, where we're going to handle the selected files.

Episode summary

In this episode, we kick things off by setting up a fresh Laravel project—perfect if you're starting from scratch or just want a refresher. If you've already got Laravel and Livewire ready, feel free to skip ahead!

We start by creating a new Laravel project (you can name it however you want), then pull in the Laravel Breeze starter kit. Breeze gives us handy authentication routes and a basic dashboard to experiment with. Once that's installed, we set up our database (the video shows Postgres, but you can use MySQL just fine), update our .env credentials, and run the migrations to get everything ready.

Next, we launch both Laravel's backend (php artisan serve) and the frontend with Vite (npm install and npm run dev). Once Breeze is installed, we register a user and get to our dashboard because that's where we’ll be building our Livewire component.

After a bit of cleanup in the dashboard view, we jump into installing Livewire via Composer and hook up the necessary scripts and styles in our layout. We publish the Livewire config so we can tweak file upload settings soon.

Now, it’s time to create our first Livewire component called uploader. We move some markup into this component, so the dashboard stays clean, and you can already see everything hooked up in your browser. To give you a head start, the video shows pasting in pre-styled markup (grab it from the course files!). This markup includes the uploader area, an image, a file input, error validation, and even a progress bar for uploads.

By the end of the episode, our project is all set up. The uploader component’s basic layout is ready, so we can focus on handling and displaying uploaded files in the next part!

Episode discussion

No comments, yet. Be the first!