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
03. Building the profile photo upload field

Episodes

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

Transcript

00:00
By the end of this episode, we'll have created a profile photo upload field,
00:04
added it to our profile information, and we'll have the ability to actually upload a file and see a preview of that image. So let's go over and first of all, explore if you are new to Laravel Breeze, the profile, the profile information form. So let's go ahead and find this. It should be update profile information form .blade.php inside of the views live by profile directory. Now, I chose Vault when I set up Laravel Breeze, and you can see that the class for our live wire component to actually upload this is directly within this blade file.
00:36
Now, when we create out this functionality, I'm going to be creating live wire components out rather than the Vault style. But it doesn't really matter what you do. It all works the same. OK, so this is our form to upload, update all of our profile information. And then if we come down to the form itself, we can see we've got the name here. We've got the email. And then just underneath this, we're going to add in our component to upload our profile photo.
01:02
So let's go ahead and build that out with live wire make. And we are just going to create this as profile photo field. Again, you could create a blade file and have this as a Vault syntax if you wanted to. It's entirely up to you. OK, so let's open up. In fact, let's just go ahead and register this on the page first of all. So profile photo field. And we're pretty much done with that. Let's open up our profile photo field component.
01:28
So the first thing that we're going to do before we do anything else is use the with file upload with live wire. And that's going to go ahead and add in that functionality so we can actually upload files. And we're going to go over to the profile photo field blade file and in here include an input type of file. Let's call this profile photo. Doesn't really matter too much.
01:52
Profile photo. And in here we need a label to actually select this. We don't want to see the actual input. So let's say choose photo and then we can go ahead and hook that up to that ID. And then we can use Tailwind or any CSS to hide this. So I'm going to set this to a class of screen reader only.
02:11
So we basically end up with this that we can click and then obviously choose a file. Now, when we choose a file, we want to see a preview of this. So let's go ahead and output an image in here. We'll get rid of the alt for now. And then we want the temporary uploaded URL to be inside of this image.
02:28
So to do that, we need to go over to here and actually store this profile photo. So let's call this image and then we can validate this at the same time. So let's pull in the validate attribute from live wire. Let's say that we want this to be an image and we'll say a max of 1024.
02:47
And of course, you can adjust that. OK, so now we've got this image. What we can do is directly in here when we hook this up with a model. So we're going to say wire model image.
02:58
When this changes, that is now going to become a temporary uploaded file, which we can grab the preview from. So in here we can say image temporary URL and we should be good. Now, this isn't going to look great at the moment, but we'll style it up in a second. OK, so we get temporary URL on null.
03:17
That's absolutely fine. We only want to see this if we actually have an image. So let's go ahead and first of all, check that. And then we'll go ahead and end the if just inside of there.
03:27
OK, great. So let's go and give that a refresh. Let's choose a photo. Click on this. And sure enough, we see that image. Great. OK, so let's go ahead and just start this up really quickly.
03:37
So I'm going to go ahead and set the entire container here to have a flex with item center and we'll set a space on the X axis of three to space everything out. Our image will sit there. What I'm actually going to do in here is get rid of this if statement, because if you think about it, we want to show the temporary uploaded file or the current user's avatar. So what we can do in here is do this in a ternary.
04:01
We're going to be modifying this later to grab the cropped image as well. So if we do have an image, we want to show that. Otherwise, we're going to show the user's profile photo. So let's say auth user and profile photo URL and we should be good.
04:16
OK, let's go over and give that a refresh. And yeah, we see the default here plus the choose photo. OK, let's go ahead and just continue to start this up. So I'm going to add a class onto the image with rounded large and we'll set this to a size of 12.
04:30
So that just reduces that a little bit. Let's make sure we're also running npm run dev here so we get our updates. OK, great. So that's a little bit smaller.
04:40
And then for the label here, let's go ahead and start this up as well. We'll set this to a text small and we'll set this to text indigo 500 just so it looks like something we can click. OK, great. So when I click on this now and choose something, sure enough, that gets put directly into there.
04:56
Super simple to do with Livewire. But there's one thing I want to address now before we go any further, and that is that we want this to work for any model. We've already created that tray out on the user model, which allows this to be used on any model type, whether that's a user team or any other model in your app.
05:13
So what we're going to do is we're going to slightly adjust the profile photo field and into this, we're going to accept in a model that this relates to. And that means that when we reuse this, we can just pass in that model rather than tying this specifically down to the user. So let's go ahead and pull the model namespace in there.
05:30
And now with this, what we can do is we can pass this through from here as a prop. So let's go ahead and say model. And then we're going to pass in the user directly into there. Now, what we can do instead of over here using this, we can just grab the default profile photo from the model,
05:47
which we know has that trait. So this will now work for any model type. So let's go ahead and just try that again. And yeah, sure enough, it still works.

Episode summary

In this episode, we're diving into adding a profile photo upload field to our app. We'll walk through exactly where to add this field within the existing profile information form—specifically inside the update-profile-information-form.blade.php in a Laravel Breeze-powered project. Even if you're new to Breeze or using the Vault stack, everything here will still make sense.

We build out the profile photo upload field as a Livewire component for flexibility, register it within our form, and get it ready for uploads. Using Livewire's WithFileUploads trait, we let users pick an image and show a preview right away—so you can see your new avatar before saving. There's a bit of Tailwind styling here too, making sure the upload button feels user-friendly and the photo preview looks clean.

One cool twist: we make the component reusable for more than just users! By making sure the upload field accepts any model, you can use it for teams or other models just by passing them in. By the end, you'll have a polished photo upload field that shows the current profile photo, lets users select a new one with an instant preview, and is easy to reuse elsewhere in your app.

Episode discussion

No comments, yet. Be the first!