Livewire Multi Step Forms
This episode is for members only

Sign up to access "Livewire Multi Step Forms" right now.

Get started
Already a member? Sign in to continue
Playing
14. Handling more complex backsteps

Episodes

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

Transcript

00:00
So everything was going so well until we started going back to previous steps to modify what we had already done,
00:06
and then our state started to either get lost or just not work. So let's take it step by step and go ahead and figure out each of these problems as we go.
00:17
So let's go ahead and just create a really quick product in here, and I'm going to go ahead and upload an image. Now, I'm going to go back to the image step where we upload an image.
00:27
And ideally here, what we'd want to do is show the image that we already had chosen. So our image preview is obviously based on that uploaded file with that temporary URL.
00:38
Ideally, we want to either show the temporary URL if an image has been chosen or just show the previous product image, because at the moment when we hit Next Step, we've completely lost this state.
00:48
The image isn't there, so we can't even progress to the next step. OK, so let's go ahead and figure this one out first of all. So we'll go over to our image step,
00:57
and we'll also open up our image step component here. This is where we use this temporary URL. So let's fix this first of all. So what we're going to do is create out a computed property.
01:09
So let's just do this up here called image preview. Now, the benefit we have now is we can either grab the image preview from the uploaded image, or we can grab an image preview from the already created product
01:24
image. So let's make this a computed property. So we don't get into trouble if we access it more than once. And let's look at the logic that we need to implement here.
01:33
So if we already have an image in state, we want to show that image. Otherwise, we want to show the product image that we've uploaded.
01:42
So let's go and say return this image. And what do we have? Temporary URL. And then in here, let's say if this state product,
01:58
we want to show the product URL. So let's return this state product. And again, what we're doing here is we're accessing this twice. We're going to change this over in a minute.
02:10
But just be aware of every time you access product, if you're doing it multiple times like this, you're going to be looking this up in the database every single time.
02:18
So we're going to change this around, and this is just going to be a really simple solution for now. So let's remind ourselves that was image path. So let's go ahead and return image path.
02:27
OK, so let's see if this works, first of all. And of course, we need to change this over in our image step template. So we're just going to say this image preview, like so.
02:40
And the condition is now going to change as well, because it's not if we have an uploaded image. It's if there is an image altogether. So we can just swap this out for if this image preview.
02:52
OK, let's try this out and see what happens. So let's enter a description here, choose an image. And yeah, that's not working. So let's just go over to our image step.
03:03
And OK, yeah, so we've already got a product. So we want to search for image path. Again, we're going to be changing this up, because we're going to see an issue with this.
03:11
But let's allow image path. And then if not, we'll grab the temporary URL. OK, let's try this one more time. And OK, temporary URL on null.
03:20
That's fine. We can go ahead and get rid of that. And let's try this again. And that should show it.
03:28
Now when we go to the next step, that's obviously saved it. When we go back now, that's now pulling from the product image itself. Great.
03:37
So that is working nicely. Let's go back again, and then go next again and see what happens. And you can see, sure enough, it's still working nicely.
03:46
Now when we go to the next step, though, what's happening? Well, nothing, because we don't have an image in here. And we're validating the image here. So now what we need to tackle is we're
03:56
showing this already created product image as part of this step. But this next button now is validating that we have an uploaded file, which we want to get around.
04:05
So what we're going to do is come down to Submit. And we need to figure out how to handle this in here. So what we can say in here is if we have, and it's pretty similar to what we did in our image preview,
04:17
if we have this image path, which again, what we're now doing is making another request to the database. So we'll sort this out in a second. If we do have an image path, then we're
04:26
going to go ahead and do an early return. But we want to just navigate to the next step. So again, we're now using these programmatically based on a condition to go to the next step.
04:36
So when we submit this form, e.g. go to the next step, so Submit is kind of misleading. If we already have an image path, we don't need to validate anything.
04:45
We don't need to update anything. We just want to go to the next step. So let's try this out again. So A, B, C, D, E, F, go to the next step,
04:52
choose an image, looks good. I want to go back. I want to go back again. Next step will update them details.
04:59
Next step will now just flick us over to that next step rather than trying to update anything. So now we can pretty much just navigate through this. And it works really nicely.
05:10
Now we need to talk about the problem of accessing this state product over and over and over again. So what we'll do is go ahead and pull in Laravel debug bar just so we can keep an eye on our queries
05:22
and just make sure we are keeping them as reduced as possible. So once we pull in Laravel debug bar, that's going to go ahead and give us a nice bar
05:30
at the bottom here where we can keep an eye on the amount of queries that we are running. So let's just go through this and have a look at what it looks like.
05:37
So next step looks okay, couple of queries. When we go to the next step now, we've got two queries. And when we go back again,
05:45
we're now duplicating these queries. So it's not a huge deal, but we kind of don't want to do this. Depending on how long this is going to take,
05:54
we want to keep this as fast as possible. So what I'm going to do is inside of this image step, specifically, you can do this anywhere, is create a computed property out for this product.
06:03
And that will allow us to access this multiple times throughout the life cycle of this, just this one instance of this component rendering, but it won't go ahead and keep making a request to this.
06:14
So let's create out a method in here called product. So it's kind of like a proxy to grab that product. But again, we can make this computed and we can go ahead and return this state product.
06:26
So kind of like what you do in a live wire component, if you were accessing the user over and over again, you would create out a user computed property. So it's the same kind of thing.
06:36
So now we can just say this product image path and this product image path, and that's all good. And we can do the same thing for here as well. We can just reference this where if we need to.
06:49
Okay, great. Let's just check this. And we could even do that for here as well if we wanted to, but we'll just leave that one out for now.
06:56
Okay, let's try this out. And hopefully we've got one more query reduced and we should be good. So let's go next step and let's go back again.
07:05
And there we go. We've only got one query, which is great. So one query just to fetch out all this information, regardless of how many times we're trying to access this.
07:15
Okay, let's just review this because this can be pretty complex. And once again, depending on what you're building, this is going to be completely different.
07:22
You just need to think about all of the instances of what you're doing in here and how all this kind of fits together. So let's go back to the image preview method here.
07:33
So we know that to get an image preview, we have a temporary uploaded file, which we were doing this in our template previously. When we navigate back, we don't have a file.
07:44
We haven't uploaded a file. It just exists as a path within here. So by creating this image preview, we're checking if we have an image preview already.
07:53
So when we go back to that step, that is the preview for the image. So next, when we submit this, we had a problem where we were validating,
08:01
but we were validating something that again, hadn't been uploaded because we're just referencing the previous product image. So we go ahead and skip to the next step
08:10
if we already have a product image. And then of course, we go ahead and create this computed property so we don't run into causing too many queries.
08:18
So let's just roll through this whole thing and just check everything looks good. So I'm gonna go and just clear my database out and we're gonna go through this
08:26
as if we were creating a product. So a product, a product description, and let's hit next. I'm immediately gonna go back just to modify something.
08:37
Let's go ahead and update that and go back to the next step. That all looks good. And again, in our database,
08:42
that title would have been updated. Now I can choose an image. At this point, I've not hit next step, but I still can go back
08:50
and I can go back to the next step, but we get this temporary URL on array issue, which we're gonna fix up. So we'll do that next.
08:57
So let's go back and just do this again, a product and a product description. And let's just go ahead and get rid of this from our database.
09:05
Next step, choose an image. We'll fix that other issue up in the next episode. But when we go back here, that looks good. I can go back again.
09:13
I can choose a different image here, but I can't. Again, that's the same issue that we just saw. We'll look at that next. And then I can hit publish.
09:21
So give that a refresh and everything is looking good. Now, the problem that we've just seen, we probably thought all of the problems had just gone now, is if we just create our really temporary next step here,
09:36
and I click on this, when I go back now, what that has done is the package that we're using has stored that image that we uploaded in state.
09:47
So when I go back to the next step, what that package is trying to do is put that image, that temporary uploaded file back into state because we hadn't done anything with it.
09:58
So what that is going to go ahead and do is it's going to wrap that in an array. The state within this package is always stored in an array. And of course, the class that we're working with
10:07
just doesn't work that way. So we're going to see how to solve this in the next episode when we look at some of the specific state issues with this, and that will solve the other issue that we saw as well,
10:18
where when we go ahead and create something out and we choose an image, and then we go back and want to change it, it doesn't quite work.
10:29
So now that we've looked at these more complex back steps, let's talk about the specific state issues that we might come across when we're working with this package.

