Build a Livewire Drag & Drop Uploader
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
So let's build out a drag and drop uploader with LiveWire.
00:04
Luckily for us, this is pretty straightforward because LiveWire gives us a lovely JavaScript API, which we can use to hook into our back end. That means that we can easily detect a drop with JavaScript.
00:17
We're actually going to be using AlpineJS for this. And then we can just forward over these files to our back end to be validated and uploaded. So let's take a look at how this works.
00:26
We'll start by just clicking Upload a File here, which works also. And we've got a few video files here. They're quite large files.
00:33
And what I'm actually going to do before we start is head over to the Network tab in my browser and just go ahead and throttle the performance of the network just so we can see the progress bar taking effect.
00:46
So let's go ahead and choose a slightly smaller file here. I'm just going to go ahead and select this, and that automatically starts the upload process. Obviously, it is throttled here, but you kind of get the idea.
00:57
It's a little bit slower than it normally would be. But once this upload has completely finished, you'll see that the list below this receives the file. So this is automatically updated with Livewire
01:08
once all of the files that we've selected have been uploaded. So that means that we can upload multiple files. I'm going to go ahead and disable throttling now just to demonstrate this.
01:18
But we can choose multiple files as well. So I could just choose these two here, and they get uploaded pretty quickly without any throttling because we're on our local network.
01:27
And you can see that they appear here as well. So you can do pretty much anything with this. If you go ahead and build this, you could integrate it really nicely
01:34
into an existing project or just follow along to learn out how to do this for future. Of course, we can also drag and drop files. So let me just pull one file over here that I already have.
01:44
Go ahead and do that, and it's uploaded in exactly the same way. We also have validation here, which are, of course, you can customize.
01:52
So if you have a maximum file size or different file types you want to accept, then you can go ahead and change them. In this case, we're only accepting MP4 files.
02:00
So if, for example, I went and just found a file that wasn't, so let's just grab this one here, you can see that file must be of type MP4.
02:11
So there we go. That is what we are going to build. Let's go ahead and set up a fresh Laravel project with Livewire now so we're ready to go.

Episode summary

In this episode, we're kicking off by previewing the drag-and-drop file uploader that we'll be building with Livewire. We start by highlighting how Livewire, together with AlpineJS, makes it super easy to hook into the backend with a neat JavaScript API—this way we can react to files being dropped on our interface and handle uploads smoothly.

We take a look at the uploader in action: first, just using a regular file picker, and then demonstrating with some video files. To give you a real feel for the progress bar, we slow down our network so you can see uploads happen in real time. Once files have uploaded, you’ll see the Livewire-powered list update dynamically without needing a page refresh.

We also try uploading multiple files at once and show that they appear right after uploading. And it’s not just clicking; you can drag and drop files too! Validation is built in, so only MP4 files are allowed, and we show what happens when the wrong type is uploaded—the error is caught and displayed instantly.

By the end of this episode, you’ll know exactly what we’re working towards: a modern, interactive uploader that you can integrate into your own projects or just follow along for the learning experience. Next up, we’ll start from scratch and set up a new Laravel project with Livewire to get building!

Episode discussion

No comments, yet. Be the first!