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
01. Introduction and demo
2m 43s
0%
02. Fresh project with Breeze
2m 1s
0%
03. Creating and seeding transactions
5m 4s
0%
04. Building a basic datatable
20m 2s
0%
05. Casting money
2m 2s
0%
06. Launching the export modal
9m 10s
0%
07. Creating an export record
7m 33s
0%
08. Exporting with Laravel Excel
12m 55s
0%
09. Queuing the export
7m 32s
0%
10. Marking the export as complete
2m 24s
0%
11. Notifying the user
5m 18s
0%
12. Showing all exports
6m 44s
0%
13. Securely downloading exports
6m 11s
0%
14. Launching the import modal
2m 44s
0%
15. Handling CSV file upload
8m 59s
0%
16. Creating an import record
2m 44s
0%
17. Handling the import
11m 56s
0%
18. Showing all imports
3m 46s
0%
19. Marking an import as complete
3m 30s
0%
20. Storing exports per user
3m 16s
0%
21. Adding drag and drop uploading
8m 10s
0%
22. Expiring downloads
3m 19s
0%
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.
22 episodes•2 hrs 18 mins•1 month ago
Overview
Let's build a powerful CSV importer and exporter with Livewire, completely from scratch.
This can handle millions of rows, be reused for multiple models, and by using queues, doesn't require the browser to be open.
This course is for you if:
- You need a robust drop-in importer and exporter component for your models that you have full control over
- You want to brush up on some advanced Livewire concepts
- You want to learn about queues in Laravel
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!