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!