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

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

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

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

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.

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

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

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

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.

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,

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

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

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

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.