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.

Episode summary

In this episode, we get into the nitty-gritty of dealing with some tricky state issues that can pop up—especially when working with more complex data types like temporary uploaded files in our package. We start by revisiting a bug from the previous episode where uploading and previewing a new product image wasn't working as expected. After identifying and fixing an initial issue with the image preview logic, we hit another snag: the uploaded file ends up being wrapped in an array rather than being the expected single object. This causes some confusion and errors when trying to access its properties.

To figure out what's going on, we use some die/dump debugging to inspect the state of our image property during different stages of the flow. We discover that after choosing a new image, the temporary upload is now inside an array, so we add a lifecycle hook (updated for the image property) to automatically pluck out the file from the array whenever the image state changes.

We then run through the form again to confirm everything is working—able to upload images, preview them, switch between them, and ensure the correct image is displayed throughout the steps. There's also a quick fix where we tweak some conditional logic to make sure validation occurs when a new image is provided, not just when one exists.

The big takeaway is: always closely inspect your form's state if things aren't behaving, as sometimes Livewire or your tooling might wrap data in arrays or change object shapes, which can throw off your logic. Debug, adjust, and use lifecycle hooks to keep your state tidy!

Episode discussion

No comments, yet. Be the first!