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
15. Handling CSV file upload

Episodes

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

Transcript

00:00
The first step to getting our CSV file uploaded is to go ahead and use the With File Upload straight from Livewire. So once we've done that, what we can do is we can create our property, which is going to hold this file, this temporarily uploaded file. And I'm just going to call this file.
00:18
Now, with this, we can use the Validate attribute to validate this. I'm just going to do this really, really, really basically. I'm going to set a 10 megabyte limit to this, and I'm going to specifically choose that we want the CSV MIME type. So I'm going to say that this is required. We're going to set the MIMES here to CSV.
00:37
That's just all we're going to accept in here. And then we're going to have a max here of 10,240, which is 10 megabytes. So, of course, you can change this over. Let's just spell required properly. And you can fiddle around with the settings if you want to. And like I said, we're not going to show the validation errors just yet. OK, now we've got this public file property. What do we do?
00:58
Well, over here with the actual input itself, we're going to use wire model to go ahead and hook this up to file. Now, that's pretty much all we need to do now. That has then allowed us to upload the file and have it set as a temporary uploaded file. Let's just try this out. So let's go over and click on import here and let's choose a file. Now, we're going to basically choose the things that we've already exported from our system just so we can import these really easily.
01:26
So I'm going to go ahead and choose that. And that should now represent a file. Now, how can we know whether that has uploaded successfully? Well, let's go ahead and just dump our file in here and just see what happens. So this probably won't work, but there's a couple of other ways that we can do that.
01:43
And yeah, there we go. Great. So what this represents is the location to the temporary uploaded file, which is fine. That's all we really need to get this working. OK, so now that we know that this has been uploaded, we can start to bring in some of these states in here. So once we have uploaded a file, we want to show you're about to import and then choose or output the amount of records. So we're going to say in here, if file, let's say and if down there and we can say, well, we want to get rid of this file upload.
02:15
Potentially you don't have to. So I'm going to say unless file rather than do an else statement in here. Let's go ahead and unless just in there. And there we go. We should be good. So now when we go ahead and choose a file in here, we should see this change to you're about to import X record. And another thing here, which I mentioned earlier, we only really want to show the start import button if we actually have a file.
02:43
So, again, we're just going to wrap this in an if statement and we should be good to go. OK, let's hook up some of these buttons. We already know what this is going to do. When we click on this, we're going to dispatch an event called close modal. Pretty straightforward. And when we click on this, we are going to start an import, much like when we started an export.
03:08
Let's go over to the import modal here and let's just create out that method and we'll just do nothing for now. Or let's go ahead and dump that file out would be useful. OK, let's go over and click import and let's have a look. So let's choose out a CSV file. Let's click start import. And there we go. So this is the CSV that we can now use to read the amount of rows.
03:32
And that's probably the first thing that we're going to get started with. So how do we do this? Well, there's a ton of ways that you can read a CSV to grab the row count. The one thing that we're not actually going to be doing here is using the Laravel Excel package to do this. I couldn't find a really easy way to read a CSV and get the row count with this package.
03:54
Bear in mind also that if you are expecting the CSVs that your users are uploading to have a header, you might want to either add one to this or subtract or do nothing. We'll see how this works in a minute. So I'll give you a little tip that just depends on what you're doing. So let's go ahead and just do this. So we're going to say record count.
04:14
I want this to be a computed property because we're going to reference it in multiple places. So we don't want to do this over and over again. And this is going to return an integer. So let's go ahead and type in the return type of this. OK, so here's a trick to very quickly and efficiently read the amount of rows that a CSV has with PHP,
04:35
regardless of the file size and how many rows we actually have. So let's go ahead and create out a new SPL file object. That's from the SPL collection of classes directly from PHP. So this is all native code here. We're going to say this file.
04:52
So that's the file, the temporary file that we've uploaded. And we're going to use the get real path method that will return to us the actual path of the temporary uploaded file. Remember, we only need to deal with a temporary uploaded file. We don't need to move it anywhere before we start to read it.
05:08
OK, we're going to use R to read this in. And this now represents a file, a temporary uploaded file. OK, so let's go ahead and do this. This is a tip or a trick to do this. Now, what SPL file object will do when we read in a CSV, it won't read in the entire file into memory. So it will not put this entire thing into memory.
05:32
It will create a pointer to the file, but then we can seek to a specific part of this file, e.g. a row. So we're going to seek to the maximum integer that we can in PHP. Now, what does that do? Well, let's imagine that our CSV had 10 rows. We're going to seek in this file to the maximum amount that PHP allows us to use in terms of integers,
05:57
which I can't remember what it is, but of course, it's more than 10. This will seek to 10. Now, if it's a million, that's going to seek to 1 million. So basically using this, it will seek to the maximum part of this file, which will give us the position of the, we just say that return this file key, it will give us the current position of the key that we're in, e.g.
06:19
the actual amount of rows of the file. So basically what we're doing is we're saying load this file in, not all into memory, so we don't want to count it, but we're going to seek to the maximum value that's allowed within PHP, and that's going to hit the ceiling of the amount of rows that we have, and that's going to return to us the key.
06:37
Now, with this, this is an index, so what we want to do is add one onto it, and let's go ahead and check out whether this actually works or not. Now, the file that we've got here, let's see, we've got one right, so this is perfect for testing. This should just show one, so we can fiddle around with this as we go.
06:54
Let's try and dump the record count out in the import modal, so let's go up to, you're about to import X records, and we could say number from support and format, and it will be this record count, so let's say this record count, and again, for records, we want this to be a plural, so let's say record, and then we'll pass that in, and again, that's why we've used a computed property.
07:21
If we hadn't used a computed property, reading this and this would load in that file twice, which is not what we want. Okay, let's go over and just try this out, so let's go and try and import that file that we have here, and you're about to import three records. Okay, so yeah, this isn't actually what we expect, so let's go back over to that.
07:40
We've got, yeah, let's open this raw and just have a look here, so we've got the headers here. Okay, yeah, so actually what we need to do is think about this in a different way. We need to just get rid of that. That should give us two back, so let's go ahead and import that.
07:57
That should be the actual value of how many rows there are. There are two rows, but one happens to just be a header, but then what we could do is subtract one. If we're always expecting there to be a header inside of this, we could later create a toggle for this to have the user say whether the first row is a header or not.
08:17
We might change that up later, but you're about to import one record. Let's just do another export on here just to double check this, so I'm going to export 10 of these transactions. Obviously, this is pending. It's complete now. We can go ahead and download that, and let's go ahead and try and import this one that we've just exported, which should be this one just here.
08:37
Okay, yeah, you're about to import 10 records, and that is working really nicely. So we now have the file upload handled, and we have the record count done as efficiently as possible, which is going to work with a huge number of rows for any CSV file. Let's now work on the process of starting to import these records.

Episode summary

In this episode, we dive into handling CSV file uploads using Livewire. We start off by setting up file upload functionality, creating a property in our Livewire component to hold the temporary file (called file), and attaching our input field to this property with wire:model. We also cover basic validation to make sure only CSVs are accepted and put a 10MB file size limit in place.

Once uploading is wired up, we test the flow and use dump() to confirm that our file is in fact being uploaded and stored temporarily. Next, we update our state management so that different UI elements (like the "Import" button or record counts) appear only when a file is present.

The bulk of this video focuses on efficiently counting the rows in a CSV file without loading the entire thing into memory, using PHP's built-in SPLFileObject. We cover a neat trick with seeking to the largest possible integer to get the total row count, and we consider scenarios where the CSV might have headers, adjusting the count as needed.

By the end, you’ll see the UI dynamically update with the number of records about to be imported after uploading a CSV, and the process is fast enough for really big files. Next up, we'll actually start working on importing those records!

Episode discussion

No comments, yet. Be the first!