Build a Livewire CSV Importer/Exporter
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
21. Adding drag and drop uploading

Episodes

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

Transcript

00:00
Okay, so let's go ahead and actually add the ability to drag and drop files into our import modal. At the moment we can only go ahead and click on this to upload a file, but of course we want to be able to drag a file over here, drop it and have that start to import.
00:14
How do we do this? Well, we pretty much use the same mechanism that we are already using to upload. We just add a layer in front of this with Alpine. So we're going to turn the component that we have here that we've just seen into an
00:28
Alpine component. So we can do this really at any level, but we want to probably change the border over, probably just the border color as we're dragging and dropping. So let's make this component here the Alpine component.
00:43
If you've not worked with Alpine before, don't worry. This is just an integral part of Livewire, but we can also use this standalone and this will be installed along with the Breeze starter kit as well. So we're going to say xdata and this is going to create out a component for us and we can
00:59
store any data as part of this component. So by component, I mean this div and anything inside of it will now have access to this data and we're going to say dropping false. So basically we have a toggle here that when we perform an action, we're going to switch
01:14
this over and then we can change the classes over based on whether we're dropping. Now this is nothing to do with the actual functionality of dragging and dropping, but it is a good start. So what we're going to do is we're going to say xbind class and we're going to bind in
01:29
a class on a condition. So let's take this border grey 925 opacity. Let's add that in and that's when dropping is going to be false. So let's say not dropping and let's create another one here and we'll say when we are
01:46
dropping, maybe we will bump that to 50. In fact, let's do that the other way around. It kind of makes more sense to have this at a lower opacity when we're not dropping and a higher opacity when we are dropping.
02:00
Okay, so let's go over to this now, click on import and we get this border. Let's go and change dropping to true. We might not see it just because we get a refresh, but there we go. Okay, great.
02:13
So when dropping is true, actually, what are we doing here? Let's have a look. So dropping, let's actually switch them over. Okay.
02:21
We can always change that later. Okay. So that's dropping to false and we've changed the class based on that dropping status. Now we need the events to be able to change this over.
02:32
So this is very straightforward. We just have some JavaScript events here that we trigger with X on and we're going to say drag over prevent because we don't want anything to actually happen here. We're going to set dropping to true.
02:45
So what that means is when we start to drag a file over or something over here, we'll set dropping to true. Let's just go ahead and check this out and make sure this does actually work. So let's go ahead and open up our downloads here, hit import and make sure that stays
03:02
open and I'm going to hover this over and you can see, sure enough, that that border color did actually change. However, when I drag away or come away from this, it doesn't change back. So that's just a really simple one.
03:14
We basically just need the opposite of this, which is drag leave. So we're going to JavaScript event that's going to change dropping back to false. Let's try this again. So let's open up our finder here.
03:25
Let's open up our import modal and let's have a look. There we go. And when I come away, there we go. Great.
03:32
So that's the start of our drag drop functionality, actually making it look like we can drag and drop. Next up, we actually want to handle the drop event itself. So let's just change these over a little bit.
03:43
I just like to keep these things together just so they make a little bit more sense. I can see that they all relate to the same thing. So let's say Exxon drops, this is when we actually drop a file in and we're going to prevent the default behavior here.
03:59
When I do that, I'm going to go ahead and console log drop just to see what we get. Or we could console log the actual event itself. That's probably a little bit more useful. And we can see a list of the files that we've dropped in and all that kind of stuff.
04:11
So let's go back over to here. Let's open up our finder again and let's go ahead and hit import. Make sure we open up our console here. All a little bit annoying when we've got all of this stuff going on, but we'll get there.
04:25
So let's hit import. Let's go ahead and drag that. Let go of it. That's the drop event.
04:30
And there we go. We get the drag drop event here with all of the information in. So this will contain under the data transfer object, the list of files that we have just dropped in.
04:41
That will give us a file list with each of them items. We don't really need to worry about that too much for now because we can just pass this data over to Livewire and I'll show you how to do that. But first of all, we need to do a little bit of housekeeping in terms of making sure if
04:56
there are more than one file we want to return because at the moment we're only handling single files, et cetera, et cetera. So in here, a little if statement, we're going to use that event. We'll use the data transfer object that we just saw.
05:10
We'll use files and we'll use length. Now if this doesn't equal one, we're going to do an early return. So basically if there's no file in there, which isn't going to be the case because we always have a drop event, or if there are more than one file, we're just going to do
05:25
an early return. Then let's go ahead and just pluck the files out of here. So again, we'll use event data transfer and files, and let's go ahead and console log them files just to remind ourselves what we've got.
05:38
So let's go and try this again. So once again, let's open up our console here and let's open up our finder and let's go ahead and import a file, drag that over and there we go. We get a file list and we've got one file in there.
05:54
Great. Okay. So now we've got our files, we've done some basic checks. What do we actually do now with this file?
06:03
How do we sort of transfer this from the client side over to Livewire? Well, to do this, it's actually very easy. We can use this to reference the current component that we're within, which is our import modal, and we can say upload.
06:18
Now let's just remind ourselves before we go any further, let's look at our import modal. We know that in here we've got the with file uploads trait, so we have the ability to actually upload files using this component. And we do that with this file property here.
06:36
So we've got the ability to upload files. What that means is we can say this upload, we can give the name of the property that we would normally store that file with, which is when we selected this just within our browser. And then all we do is we just pass the file object over, which is files and zero because
06:53
it's the first file in that list of files and we know that we're only accepting one. And that's all we need to do. That is drag and drop sorted. Now there is one more thing that we need to do.
07:04
We're going to say X on drop here, and we're going to set dropping to false. So that's basically once we have dropped the file, we're going to change the status of dropping back to false because obviously we're no longer hovering over this. So this should work.
07:19
Let's check it out. So to test this out, let's go over to our imports. Let's get rid of all of our imports and let's check this out. Great.
07:29
So let's go ahead and try and import something normally. So I'm going to click upload a file. I'm going to go ahead and choose that. Perfect.
07:36
We get you're about to import 10 records and we get start import. That goes ahead and goes through our queue, gets imported. Perfect. We know that works already.
07:46
Let's go ahead and try and drag this in now. So let's drag this over. Let go. There we go.
07:53
We get exactly the same thing. So this doesn't immediately start uploading, but we upload the file, then using the detection that we used earlier to count the records, we basically get exactly the same status here and we can click start import again and everything looks good until that gets imported.

Episode summary

In this episode, we add drag and drop uploading to our import modal! Previously, you could only click to upload a file, but that's not super user-friendly—so we're leveling things up.

We start by making our upload area into an Alpine component (don't worry if Alpine is new to you; it's easy and already installed if you're using Breeze). We set up a dropping state to track when a file is being dragged over the upload area and use that state to automatically change the border color, giving users nice visual feedback.

Next, we wire up the drag-and-drop events—using Alpine's x-on for dragover, dragleave, and drop. We prevent the default browser behavior, toggle our visual state, and finally, handle the drop event. We do a quick check to make sure only one file is being dropped, then pass the file directly to Livewire for uploading (super simple with this.upload).

We finish by tidying up—making sure our visual cues reset when the drag is done and thoroughly testing that both click-to-upload and drag-and-drop work just as expected. By the end of this lesson, the import modal supports a much nicer, more modern file upload workflow!

Episode discussion

No comments, yet. Be the first!