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.
9 episodes• 43 mins

Overview

Build a multiple file drag-and-drop uploader with Livewire and Alpine.js.

Using Alpine and Livewire’s JavaScript API, we’ll directly hook into the JavaScript drop event and kick off the upload progress, validating files and showing a progress bar along the way.

So, if you need drag-and-drop uploading in your Laravel project, this course has you covered!

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!