Build a Livewire CSV Importer/Exporter
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
14. Launching the import modal

Episodes

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

Transcript

00:00
Okay let's go ahead and get the import modal set up so we can start to import some CSV records. Okay so the first thing that we're going to do is just go ahead and create out a component with Livewire and this is going to be the import modal. Of course we have an export modal we now have an import modal. Let's head directly over to the import modal blade file and just paste
00:22
in the pre-made markup which once again you can grab from the github repository and just copy and paste this over. So just a couple of things to note about this we've got two states here so this commented out part here is once we have selected a file and this is going to tell us how many records are in that CSV. So as well as uploading the file with Livewire we're going to have to read
00:46
the amount of rows that we want to import here and we also have the actual file itself here the input itself here which accepts a .csv. We will be validating this on the back end we're not initially going to show any validation errors we are going to only accept CSV files but we will eventually get to showing an error if there's anything wrong with this for example
01:11
if the file size is not right. The main goal here at the moment is just to get this to work and then like the other modal we have a start import button which again we only really want to show when we have a valid file selected and we have a cancel button as well which is going to close the modal off. So now that we've got this let's go ahead and trigger this modal from our
01:32
where is it that transactions table so let's go over to that and we're pretty much going to do exactly the same thing here for the import so let's go ahead and pull this down and attach this wire click to open the import modal now for the argument we need the model but we don't need the ids because of course we're not actually exporting anything so we don't need to know this we just
01:56
really need to know the model that we want to use so let's go over to our import modal component and of course make sure we extend that modal component from LiveWireUI and we should now have our modal let's just check it out and see what this looks like and there we go great let's go ahead and make sure that we hook up the property in the modal for the actual model that we're working with here
02:21
so let's go ahead and create out a string in here called model we will need that to make sure that we are importing these into the correct place and for now that should be just about it so there we go we now have an import modal let's head up to the next episode and look at handling the actual file upload process and then showing the amount of rows within the csv that we've chosen

Episode summary

In this episode, we're setting up the import modal so users can bring in CSV records into our app. We start by creating a new Livewire component specifically for this import modal, similar to the export modal we already have. Instead of building everything from scratch, we use some pre-made markup (which you can grab from the GitHub repo) and paste it directly into our blade file for quick setup.

We go over the structure of the modal: there's a spot for selecting a CSV file and (later on) for showing how many records are in the file. We'll accept only CSV files — and while we're not focusing on validation or error messages just yet, that's coming soon (like if someone uploads a file that’s too big, for example). For the rest of this stage, the main goal is just to get the modal working!

Next, we make sure the modal can be triggered correctly from the transactions table. When users click the import button, our modal pops up. We wire it up so it knows which model to use for the import. We wrap up by setting a property in the modal to track what we're importing — just a string for now. By the end of this episode, the import modal is in place and ready for the next step.

Up next: handling the actual file upload and displaying how many rows are in the CSV file!

Episode discussion

No comments, yet. Be the first!