Build a Livewire CSV Importer
This episode is for members only

Sign up to access "Build a Livewire CSV Importer" right now.

Get started
Already a member? Sign in to continue
Playing
06. Drag to drop upload

Episodes

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

Transcript

00:00
Before we go any further then, let's focus on dragging files onto this area here,
00:06
and we're going to lean on Alpine to make this work really nicely. Now, to do this, we're going to need to come up to the overall section for our file drop, just here, and on this element, this outer element here, we're going to start to add some X data in here to initialize Alpine,
00:25
and really the only thing that we want to add in here at the moment is whether we're currently dropping something. So, of course, that's going to be set to false by default. Now, what we can do with that is when we hover over or drag over, more like,
00:41
we're going to set dropping to true, and then when we have a drag leave event, we're going to set dropping to false. This is really useful for handling the classes that we might want to bind on to show that something's being dragged over.
00:56
So, let's just go from the start here. We're going to go ahead and apply an event handler to this, and we're going to say drag over, and we're going to prevent the default behavior for this,
01:07
and we're going to send dropping to true. So, let's go ahead and apply that to true, and let's go down here and say drag leave. So, they're the two JavaScript events that we want to hook into,
01:18
and we're going to set this to false. Now, we can test this out if you want to go ahead and sort of debug this along the way. We can go ahead and create a span in here and say x text dropping, and that's either going to be true or false.
01:29
So, if we just go ahead and open this up, you can see we've got false at the moment. When we hover over, we get true. It's a little bit glitchy because we've got some other elements here, but we can always tidy that up, and then when, of course, we leave, we see false.
01:42
So, that's the kind of basis of dragging and dropping something onto something. Now, the last thing that we want to do is apply a drop event handler, and we'll not prevent the default behavior there, and we're going to set dropping to false because once we have dropped something onto here, we don't want to do anything else.
02:02
Now, once that's done, we do want to prevent the default behavior to call a method in here that's going to go ahead and defer to our live wire component to upload something. So, let's name this handle drop, and we'll pass through the entire event that we get in here. That means that we can extract the files out,
02:18
and we can define that handle drop method out inside of our X data object in here. So, let's take that event in and just console log on that event just so we can see this. So, before we go any further, let's just review. When we drag over, we go ahead and set dropping to true or whatever we want to call it.
02:36
Drag leave, we set dropping to false. When we drop it, we reset this back to false, and when we drop it, we also prevent the default behavior, and we call this handle drop event. We could even do them two things in one, but let's just go ahead and leave that as it is.
02:50
So, if I go ahead and also open the console in the browser here, and we just pull this down a little, there we go. So, when we drag it over, we drop it. We get this drag event, which we can extract the file from.
03:06
Now, before we start to look at implementing the handle drop method, I also want to apply some classes on here. So, we can use XBind class to apply, say, a border gray 300 if we're not dropping. So, that's going to be the sort of default.
03:22
And if we are dropping, we can bump the contrast of this up a little bit to 400 or the color darkness, whatever you want to call it, if we are dropping. So, what we can do is just check this out. There we go.
03:36
So, you can see we get a little bit of visual indication that we're actually dragging something over. And of course, we can get rid of this span here now. Okay.
03:45
So, how on earth are we going to go ahead and take this event that we're getting in and actually upload a file like we've been doing with our just clicking on our input? Well, Livewire has a JavaScript API, which allows us to do this. We can use this to reference the current component.
04:03
Remember, we're still within this CSV importer. So, this will just reference the CSV importer class that we've got here. And we can manually call it upload. We can upload multiple as well if we want to.
04:15
But we're just going to be uploading one file. We're just going to be allowing for one file here. So, what we get in here is the file itself that we need to actually pass into this. We then have a success callback.
04:28
We have an error callback. And we have a progress callback. Now, we're not going to implement any of them. We're just going to leave them.
04:35
But if you do need to, then you can pass them as the third, fourth, and fifth arguments to this. Now, the file itself, how are we going to get that? Well, let's just go ahead and get rid of this. And we're going to go ahead and console out on this event.
04:49
And we'll have a data transfer object. And we'll have a list of files in there. Now, since we're just dealing with one file, we're just going to go ahead and access that file with the array index of zero.
05:01
So now, if we go ahead and drop this over, we get a file. We've got the name, everything that we need to actually go ahead and upload this. So that's going to go and be passed in to the second argument. And then if we wanted to, we could implement then three callbacks
05:16
for the success, failure, and progress. Let's just see what happens here, though, just to make sure this is working nicely. And if it is working nicely, then our hook that we already have on our CSV importer should be called.
05:29
And we should still validate this out. So if I drag over customers and drop it, that looks like it's great. If we refresh the page and we drag over mono, you can see that that is working in exactly the same way
05:42
as if we'd just clicked upload a file and chosen one from the file system. So that's working nicely. It works in exactly the same way. But now we can just drop these files in rather than choosing them.

Episode summary

In this episode, we tackle the task of enabling drag and drop file uploads using Alpine.js and Livewire. We start by focusing on the area in our UI where users can drop their files. The first step is wiring up the basic Alpine.js data and event handlers to track whether a file is currently being dragged over the drop zone. This gives us the ability to visually indicate the drop area is active, which we do by toggling some Tailwind CSS classes.

Once that's working, we add event handlers for dragover, dragleave, and drop, so our UI can react accordingly. We also add a little debugging helper—a text span showing the current "dropping" state—to confirm things are behaving as expected.

Next, we hook up the actual file drop. When a file is dropped, we extract the file from the event object. We then use Livewire's JavaScript API to manually upload the file, just like when we select a file using an input. We briefly touch on optional callbacks for upload progress, success, and error, but keep things simple for now.

In the end, we make sure our drag and drop upload works just as nicely as our previous click-to-upload feature, but with the added bonus of intuitive file dropping. Now, users can either click the input or simply drag files onto the designated area—super smooth!

Episode discussion

No comments, yet. Be the first!