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
12. Tracking imports with a model

Episodes

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

Transcript

00:00
After we've gone ahead and uploaded a file and hit import, once the validation has passed, the first thing that we want to do is create an import record in the database. This is going to help track the import so when we refresh the page or come back later,
00:14
we can fetch this record back out of the database and we'll see the current progress. Now, the import model itself won't deal with actually importing the data. What this will do is just provide a unique import with the path of the file, the file name, the amount of rows in the CSV, and the currently processed rows, as well as the date that it was
00:35
completed. So in this episode, we're just going to set up this import model, create it after we hit import, and see that in the database. Then once we move on to our queues and actually processing the CSV and upserting all the records, we'll update this model so we can basically grab the process whenever we need. Okay, so let's go over and create this model out. So we're
00:58
going to say php artisan make model import, we'll create a migration and a factory alongside that as well, and we'll head straight over to the create imports table migration. So think about the kind of data we'd need to store for an import. Now, first of all, this needs to belong to the user that's currently signed in, or if you're building a team app, then it will belong to the
01:18
team that you're importing for. So we're going to go ahead and add in a foreign ID for the user here so we can create a relationship. The second thing that we're going to be doing is just adding a really simple string in here for the model, you could set up some sort of polymorphic relationship here if you wanted to, but I don't think it really makes much sense. We just want to keep track of
01:38
the kind of model that we have here. So we can use a where statement to or where clause to grab the models for a particular thing we're uploading. And we'll see that a little bit later. The second thing is going to be the file path, just in case we need to try it again or re-zoom it at any point. So file path, and we'll also include a file name. Now, the file name is purely
02:00
for display purposes. We don't really want to show the temporary upload file name because that's a huge randomly generated string. So we want to include the original file name in here just so the user can see the actual file that we're uploading. So the second is going to be, or the two things that we need to do are two unsigned integers. They could be big integers depending,
02:22
but I don't think we really need them. And that's going to be the total rows and then the processed rows. So let's add them both in there. And we're going to default these to zero. And we don't need to default this because we're going to be inserting that when we create it. We just want to default the processed rows. And then finally, we'll finish off with a date time when this was
02:45
completed. So we'll say completed at, and we'll make this nullable because of course initially this will be null. It wouldn't have been completed. So that's pretty much all the data we need inside of our import table. Of course, you can add more later if you need to. Let's go ahead and migrate this and we'll get these created. Okay, so the relationship a user has many imports. That's
03:05
pretty much all we need for now. So let's go ahead and say imports, and we'll just create a really simple has many relationship in here and relate that to the import model. It's pretty much all we need to do. Okay, so over in our import component, once we have clicked import and validated, this is where we want to create that record. So let's go ahead and create out another method in here just
03:29
to keep this a bit separate. We'll call this create import, and we want to return this as well. So we're just going to use auth user. We'll access that imports relationship, and we'll go ahead and create an import. So what's the kind of initial data that we need here? Well, we need the file path. So that's going to be the actual path in case we need to presume it. We're going to need
03:49
the file name, which we're going to grab from the client uploaded name. We'll see how we do that in a minute. We're also going to have the total amount of rows as well. And we'll also have the models, the model we're currently working with. We'll start with model because that's easy. We passed that in earlier as a string. And again, you could set up a polymorphic relationship here, but I don't
04:08
think it makes too much sense. Just this is enough to get this working. Okay, so the file path, we've already accessed this. So that's quite easy. This file and get real path, that's to remember the path to the temporarily uploaded file within Livewire. And the file name, the real name of the file that we've updated is just get client original name. I mean, you can find all of these
04:32
methods in the classes that you have extending from the temporary uploaded file in Livewire. So just dive into each of these, even in the symphony uploaded file, and you'll find all of their methods if you need any more. Now the total rows is a little bit different. For that, we're going to need to be able to access the amount of records we have by reading the CSV and grabbing out all of
04:56
the records. So we're going to leave that just for now. We'll do that in the next episode. But let's just see how this works. So let's go ahead and invoke create import just here. And we'll see what kind of data we get in the database. So let's start fresh. We'll go ahead and upload a file here. Remember, this is called customers.csv. And of course, we can't proceed any further until
05:16
we have selected each of these. So let's go ahead and do that now. These are jumping a bit. So we'll figure that out in a second. But let's map all of these up and hit import. Okay, so yeah, we just need to add the fillable properties to our import. So let's go ahead and do that now. We can even make this unguarded. But let's set out our fillable columns in here. And just to make this easier,
05:40
let's reference the migration. So it's pretty much going to be all of these. So model, let's just copy and paste these over quickly. It's going to be the file path, the file name, and the total rows. And the process rows. And we should be good with just that. While we're here, what we could also do is add in the completed date. Or let's say completed at. And we could also, while we're here,
06:12
so we don't forget, cast this using eloquent. So completed at. We know it's a date time, so we want that to be converted to a carbon object. So we can add that into our casts as well. Okay, so that wouldn't have been created in the database. Let's try this again now that we've got them fillable fields in there. Choose customers. Map all of these up. Again, a little bit time consuming,
06:36
but not too much. Hit import. And there we go. That looks like it worked. So if we head over here to the imports, we've got our customer model, which we can use to categorize this. The reason that that's important is if we had another section where we're importing different data, so if we were importing users, for example, or product, then we'd only want to show the progress
06:58
for product uploads on the product import pop-up just here. So we're going to use that to separate them out. The file path, again, if we need to resume it, the actual file name for the user's benefit, and the total rows, process rows, and completed at, which all default. Now we're going to figure out this total rows now, and that's going to require a little bit of tweaking to
07:18
what we've already done, and we're just going to talk a little bit more about how we read the records, the actual records from the CSV to be able to get this. So let's head over to the next episode. We'll do that, and then we'll be ready to start adding in our queues to actually process and update each of these imports.

Episode summary

In this episode, we start building the foundation for tracking CSV imports in our application. After a user uploads a file and hits import (with validation out of the way), we want to create an Import record in the database. This record helps us keep tabs on the progress—so if you refresh the page or check back later, you can continue right where you left off.

We walk through setting up an Import model and migration. The model stores useful info like the file path, file name, which model you're importing (e.g., customers or products), how many rows are in the CSV, how many have been processed, and when the whole import finished. We discuss why each piece of info matters, and how this structure lets us show import progress to users or support features like resuming an incomplete import.

We set up the relationship between users and imports (every user can have many imports). Then, we hop over to our import component and add logic to create an Import record as soon as the import starts. By the end of the episode, we're able to upload a file, hit import, and see a new record appear in the database with all the right fields.

Finally, we point out some small tweaks needed—like making sure fields are fillable and casting date fields properly. At the end, we leave off with a teaser for the next episode, where we'll figure out how to automatically count the total rows in the CSV so the import record is even more useful.

Episode discussion

No comments, yet. Be the first!