Build a Livewire Drag & Drop Uploader
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
05. Validating files

Episodes

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

Transcript

00:00
When we use the LiveWire JavaScript API to call UploadMultiple, this goes ahead and attaches the files that we've either dragged or selected to that property that we have over in this component.
00:11
What we now need to do, if we just get rid of this console log first, because we're not going to need that anymore, is detect when these files change. Now luckily within LiveWire, we have hooks that we can add to any properties we have within our component.
00:24
So we're going to go and create out a method called Updated, and then the name of the property, in this case it's files. So that's going to give us a list of files that we get in. Now if we just die dump on them files,
00:36
let's see what we get now when we drag or select a file. So let's start with selecting one, I'm going to go ahead and choose this video, and there we go, we've got an uploaded file, or a temporary uploaded file, which we can choose to move over when we need to.
00:50
Now don't worry about this 500 internal server error, that is just because we used a die dump in that method. Okay, so let's check out dragging these files over now, so I'm just going to drag one in, and there we go, we've got that file in there as well.
01:04
And this works with multiple as well, so if we just grab three files for example, and drag them over, we're going to have a little bit of a delay here while these get uploaded, but eventually here we see the three files that we've just dragged in, and that's going to work exactly the same way as clicking to upload a file as well.
01:20
So now we want to go ahead and apply specific validation to this within this component. Remember we already did that over on LiveWire, or the config file for LiveWire, and we set a max. This is a global rule for temporary file uploads,
01:34
so you're going to want to bump this up to the max probably that you'll ever accept in here, and then within this component we can specifically validate the files based on this component. You might have another component which allows for different file uploads. Okay, so to do this we're going to go ahead and create out either a property
01:51
or a method with some rules in, I prefer creating out a method here, and from this we're just going to return an array. So this is going to be files, but remember we've got multiple files, so with Laravel's validation rules we can use dots and then asterisks,
02:04
which means we want to validate every single item in this array. So we're going to go ahead and apply some sensible rules to this. I'm going to do the same thing as we have in the LiveWire config, just to make this a little bit better.
02:17
So we're going to say it's required, it's a file, we're going to set the max here to just 200,000 just to roughly give us 200 megabytes, and then we can start applying specific validation rules, like the MIME types that we would accept.
02:30
In this case we just want to accept video files with a format mp4. So now that we've done that, what we can do is when we do upload the files, we can validate these again. So let's say this validate, and we only want to validate the files asterisk property.
02:46
You could just call this validate and it would do this, but if you had any other validation rules in here, you'd only want to call files validation if you're uploading files. So now that we've done that, we should be good.
02:59
So we can go ahead and try this out. Let's go ahead and just click upload a file. Now this one is 237 megabytes. So if we go ahead and open this,
03:08
we technically get 422 because the validation has failed for this. If we just give this page a refresh and choose one that's lower, you can see that we don't see a validation message. Now of course we want to show a validation message,
03:19
and that's where we're going to do that just down here. So let's go over to our uploader. Let's go some validation error, and we just want to wrap this as we normally would within a blade template.
03:30
So to do this we can just go ahead and use the error helper in here, files asterisk. That's what we want to show this paragraph for. If we have errors here,
03:39
we're going to go ahead and end the error just here, and then in here we can just grab out the message that we see for this particular validation. That's it.
03:48
So let's go over. Obviously that disappears because we don't have any validation errors to start with. If we choose say this file and this file, that looks like it works.
03:58
If we go ahead and choose this file here, obviously we should see the files zero must not be greater than 200,000 kilobytes. Now we can customize this error message. It's probably likely that you want to do that because this isn't the most friendly thing.
04:14
So let's go over to our component here, and let's just add in one more method to customize the attributes for our validation. So we're going to create our validation attributes method. This works exactly the same as the rules within Laravel.
04:29
We just want to name files asterisk. So I'm just going to call that files. So let's go over and try this out again. I'm going to choose this 200 megabyte file,
04:38
and that looks like it didn't work. So let's have a look here. I think this should be protected. Change that over and have a look again.
04:49
Ah, of course. So what's happening here is the default validation for our config is taking effect, and the rules here come first because that's for the temporary uploaded file. Let's actually go ahead and get rid of these rules for now,
05:05
just so we can kind of see what's happening over here. You could always bring them back or bump them up if you wanted to. So let's go over and choose this one. And there we go.
05:14
The files must not be greater than 200,000 kilobytes. Of course, you can customize these messages completely if you want to. All of that is in the LiveWire docs, and you can go ahead and change that as you need. OK, so while we've been doing this,
05:26
if we just choose another file that is within our validation, these files are now actually being uploaded. If we head over to our storage directory in the framework over to here, you can see under app, we've got this LiveWire temp folder.
05:42
So you can see all of these files here that we've uploaded have actually been uploaded and stored in our file system. But within LiveWire temp, this isn't really where we want these to be stored. We want to move them to a more suitable location,
05:56
which will probably later allow us to then re-download the files if we want to. So what we're going to do is head over to the next episode, where we're going to create out a file record in the database here and actually upload the file to a sensible location.

Episode summary

In this video, we're diving into file validation using LiveWire, focusing on handling multiple file uploads and making sure we're only accepting the types of files we actually want.

First, we set up things in the component so we can respond to changes in the uploaded files array, giving us a chance to validate each file as soon as it's added (either by drag-and-drop or standard file selection). You'll see how LiveWire gives us a nice hook to detect when files change, letting us fire off custom validation right away.

We experiment a bit: dragging in one file, multiple files, and even intentionally failing validation to see what happens. You'll learn how the rules work, how to write validations for each file in an array (using the files.* syntax), and we tailor those rules to accept just video files (mp4s) smaller than 200 MB.

To make things more user-friendly, we display validation errors right in the interface and even show how to customize those error messages so they actually make sense to users. There's a bit of troubleshooting, too, around LiveWire's global validation config versus our component-specific rules.

And, as a little bonus, we poke around the temporary storage folder to see where files physically end up when they're uploaded, prepping for the next step: moving those files to a permanent home and associating them with a database record. That's coming up in the following episode!

Episode discussion

No comments, yet. Be the first!