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
22 episodes•2 hrs 18 mins

Overview

Let's build a powerful CSV importer and exporter with Livewire, completely from scratch.

This can handle millions of rows, be reused for multiple models, and by using queues, doesn't require the browser to be open.

This course is for you if:

  • You need a robust drop-in importer and exporter component for your models that you have full control over
  • You want to brush up on some advanced Livewire concepts
  • You want to learn about queues in Laravel
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!