Episode summary

In this episode, we're tackling a pretty common headache when dealing with multi-step forms: what happens when the user goes back to previous steps to edit something they've already entered! Things can get messy fast—like losing the state of form fields, in this case, the uploaded image, which just disappears or makes the form misbehave.

We start by re-tracing the steps of creating a product, focusing especially on uploading an image. Then, we test what happens when we go back and forth between form steps. You'll notice the image preview doesn't stick around as expected, and weird things start to happen with validation and navigating to the next step.

To fix this, we start by implementing a computed imagePreview property. This smart little property checks if there's a temporarily uploaded image to show, but also falls back to the already-stored product image if there isn't. So, now, when you go back to the image upload step, it still shows the image!

Next, we update the logic that handles moving between steps—so if there's already a product image, we just let the user continue instead of nagging them to re-upload the image. Along the way, we realize we're making too many database requests every time the form checks the product state, so we introduce another computed property to keep everything efficient by caching the product info within the component.

To double-check for extra queries, we pull in Laravel Debugbar and clean up our computed properties until we're at a single query for these operations. Then it's time to quickly review and live-test everything, making sure the fixes work and reviewing the code one more time for clarity.

We wrap up by noticing some edge case issues (like how temporary uploads sometimes get wrapped in arrays by the package we're using), and we set up a segue for the next episode, where we'll solve those pesky state management problems once and for all.

Episode discussion

No comments, yet. Be the first!