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
02. Getting the User model ready for profile photos

Episodes

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

Transcript

00:00
Okay we're starting out here with a fresh project with the Laravel Breeze, I've of course chosen the Livewire option and I've chosen Vault with a class-based syntax, you don't need to do this
00:10
and it doesn't really matter too much but if you are following along and want to integrate this then that's the option you're going to want to choose. I've run the migrations, everything is ready to go, we're just going to set our user model up now so they can store profile photos.
00:25
So let's go over to our code and we'll go ahead and create out a migration here so let's make a migration and we're going to call this add profile photo url to users table. Okay let's go and open this up so add profile photo url and this is going to be super simple just
00:42
a string in here with profile photo url and this is going to be nullable. Okay let's go ahead and run our migrations and we're done. So for the user model rather than just dump everything in here I like to create a
01:00
trait for this in case we have another model that needs a profile photo url for example a team you might want to upload a profile photo for your team so we're going to break this out into a trait so over in the models directory let's create out a traits folder in here and then we'll create has
01:17
profile photo in here so let's go ahead and set this up real quick and this is obviously a trait and we're going to call this has profile photo. Okay so we can immediately go ahead and use this over on the user model and then all of our profile functionality can go in
01:39
there so the first thing that we're going to do is add in a default profile photo url if the user doesn't have a profile photo so let's say default pro profile photo url it's just going to be a method not a
01:52
getter and we're going to return and use a url from ui avatars so I already have this built up it's pretty straightforward we just take the full url to any service that we want to use we url encode the names that gets put in there
02:06
properly and then we just add any other options onto here and you can go ahead and grab this code from the github source code if you want the next thing we want to do is add in a method that will actually get the profile photo url and then fall back to the default so profile
02:19
photo url obviously we're not actually running this but we're just going to kind of wing this for now so by default I always want to return that default profile photo url but then I want to grab the profile photo url that we've uploaded via the
02:34
column in the database and pull that from storage so we're going to go ahead and first of all check if we have a profile photo so let's say this profile photo url and then if we do have one we're going to return using the storage facade let's pull
02:51
that in and we're going to pull that from our local disk so that's where we're going to be uploading to you can change that if you need to so we're just going to pass in this profile photo url and we're done so grab it from storage if it exists
03:06
otherwise fall back to the default profile photo url so let's go ahead and just really quickly test this out I'm not going to write a test for this but we'll just go ahead and create out a basic route to check that this is working
03:17
so let's say profile photo and we'll go ahead and grab the currently authenticated user and just grab the profile photo url from here and we'll just dump that out to the page great okay so let's go over to that profile photo here and yeah sure enough that
03:36
puts my name in there that I've registered with and then of course if that's in storage that's going to pull that out of storage and we'll see that working later okay great let's get rid of that route and we are pretty much done with setting up our user
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.