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
25. Resetting state

Episodes

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

Transcript

00:00
We saw an issue in the last episode
00:01
when we imported a file here and hit Import. So when we chose a file, mapped this up like this, and then hit Import, we get all of this data hanging around. Technically, we've got the file hanging around.
00:16
We've got the columns that we want to map hanging around. All of that data hasn't been reset. So what we want to do in this episode is make sure we do that so the user's
00:25
ready to upload a new file if they choose a different one at the same time. So over in the CSV Importer here, let's open this up. Just before we go ahead and emit this,
00:36
it doesn't matter which order we do this in, what we want to do is reset some of the properties that we have got inside of this component. So let's just go through the ones
00:45
that we don't want to reset, and we'll kind of exclude them. You could do this in the opposite way and reset only the ones that you need. But I'm going to do this in the, I'm
00:55
going to reset everything except things that we don't want to reset. So we don't want to reset open, because that's going to go ahead and close the modal once we've set this up.
01:05
We don't want to go ahead and reset the columns that we want to map, because if we do that, what's going to happen is the stuff that we did in mount is going to be lost.
01:15
You could go ahead and redo this if you wanted to, but I think it kind of makes sense to keep the columns to map anyway, although you could change that. We don't want to reset the column labels,
01:24
and we don't want to reset the required columns. And of course, we don't want to reset the model either, because then that data is not going to be available. So what we can do is just go down to where we import.
01:34
And once we've done everything here, we can just do a little bit of cleanup. And resetting properties in Livewire will just reset them back to their original state.
01:43
So you won't lose any of the original state that you set. So we're going to go ahead and say reset except. What you can do is reset only if you want to, or just reset, I think it is, and just pass through an array here.
01:55
But I'm going to go ahead and do this the other way around. And we're going to pass in an array here. So what don't we want to reset? We don't want to reset the model.
02:05
We don't want to reset the columns to map. We don't want to reset the column labels, because we'll lose them otherwise, and then our validation will look weird.
02:14
We don't want to reset the required columns. And we don't want to reset the fact that this component is currently open, or it will just be reset back to false, and it will close.
02:25
So let's try this out now and see what happens when we go ahead and start multiple imports. So we're going to go ahead and upload this file here, choose customers.csv, map all of these up, and hit import.
02:39
And that goes. So what we can now do is choose another file, and we get back this. Now notice this kind of state hasn't been reset,
02:45
but I think that kind of makes sense in the context of importing multiple files. These have not been reset, but that's absolutely fine. You can reset them if you want to.
02:55
We can go ahead and import now, and everything gets reset back to how it was. And of course, if we had more rows, or we didn't start our queue,
03:02
we would see multiple imports in there in progress. So there we go, just a little bit of cleanup, so we don't leave anything hanging around after we've imported.
25 episodes•2 hrs 20 mins

Overview

Let's build a powerful CSV importer with Livewire, completely from scratch. This can handle millions of rows, be reused for multiple models, and by using job batches, doesn't require the browser to be open.

This course is for you if:

  • You need a robust importer 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 job batching and queues in Laravel
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!