Crop and Upload Profile Photos with Livewire
This episode is for members only

Sign up to access "Crop and Upload Profile Photos with Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
10. Handling closing the modal

Episodes

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

Transcript

00:00
One last thing that we're going to cover is what happens when we close the modal, at the moment we're only dispatching an event once we've hit that done button
00:07
with all of the cropped information, so let's just take a look at the problem here and then we'll dive in and see how we can fix this, okay so I'm going to go ahead and choose a profile photo here, I am not going to be happy with this and I'm going to decide that I just don't want to upload this at all, so I'm going to go ahead and either click outside if we have
00:26
that enabled or I'm going to hit the escape key, you can see that the cropped image still stays here which is fine because we might just not want to crop it at all, but when I go ahead and save this out and I refresh the page we're back to the previous image that we had, so this wasn't a successful save, now we know why that happens because when we shut the modal off we don't do
00:47
anything, we don't dispatch an event saying that this is the image that we want, so what we're going to do is instead as soon as the image is updated as well as dispatching this data as the modal, also just dispatch this to say that we have an image that we want to use, that's later going to get overwritten if we want to crop it and if we don't it doesn't matter, so we're going to do
01:09
exactly the same thing that we did here by dispatching the profile photo to put it into the form so we always have it there and have an uncropped version, so as soon as that image gets selected we say that that's the image we want to dispatch and use in our root form and then the modal opens and we can choose whether we want to crop it or not, okay let's take a look at the
01:30
difference here, so I'm going to choose a photo, I'm going to go ahead and escape out of this, that's already been set, I can still clear it out if I want to and save it and nothing happens, but if I do cancel the modal off and hit save that's still going to use that image because we set it initially before we started cropping and there we go that's the last little thing with a modal

Episode summary

In this episode, we tackle what happens when a user decides to close the profile photo cropping modal without actually saving a cropped image. Right now, our code only stores the image when the user clicks the "done" button, but what if they just close the modal or hit escape? That can lead to unexpected behavior, like losing the image entirely if they don't explicitly save it.

We walk through a typical problem: selecting an image, then closing the modal without cropping or saving. You'll see how this causes the image to disappear on refresh, which isn't what we want. To fix this, we adjust things so that as soon as a user selects an image, it's set in the form—even before they crop it. That way, the image sticks around even if the modal is closed.

We modify our logic so that the uncropped image is always stored right away, which means the modal is just for optionally cropping. If a user cancels, their selected image remains, and if they crop, the new cropped version replaces it.

By the end of this episode, you'll have a more robust modal that handles both cropping and modal closure gracefully, making for a much smoother user experience!

Episode discussion

No comments, yet. Be the first!