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
07. Reading the CSV headers

Episodes

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

Transcript

00:00
so now that we have the ability to upload a csv we have that in the temporary live wire directory
00:06
now we're going to start to read the csv and in this episode specifically the headers we're just going to dump the headers of the csv out onto the page so to read our csv files we're going to use the php league csv package so let's go ahead and pull this in we'll work through this but of course you can have a read of the documentation as well if you need to and
00:28
let's hop over here and just go ahead and pull that in great okay so if we head over to our csv importer component this is where we want to start to read the csv let's just play around with this inside of this updated file hook and then we'll extract this out to another method just to tidy things up so the first thing that we want to do and really importantly because
00:53
we're potentially reading huge csv files we want to go ahead and pull this in as a stream and then using the csv reader from this package we want to create a csv object or csv reader from a stream so a stream we basically just go ahead and use f open in php that's just a native function and we pass the path in here and then how we want to read this so the mode in this case we just want
01:19
to read this so we're just going to use r so the path to the file where do we get that from well it's just this file and then we can use any of the methods that we have on our file or our temporary uploaded file object to grab this so we're going to go ahead and use get real path now just to test this out let's go ahead and die dump on this just so we can see where that's coming from and this
01:45
file by the way is a temporary uploaded file over in live wire which extends the base uploaded file from laravel which in turn uses symphony so you can just dive into them classes if you need any other information from them let's go ahead and test this out first though so let's head over here hit import and we'll go ahead and just click this to upload and let's go ahead and choose that
02:08
customers file and there we go so there is the location to our csv so we're going to do that inside of a stream and then we're going to go ahead and assign to a csv variable using the reader that we get from this package and i'm just going to go ahead and index the workspace here really quickly so league csv reader and we want to go ahead and read this or create this from a
02:33
stream really important so we're going to pass the stream in that we've just opened and then we're going to go ahead and really importantly set the header offset to zero like so okay let's die dump on this csv object just to see what we get and see if this works so let's come over give this a refresh hit import choose that file again and there we go we have a reader which has got all of the
02:59
information about the document that we need you can see we've got uri here and we can just start to do whatever we need with this now what we're interested at first are the headers inside of the csv file the reason being is that whatever we choose here to map up so this could be first name last name email inside of this drop down we eventually want to show all of the headers
03:22
that we get from the csv file because we want to be able to map them up to the columns that we want to pull into the database so for example if your customer csv had a column called users email users underscore email but your column within your database was just email you would map up email to users underscore email inside of here so we definitely need them headers so we can allow
03:47
the user to map these up nicely so with this let's take all of this and put this into a separate method just to keep things a little bit tidier so i'm going to create a read csv method in here we know that that's going to return a reader so let's go ahead and add that in here now and let's paste the code that we used earlier and let's just return the csv that just means that we can
04:13
go ahead and reuse this if we need to of course we need to take in some sort of path here that we can actually read from and switch this out so let's switch that out for path and let's come up here and for now just assign csv to this read csv paste the path in and we're done we should get exactly the same thing if we dump this out so we've read the csv now we want to grab the headers
04:38
now that's as easy as just calling the get header method on the reader that we get back so now that we've done that let's just dump this out and see what we get we'll go ahead and choose that csv file here and there we go we have got all of the headers from the csv that we exported earlier of course we've already seen these when we created our customers table so there are all the headers
05:02
we now know how to read the csv and then we can just continue to use any of these methods here to grab anything else that we need now just before we go we want to set these to a property within our live wire component just so it's a little bit easier for us to access them so we're going to go all the way up to the top where our properties are just here and we can do this pretty much
05:22
anywhere and we're going to create an array out called file headers we're going to refer to the csv file as file all the time file headers and we can go down and set these in here so we can just say this file headers and assign that to csv get header and that's pretty much it so we've now got those file headers in here we could even come over to the csv importer and come down to the
05:48
section that we're going to go ahead and iterate through and we could just json dump these out so file headers and we should see them after we've selected a file so let's go over import of course we just have an empty array for now choose a file in here and there we go we've got all of them headers in there which we can use to build up these drop downs just here

Episode summary

In this episode, we start working with the CSV files that users can upload. Now that we've got the file uploading handled and saved in Livewire's temporary directory, it's time to actually read the file—starting with the headers!

We're using the PHP League's CSV package to do the heavy lifting. So, we'll Composer require that and then hop into the CSV importer component. At first, we experiment with pulling in the CSV file using PHP streams (with fopen) since files could potentially be huge. We pass the path of our temporary uploaded file, get a stream, and use the League CSV reader's createFromStream method to set things up.

Once that's in place, we set the header offset to zero and test things out by dumping the reader object to make sure everything's hooked up correctly. What we really care about at this stage are the column headers in the CSV—these are what you'll use to map to your database fields.

As we go along, the code gets refactored into a tidy readCsv method, making things reusable and cleaner. Finally, after fetching the headers, we store them in a property called fileHeaders on our Livewire component and quickly show them on the page. This is an important step, because those headers will later drive the dropdowns that let users match up their CSV columns to your database fields.

So by the end of this episode, you know how to pull in a CSV file, extract its headers, and display them in your UI—setting the stage for mapping and importing actual data in the next steps!

Episode discussion

No comments, yet. Be the first!