Build a Livewire CSV Importer
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
05. Accepting and validating a file

Episodes

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

Transcript

00:00
We're going to jump straight in and allow this file to be uploaded and validated.
00:05
So we've already got our exported CSV file. What we want to be able to do is hit upload a file just here. Go ahead and choose that file and then have it validated. So the text here is up to 50 megs just because obviously we're going to be dealing with some huge files,
00:21
but we'll lower this just while we're testing to make sure that we get the correct validation error as well as uploading files that aren't CSV files as well. Okay, so we need to hook up the input itself that deals with the file to a file property inside of our component. We need to add a trait in here as well in a moment,
00:43
but let's go over to our CSV importer here. Let's look for that input just here and the easy way to do this is just go ahead and hook this up to this file. So when we choose a file that's then going to go ahead and upload that file to us for us to a temporary live wire location,
01:00
which we'll take a look at let's just try this out and see what happens. It's not going to work at the moment. So if we go ahead and hit upload a file here choose this and there we go. So cannot handle file uploads without the with file uploads trait.
01:14
So really handy message. All we need to do then is just pull in this with file uploads trait just here and we're good to go. So we're going to keep an eye on our storage directory just here and let's just wait and see what happens. So I'm going to go ahead and upload a file again. Okay, and that looks good.
01:32
So what we're going to do now is listen for when this file has been updated so we can specifically validate it. Now we are also going to talk about the default validation rules that come with live wire because obviously this file gets uploaded to a temporary live wire directory. So it has its own set of rules.
01:53
That doesn't mean we can't also validate it, but we'll take a look at that in just a second. So what we want to do is add a kind of hook to this file property to do that. We just prefix a method with updated or any of the other hooks that we have in live wire.
02:10
But this is the one that we're going to need and we'll just die dump and say file chosen just so we can see that this is working. So I'm going to give this a refresh. We're going to head over and hit upload a file choose this file
02:21
and we should get that die dumped out now at this point. We should see the temporary file be put in here. So you can see we've got a live wire temp directory over in storage app and live wire temp and that is the CSV file.
02:35
So the file itself has actually been uploaded and in here we need to do a few things. We need to go ahead and validate the file. So as well as live wires validation rules for files that are being uploaded. We also need to perform some validation of our own.
02:50
We also then need to go ahead and read the CSV and then we need to grab some data like the headers. So grab data from CSV. So we're going to read the CSV and then grab as much data as we need from it.
03:03
We're going to focus on validating this for now before we do that. Let's go over to the installation section over on the live wire docks and look at this publishing the config file section. This will go ahead and publish the live wire config to our own app
03:18
and we'll find that over in config and live wire and as well as some other settings in here. We also have if we come all the way down here some default validation rules for our temporary file uploads as well as where this is going to go the directory
03:33
all that kind of stuff. So inside of here we can apply some rules to this and basic rules to this if we wanted to so we can apply some max rules whether it's required all that kind of stuff or we could just do this over on our component
03:47
or we could do a blend of both of them. There are two different processes here. One is the actual file upload itself. And then the second one is our own validation rules.
03:56
Now what I'm going to do here is apply some sensible defaults to the live wire config itself, which I think makes a little bit more sense and then we're going to apply some specific CSV upload validation rules over on our component. So for the rules here, we're going to go ahead and say required.
04:16
We're going to say it must be a file and we're going to set a max in here. So let's set the max of this to 51,200 which is 50 megabytes. That's what we've already spoken about. Bear in mind this will be global for all of the live wire files that you have.
04:32
Okay, so now that we've done that, when this has been uploaded, we want to go ahead and validate it for a second time. So we need to collect up some of the rules that we have in here. So I'm going to go ahead and create a method out for this.
04:46
So let's create a rules method and let's return an array from here. For here, we just use the standard way of defining Laravel validation rules. So for example, we could set the file to required which we'll do again. And in here we can do things like the mimes.
05:01
So we can say that we need this to be a CSV. You can get as complex or as basic as you want. We could also go ahead and add the max in here specifically if anything happened to the config file.
05:13
So let's just leave these in here and just see what happens. Really what we want to just test is if we can upload a file that isn't a CSV because then obviously it's not going to work. So what we can do in here is specifically validate the file.
05:27
So we're going to say validate only and we're going to choose the property or the thing that we want to upload. We're going to be adding more rules later to this based on the columns that we need to import. So we're just going to only at this point that the file is updated validate the file.
05:44
So before we go ahead and actually try and upload this, let's add the validation rules down here that we spoke about. So here we just want to go ahead and say error file and then here end error and then in here in place of this validation text,
06:01
we want to go ahead and output the message within the scope of this error. So that's just going to show any errors for the file. We upload which at the moment obviously that text has disappeared because we haven't chosen anything.
06:14
So I'm going to choose this 13 kilobyte customers CSV file and everything looks good. We've validated it and that looks nice. I'm going to refresh the page and I'm going to go and choose this mono.html file.
06:27
And there we go. Sure enough. We are now validating this and the file must be a file of type CSV. That's going to be exactly the same thing for the max size of the file as well. So you can go ahead and test that out or we can test that later
06:40
when we start to export a little bit more data. Okay. So now that we've got the file in there, we can actually manipulate it. We can read it. We can do whatever we want to it. But let's just focus on dragging a file into this area before we go anywhere else.

Episode summary

In this episode, we're diving right into handling file uploads and validation for our CSV importer. We start by hooking up the file input in our Livewire component to a property so we can accept file uploads. After a quick test, we run into an error because we didn’t include the WithFileUploads trait—don’t worry, we fix that and get our files to upload to a temporary Livewire directory.

Next, we set up methods to listen for file updates and immediately validate what’s been uploaded. We look at how Livewire handles default validation on files (like max file size, required, etc.), and we talk through how you can set these rules either globally in the config or specifically in your component for CSV files.

We add validation rules to make sure we only accept CSV files of a certain size. To make the UI helpful, we wire up error messages so users get instant feedback if they try to upload the wrong file type or a file that’s too big.

By the end of this episode, you'll have a file upload input that lets you pick a CSV, validates it properly, and shows any relevant error messages. You’ll also see the groundwork laid for handling the file contents next—so we can start reading and processing these CSVs soon!

Episode discussion

No comments, yet. Be the first!