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
09. Clearing a cropped profile photo

Episodes

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

Transcript

00:00
We've got a couple of issues here that we need to fix up.
00:02
The first one is we want to be able to clear the profile photo that we have chosen in case we don't want to submit this through the rest of the form. Let's just take a look at what that looks like. So if I choose a photo here and I go ahead and crop this down, hit done,
00:17
there's no way to get rid of this at the moment. So I'd have to refresh the page. So let's go ahead and deal with that first and then we'll look at a side effect of us doing this and how we can resolve it.
00:28
OK, so let's go over to our profile photo field and let's just only show this choose photo if we have an image. So let's go and end this. And yeah, we want to show that if we don't
00:43
have an image and then we want to show another button if we do have an image to clear this out, so if we do have an image in here. Let's show just a button, remember a type of submit so we don't submit the parent form and that will be to clear this out
00:57
and we can just reuse the same styles here. OK, now once we click that image, we want to go ahead and call some sort of clear image method over on here to just get rid of this. So let's go over to our profile photo field and let's just introduce
01:13
that method in there to clear this out. So the two things that we want to get rid of are the image itself, the uploaded image itself. But we also want to get rid of the cropped blob because we don't want to show
01:25
a preview of the cropped image if we're clearing this out. So let's go over and just try this out. Let's go and choose a photo. Let's just pull this in and crop this.
01:35
Hit done. And I'm going to go ahead and hit clear. And yeah, OK, so the issue that we have here is we set this as a string. So let's make that nullable as well or just get rid of the type in.
01:47
OK, one more time. Let's choose an image. Let's go ahead and crop this down and hit done and hit clear. And there we go.
01:55
We're back to the previous photo, whether that's the default one or our previously uploaded one. Now, the problem we've got here is I've cleared this out, but when I hit save and give the page a refresh,
02:06
it still shows the cropped image. Now, the reason that this is happening, it's still uploading the cropped image. The reason that this is happening is because down here, remember, we are always dispatching the cropped
02:17
profile photo, which goes through to that form. So what we can do is we can take this dispatch here and when we clear this, we can also dispatch this. But we can set this to a null value.
02:27
So as well as them two things, we're going to dispatch the profile photo is null. So if we come over to our update profile information form where we are dispatching this event and listening for it again,
02:40
of course, if we're setting this to null, we don't want to create a temporary uploaded file from null. So if that is the case and if the profile photo URL here is null, so we can either do a specific null check or just check it for some sort
02:53
of empty or false value, we just want to return and do nothing. But before that, we want to set the profile photo to a null value. So we want to explicitly set that to null. So it's completely out of that form and doesn't get included.
03:08
OK, let's just go ahead and try this out. So I'm going to choose a new photo here and I'm going to crop this very slightly like this. Hit done and then I'm going to clear it out and hit save,
03:21
give that a refresh and we are still now at our old profile photo. And let's just go ahead and change this around just for the sake of making sure that this is all good, hit save. And there we go. Great.
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.