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

and set this to something like files and Livewire will detect when files are added to this when they've been selected and it would go ahead and then process these in the background or allow you to store these in the background. That's not what we're going to be doing. The reason being is that we have the ability to select and upload, but we also have the ability to drag and drop.

So we're going to be using a JavaScript event, which will handle both of these in the same way. So to use JavaScript to handle this, we're going to be using Alpine JS. We don't need to install this because we've already installed Laravel Breeze and that comes with this already. So we already have Alpine working on the page. And if you haven't seen Alpine, we also have a course

on that. So if you want to learn anything else, you can catch up. So we're going to go straight in and at the top of here, we're going to make this entire thing an Alpine component. To do this, we're going to go ahead and use the xdata attribute. I'm going to add in a JavaScript object to here, which is going to store properties and methods or variables and functions. So in here,

we're going to have a kind of handle drop method. So let's just define this out and we'll keep it really simple for now and just console log something out. So this is going to be either when a file is selected by the traditional way or when it's dropped, which is what we're going to look at in the next episode. So I'm just going to say dropped. I'm going to keep it generic term

for both of these. So when do we want this to be called and then eventually upload the file? Well, we want this to happen when we drop something, but we also want this to happen when this changes. So we're going to go ahead and say X on change, which is an Alpine handler. So we're going to use X on colon change, or we could just say at change by much prefer this syntax. And then we're just

going to call that method. So if we just go over and open up our console, we'll see this console logged when we select a file. So let's go ahead and choose a file here. And there we go, dropped or uploaded, whatever you want to call it. So obviously nothing's happening at the moment because we've just hooked into a standard JavaScript event handler for this. But what we

will then be able to do is call a method over on our uploader component with live wire here and then handle that upload. So let's start to look at this now within this uploader component. Now, to allow this component to access any of the methods for uploading files, we need to go ahead and pull in the with file upload trait and pull it into here or just see an error when we try and

upload anything. Because we're working with multiple files, normally what we would do is create out a kind of file property in here, which would allow us to attach this to an uploaded file. We're working with multiple files. So we're just going to set this to an array. So now what we can actually do is we can from JavaScript add some files to this array that we want to be uploaded.

So if we just head over to our uploader inside of handle drop, we can use the live wire JavaScript API to call this component and call the upload multiple method. So to access the component itself, we use this. So that's just going to reference this component. And we're going to go ahead and say upload multiple. You probably already guessed if you just want to upload a single file, the

method is going to be upload. But in our case, we are handling multiple files. Now, we need a property to attach these files to which we've created here. That's the first argument to this. So we're just going to pass that in here. I'm actually going to bring this down as well because quite a few callbacks in here and it makes it a little bit neater. So the second thing is the list of files

itself. Where do we get these from? Well, let's just comment this out for now. We're going to go ahead and bring in the event we get here and just console log out this event. It's always the best way just to see what we have. So I'm going to go ahead and click on this. I'm going to choose two files here and you can see we get this event object. Now, if we head down to the target here

and we head all the way down to the files list, let's go all the way down. There we go. So we've got a JavaScript file listing here with them two files. So we can pass them through to here. So that's going to be, if we just uncomment this again, it's going to be event target and files. Now, because this is currently a file list within JavaScript, we're just going to say array from,

that's going to basically take that file list object and turn it into an array so we can conveniently pass it through to here. So that's pretty much it. We're passing the files that we've uploaded, in this case, just clicked and selected through and attaching them to this files property in here. Now, nothing much is going to happen at the moment. If we just head over here

and click upload a file and just use two of these, you can see nothing really is happening here. The only thing that we get back is a 422, which is the default file validation within Livewire. So that's something that we do need to do. So we can go over and do that now. If we just come over to config and Livewire, you'll see this temporary file upload section within this config file.

And we have this rules, which is currently set to null, but this does have some defaults just here. So what we can do is override these defaults. We could get rid of them altogether if we wanted to, but I'm going to go ahead and set the max to 200,000. So about 200 megabytes. So we're going to say this is required. We're going to say that it is a file because we need

a file to be uploaded. We've just really bumped the max up here. So let's try that again. And we should see that 422 go. So the way that Livewire works, if we just hang around for this, is when you choose a file and we attach it to a property and we want to upload it, it's going to do an initial validation with the Livewire config, which we just saw that 422 for.

That's gone now because we've bumped it up. Then what we can do is further validate this within this component specifically, which is what we're going to be focusing on very soon. But that's pretty much how we take the files that we've selected and we kind of attach them into this component just here. Now we're not processing anything at the moment. We're not technically

uploading anything properly at the moment. We're going to look at that in a couple of parts time. But I think now is a good point to go to the next episode and focus on how we can drag and drop and also call this method to get this working in exactly the same way. But of course, when we drop files into this area.