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
10 episodes• 43 mins

Overview

Using Livewire, Alpine and Cropper.js (or any cropping library), we’ll create an embeddable form field for users (or any other model) to upload profile photos.

The form element will launch a modal, where users can crop and adjust their profile photo, before being able to preview and save the cropped image — or clear everything out and start again.

You’ll learn:

  • How to launch modals in Livewire
  • How to use Cropper.js with Alpine
  • How to resize images on the backend with the spatie/image package
  • How to pass data between Livewire components
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.