Build a Livewire Drag & Drop Uploader
This episode is for members only

Sign up to access "Build a Livewire Drag & Drop Uploader" right now.

Get started
Already a member? Sign in to continue
Playing
04. Handling dragged and dropped files

Episodes

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

Transcript

00:00
Before we move on to actually uploading the file then, let's look at how we can drag and drop and get exactly the same thing as we have through clicking upload a file. So at the moment this
00:11
just doesn't work. I'm going to go ahead and find a file here and you can see it doesn't work. If I actually let go of this, it's just going to open up in the browser because we have no handlers on this outer component to allow this to work. So if we just head over to the component, the uploader component that we have just here, we can add some event handlers to the inner part of
00:32
this, which I believe is this just here. Yep. So we can add some event handlers to this. So when we drag and drop over, this will go ahead and grab that event for us, which means we can extract the file. So the first thing that we're going to do is adding a dropping property to our overall component. Now what we can do is we can output this somewhere. So let's just dump this down here
00:54
and we'll say span x text dropping. Now if we head over here, we should see false. The goal here now is when we go over and hover this over, that should be set to true. And then when we let go, it should work nicely. So let's start to attach the event handlers to this area here that we can drag and drop over. So again, it's just standard JavaScript events here. We're going to go ahead
01:21
and create a drag over event. We're going to prevent the default behavior from happening, and we're going to set dropping to true. Now with Alpine, that's as easy as it gets. Let's go ahead and just test this out in the browser by grabbing a file, dragging it over, and you can see that's been set to true. Now it stays at true, obviously, because we've only just created one event handler.
01:43
What we also need here is a leave event handler as well. So if we go ahead and duplicate this down, let's set a drag leave prevent, and we'll set dropping back to false. So what that's going to do is it's going to give us the drag over event, but when we come away, it's going to turn to false. So what we can now do is technically add some UI improvements to show that this is being dragged
02:04
and dropped over. Let's do that first of all before we go anywhere else. So ideally, what we want to do on this here, which has a border, a dashed border, is set a class in here based on that. So we can bind in a class based on any of the properties which we have in this outer component. So we want to change border gray 300 to when we're not dropping, and we want to set this to a darker
02:30
color, so 400, when we are dropping. So if dropping is true, the border turns to 400. If we're not dropping, it goes to 300. So let's go over here and just check this out. So I'm going to go ahead and just drag something over, and you can see now we get a nice effect here. So in just pretty much three lines of code, we've gone ahead and created this, which with normal JavaScript would
02:52
have taken a little bit more effort. Okay, so now we need to handle when this is actually dropped, of course. So we're going to go ahead and add in a drop event handler, and we're going to set dropping to false. We're going to add another handler in here as well, and we're going to prevent the default behavior, and we're going to go ahead and call, you guessed it, handle drop.
03:16
We're also going to pass the event through to here specifically. Okay, so now what we should do if we come up to where we're handling this drop, let's console log out this event, and let's go over and try this. So I'm going to go ahead and drag a file over, drop it, and there we go. We have this drag event inside of here, and if we open this up, we've got this data transfer property,
03:41
and we've got the files in here that we would have dropped in. Now, at the moment, this isn't working properly. If we just come down here, you can see we've got an error. Undefined is not iterable. Now, the reason for that is inside of our handle drop, we have event target files, whereas in this event that we've just seen here, we've got the data transfer property and then
04:01
files. So what we ideally want to do is handle both of these situations. So the first thing that we're going to do is look for data transfer and files, and if that's not available, then we're going to go for the files within the target. Now, this will cause an error if we don't go ahead and optionally check for this files just here. So we're going to go ahead and add that in, and we
04:26
should be good now. So let's just go over and drag a file into here, and there we go. Perfect. We've got our drag event with our data transfer, and then we've got the files in here that were dropped in. Now, it doesn't actually look like we've got any files in here at the moment, so we'll take a look at that in just a second, but pretty much now we should be able to handle these
04:48
files. So I'm going to go ahead and just get rid of that text there that we added for the dropping so we can get rid of that boolean, and we're now going to head over to our uploader component, and in the next episode look how we can detect where the files have been either selected or dragged and dropped, and then handle them with a method just here.

Episode summary

In this episode, we tackle how to let users drag and drop files into our uploader, just like they can click to upload. At the start, we point out that right now, dragging a file over just pops it open in the browser, because we haven't put the right handlers in place yet.

So, we go into the uploader component and start wiring up drag-and-drop events. We add a little bit of state to represent whether the user is currently dragging a file over the area (called dropping), and show its value on the UI for quick feedback. Next, we attach dragover and dragleave events so the border color changes when a file is hovering over the drop zone—just for a nice visual indication.

Then, we set up the drop handler to prevent the browser's default behavior (like opening the file), reset our dropping state, and call our custom drop handler. We do a quick console log to inspect what actually comes through in the event, and realize we need to account for the difference between dropping and selecting files (since sometimes files are in dataTransfer.files, and sometimes in event.target.files). A quick fix later, and it works both ways!

By the end, we've got a drag-and-drop uploader working with visual feedback, and we're ready to move on to combining both drag-and-drop and click select in one smooth handler in the next episode.

Episode discussion

No comments, yet. Be the first!