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
15. Dealing with specific state issues

Episodes

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

Transcript

00:00
OK, so in this episode, we're going to talk about specific state issues
00:03
that we might come across within this package, specifically when we're working with more complex data types like our temporary uploaded files or anything else.
00:12
So let's just remind ourselves of the issue. And actually, I did something wrong in the last episode, which we'll go ahead and correct before we look at the real issue.
00:19
So if we go and type abcdef for the title and description, we know that we can upload a product image that shows the preview. When we go back again and we choose another file,
00:29
this doesn't show. Now, this was my issue. So let's go over to our image preview method that we created. You can see here that the first if statement will always
00:38
return the product image. So even if we have a temporary uploaded file, after we've chosen a new image, it's never going to show. So we're just going to do a reverse of this.
00:47
And this will lead us into the state issue that I want to talk about. So we're basically going to check the image first. Since this is the most important thing,
00:55
this is the thing that's going to change more often. So we're going to go ahead and return that. And then otherwise, we're going to return a product image path. So that should get rid of that problem.
01:06
And we should be able to see that new image. But we'll see another issue with our state. So let's hit Next Step, choose a image that shows that temporary uploaded file.
01:15
When we go back, sure enough, it shows the product image. So that was just swapping that around. Now, though, when I choose another image, notice we get called to a function temporary URL
01:25
on array. So basically, we're trying to call this temporary URL here on this, which is now an array for some reason. So the one thing that I would take away from this video
01:36
is that when you are building with this package, regardless of what you're doing, always try and inspect your state. Because sometimes, it might not be as you expect.
01:46
So let's go and just die dump on this image and just figure out what is actually happening here. Now, I'm not going to do that just yet. I'm going to comment this out.
01:53
And I'm going to do this and re-enable it just at the point when I choose a new image. So I'm going to go ahead and choose this, go Next Step and back.
02:01
And now, just before I choose a new image, I'm going to re-enable this die dump. And that means that when I do that, it's going to show me my state.
02:08
So you can see that what has happened is this package has put this temporary uploaded file not directly back into the property, but it is now wrapping it in an array. So what we need to do is basically
02:19
fetch this uploaded file out of this array and set it back into this image if we choose a new image. So let's go ahead and figure this out now. So I'm going to get rid of this die dump.
02:31
Now, how can we do this? We could do this in a couple of ways. We could do this at the point we're trying to access the image.
02:38
Or what we could do, which is a little bit easier and doesn't require as much maintenance, is up here somewhere, create some sort of listener. So when this image changes, e.g.
02:48
when it's put back into state, get it out of that array. And that's basically what we want to do. So we could do this up here. Or because we've got our step info,
02:56
I'm just going to do this down here. We're going to create in a lifecycle hook with Livewire called updated. And then we're going to give the name of the property, which
03:05
in this case is image. So when this image gets updated, either through the state being updated or when we update it, what do we want to do? Well, we basically want to unpack this array
03:16
and just put it back into the property as a normal temporary uploaded file. So to do this, we first of all need to check if it is an array.
03:24
Because if it's not, we don't need to do this. So let's say is array this image, which is what we have at the moment, remember. Then we just want to reset this back to its original state.
03:36
So we're going to go ahead and use the array helper. I'm going to flatten this out, just in case we have any additional items in there which have seen with some data types in here.
03:47
And then we're going to go ahead and flatten that out. And we're going to use head to access the first item from that. So basically, grab this value out of a nested array,
03:58
potentially nested array or potentially multiple items, and grab the first one. So we should be good now. So basically, any time this is an array,
04:07
get it out of the array and put it back into this image. OK, let's try this out and see what happens. And we'll just make sure we get rid of that die dump. And we have.
04:15
OK, so let's create a new product. And let's choose an image. That looks good. Next step is good.
04:21
When we go back, it works. Now when we choose a new image, that is going to be put into an array. But we're now plucking out that array.
04:29
So we now get that file working nicely. Now when I hit Next Step, nothing happens. So this is now not updating that image that we previously set. So that is another issue.
04:42
Now the reason that this is happening, if we come down here, remember we have this check in here, which check if we already have a product image, just go to the next step.
04:51
Now that's not what we want to do. We want to check if we have a product image and we don't have another uploaded image. So if we have an image, that's fine.
05:01
And we don't choose to update it. We'll just go to the next step. But only do this if we don't have a newly uploaded image. So then it will go through and validate it.
05:10
And then it will go through and store it again. OK, let's try this out one more time. So I'm going to go ahead and enter all of this information. Choose an image.
05:20
Let's go back and let's go Next. That's expected because we didn't actually store this. So that's fine. Let's go Next.
05:26
Let's go back again. We get that image. Let's choose a different one. Next.
05:31
That uploads now because we are adding in that additional check within our if statement. Let's go back again. You can see that that works.
05:39
And now I can just navigate through each of the steps. I can change the image again if I want to. And everything is working nicely. So the real takeaway from this, apart from the couple of things
05:50
that we forgot and neglected to add in the last episode, is that your state can sometimes get wrapped in an array just because of the way that this takes the items from this and stores it in the state within the component.
06:05
So if you are building your own forms after this and you come across an issue where something just doesn't feel quite right with your state, die and dump it like we did, and then go ahead and change it.
06:16
And in this case, I used a lifecycle hook because it means that we can just reset the image back to how it was, and then we can just continue with updating this.
15 episodes•1 hr 38 mins

Overview

Everything you need to build multi step forms in Livewire.

We'll cover the basics of creating a multi step form, adding steps, navigating steps and accessing state using the laravel-livewire-wizard package.

Finally, we'll build a fully working practical example with more advanced step navigation, file uploads, and custom state.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!