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
21. Tweaking the import button

Episodes

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

Transcript

00:00
Before we move on to the import progress we're just going to take a look at our import section
00:04
and hitting this import button and do a little bit of tidying up and give ourselves a couple of options of how we want this to work. So if I go ahead and hit import here this works really nicely because it shows us that the file is actually required which of course we need to actually import something. So that works really nicely the only issue is when we go ahead and choose
00:25
something the validation here from the import click has already been performed so we by default kind of get these fields being shown with a invalid validation message. So what we want to do is kind of clear this up or the second option is disable the import button until we've chosen a file. It really depends on how you want to structure this but we're just going to talk about some live
00:48
wire specific stuff that we can do to get this how you want it working. So if we come over to the csv importer class let's just take a look at what happens when we actually hit the import button here. The first thing that we do is we validate so the reason that we get the file validation working as well is if we look at the rules method we already know that this exists in
01:09
here to validate the file. What we also have though are the column rules which by the time we've got to this point have already passed in and that's why we get them validation messages in there after we've gone ahead and selected a file. So if you wanted to just keep the import button enabled but clear these out if a file gets chosen then all we need to do is head over to the updated file hook
01:31
and we can get rid of this comment here now and we can go ahead and say this reset validation or you could use the reset error bag method. So that will just go ahead and clear out the validation as it is and it will go ahead and not show these. So let's just go through this once more. I'm going to hit import here choose upload a file head over and click this and there we go. So we're basically
01:54
just starting from scratch. So that's one option or if you didn't want to allow this import button to be clicked until you had performed everything that you needed like uploading a file then you can go ahead and disable it. So this is a little bit different. What we're going to need to do here is set the file row count and then use that to check. So do we actually have any rows in the csv
02:19
because technically we could be uploading an empty csv. So we're going to go ahead and set a file row count in here and we're just going to set that to the count of this csv records kind of like what we did when we created the import. So we're going to go ahead and store this up here and that might be useful if you want to show that information as well. So let's find out where we've got our other
02:41
bits here let's just do that under file headers so public and this is going to be an integer and file row count and we'll set that to a default of zero. Now what we can do is take this and over in the csv importer component all the way down where the import button is let's find that we can go ahead and disable this if there are no rows in that file. So we can just go ahead and output here
03:06
using file row count checking if it's zero if that is the case we'll just go ahead and add on a disabled attribute to this otherwise we will just have an empty string. I'm sure there's a shortcut for this but we can always tweak it later. So if we head over now and just hit import there we go this is disabled we can't click it until we've uploaded a file and of course that file has rows
03:29
obviously if we were to go ahead and choose a file that wasn't valid or didn't have any records this still stays disabled. So it's entirely up to you which method you go down but you now know that you have the ability to when we hit import or when we update the file clear the validation or set the file row count and use that to disable the import button.

Episode summary

In this episode, we're focusing on making our import process a little bit smoother by tweaking the import button in our CSV importer. We start by looking at the current behavior: when you hit the import button without choosing a file, you get a validation error, which is great. But things get a bit weird if you pick a file after clicking import—validation messages still stick around, which can be confusing.

To tidy this up, we explore a couple of Livewire-specific techniques. First, we add logic to clear out validation messages as soon as a new file is selected. This way, everything resets and feels more intuitive for the user.

Then, for a more proactive approach, we look at disabling the import button entirely until a file with data has been picked. We use a simple row count check on the uploaded file and only enable the button if there's at least one row present. This helps prevent empty or invalid imports before they even start.

By the end, you'll have two clean options for your import button: you can either clear validation automatically when a file is chosen, or disable the button until a proper file is ready. Both approaches make for a much better user experience!

Episode discussion

No comments, yet. Be the first!