This episode is for members only
Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.
Get started
Already a member? Sign in to continue
Playing
22. Storing a profile photo
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
Transcript
00:00
So now that we're able to select a profile photo, at the moment we're not actually sending this through when we hit update, so obviously nothing is getting updated.
00:10
Now to start doing this, we're going to head over to our component here, and we need to attach this to the form before we receive this into the back end. So we're going to go ahead and set this as photo, and we'll just set the default value here to null. Now when this profile photo changes, we need a way to update our form.
00:28
What we can't really easily do is just bind this in like a model. So what we're going to do is go and bring in a watcher with view, and we're basically just going to detect when this photo value updates. When this photo value does update, we're going to go ahead and attach it to the form.
00:45
So let's go down here, and we'll just do this underneath here. We're going to go ahead and watch that photo, and then with that photo that we get through, we can go ahead and update our form. So we can set form photo to the photo that has changed.
01:00
So let's go ahead and just keep an eye on our form value. We can do that just at the top here. So let's go ahead and output our form, and let's just give that a refresh and choose a photo here, and you can see sure enough that photo now is a file, which is great.
01:17
So now when we send this through to our back end, we should be able to pick this up. Now let's think about where we're sending this through to. Once again, if we pull open our root list, we can see that when we update our profile information, we're going through to this profile information controller.
01:32
So let's go ahead and open that up, and sure enough, we get this in here, and it will go ahead and use that update profile user information contract, which is bound to that object, and that's that action within our project. So if we go ahead and open up update user profile information,
01:48
let's just die dump here, and let's die dump on the input. So that's going to be all of the input that's sent down. So let's just see if this exists in there first of all. So let's choose a photo, hit update, and we should see that output.
02:03
Let's go ahead and open up our console and just try this again. Let's send a photo down. Now I think this is because if we just head over to our account area, we're currently posting this data down, or we're using put to put this data.
02:19
Let's swap this over to post, and let's go ahead and spoof the method inside of our form. To do this, we can go ahead and use the method or underscore method and change this to put. So let's just give this another try. OK, so we'll go ahead and choose a photo here, hit update, and there we go.
02:37
That gets sent down. So this requires that we actually send a post request through rather than a put request, but we can modify it like that. And you can see that this photo now contains an uploaded file.
02:49
Now with an uploaded file in Laravel, we can very easily store this into a location of our choice within storage in the framework, and then we can update the user with this new information. So let's go and just update our user model first of all,
03:06
because we need to store that in a particular location. So we'll go ahead and add in a migration to store this location. So let's make out a migration here, and we'll say add profile photo path to users table. So let's go ahead and create that out, and let's open that migration up.
03:22
Add profile photo path to users table. OK, so let's go ahead and add this in, and that's going to be a string, and it's going to be profile photo path. And of course, this is going to be nullable,
03:35
because by default, a user is not going to have an uploaded profile. So this is going to be the path to the profile photo. If it's available, we'll use this. Otherwise, we'll fall back to the UI avatars API.
03:47
OK, let's go ahead and run phpArtisan migrate. We'll head over to our user model just to make sure that this is set in the fillable columns, profile photo URL, and that's it. We can now store this alongside the user.
04:01
So where are we going to do this? So if we open up our update user profile information, we kind of don't want to do this all inside of here. I want a separate action for this.
04:11
Although we're not going to be testing for this, we really want to be able to have this kind of isolated. So what we're going to do is create out another action, which is solely responsible for updating the user's profile information.
04:23
And this makes it really easy if we just have any other specific areas of our app where we only want to update the user profile photo and not the rest of the information. So we can go ahead and just grab any of these and copy them over. And let's say update user profile photo.
04:40
So you can create any of these actions throughout your app and use them in isolation. It helps to just separate things out. And let's go ahead and get rid of pretty much everything in this update. So we'll clear this out.
04:54
And we have some other bits in here that we don't need. So we can get rid of them as well. And let's get rid of this dot block. So this is now update user profile photo.
05:06
And we do want a contract to go alongside of this. So let's go ahead and create out a contract folder inside of here. We could put that pretty much anywhere. And let's create an update user profile photo contract.
05:20
So we can bind this into the container. And then we can inject it into any of the other actions or just use it wherever we need. So let's go ahead and create this out in here. And this is going to now live in app actions and contracts.
05:36
And this is just going to be a empty interface called updates user profile photo. And that is pretty much all we need to do. So now with this in here, we can go ahead and implement this with this. We can get rid of all of this stuff that we don't need.
05:52
And let's just in here die dump on the uploaded file that we are going to send through to this. So this is going to be illuminate HTTP uploaded file. And we'll just call this file. So let's just die dump on that file.
06:07
So the goal here is to be able to hit update within our profile information. Call this update user profile action from our profile information. And then go ahead and see the file. So how do we go ahead and bind this into the container?
06:20
Well, we can do that over in our fortify service provider or pretty much anywhere. So we just want to do really exactly the same as these, although we're not working with a response. So we want to bind in our updates profile photo contract. And we want to bind in the update profile photo class, the concrete implementation.
06:43
So now anytime we reference this, we can inject this into anywhere. So where are we going to inject this? Well, we're going to put it into the updates user profile information. So let's go and create out a constructor just up here.
06:56
And let's go ahead and add this into here and say update user profile photo. And we may as well just make this protected directly within here. Pull this in. And now we have this available.
07:09
So let's go ahead and die dump on this just here. So this update user profile photo. And let's just see what happens. I'm just going to go ahead and hit update here.
07:20
And there we go. There is the concrete implementation for that thing. So now what we can do is just call this. So down here, somewhere after we've validated,
07:31
we can go ahead and say this update user profile photo update. We can pass through the user. And we can pass through the file, which comes from our input and under photo. So let's just double check that this has an update method.
07:47
And it does. The reason that we get an underline here over here is that we just don't have that listed on our interface. But we could do that in a second.
07:55
OK. So now that we are calling this, what we should get when we choose a file and hit update, we should get that uploaded file. So now what we can do is update the user directly within this action that we've created
08:08
and store that file at the same time. So we're going to go ahead and say user update. Of course, we're going to go ahead and update what we've just added into our migration, which is our profile underscore photo path.
08:24
And what we can do is at the same time as storing this file, we can receive the path for this and then put it directly into the user. So we're going to go ahead and just store this on the public file system. So we're going to go ahead and say store publicly.
08:39
And then into this, we're going to choose the file location. So that's going to be in a profile photos directory. And then we're going to choose a disk for this as well. So let's go ahead and pull this down.
08:51
The disk is going to be public. Great. So now that's going to store that in a profile photos directory under our storage just here. And it's going to receive the location for that and put it into the user's account.
09:10
OK, let's try this out. So we'll go ahead and keep an eye on our database. I'm going to get rid of this and let's choose a profile photo. So let's hit update.
09:18
And there we go. So let's go and open up our database and we don't see this. So let's just double check what we're doing here. Let's just make sure we're calling the correct thing profile photo path.
09:31
And yeah, we just call that URL. So that's why that's not being stored. Let's try one more time and we should be good. Let's head over to our database.
09:40
And there we go. That is the location of our uploaded photo. So if we head over to our editor and let's look under our storage, we should see that stored in app public profile photos.
09:54
And there we go. So we've got that image in there now and it's working great. OK, so we need to validate this, of course. We need to make sure that this is a file and we can choose any of the validation options
10:06
that Laravel gives us for this. So let's go and just add this up here. We're going to say photo. And this will go ahead and use the file validation rules.
10:18
That's a little bit more fluent and easy. We're going to go ahead and choose the types. So in this case, we could say something like JPEG, PNG, whatever we want. And then we can easily chain onto this.
10:28
And we could say that we want this to be a minimum or maximum size. So why don't we just say a maximum size of five megabytes? So we can do that just by multiplying this by 1024. OK, let's just try this out and make sure this actually gets uploaded.
10:43
So we'll choose someone else here. And that looks good. OK, so now that this is being stored and it's actually being attached to our user and updated, we need to modify the user to actually get this back inside of this avatar URL.
10:58
So really, all we need to do inside of here is just check if we have a profile photo path. So profile photo path. And if we do, we're going to go ahead and return from storage. So we'll pull in the storage facade from the local disk.
11:14
And then we'll go ahead and grab a URL for this. So that is just going to be this profile photo path. So that will then return the full path to that. OK, so now that we've done that, let's head over and give this a refresh.
11:28
And as you can see, that was the last profile photo I uploaded. So it's giving me that path back that we need. So if we go ahead and change this, hit update, again, we just get this updated. And we see the new profile photo.
11:40
Great. So let's just go ahead and recap because we did do quite a lot here. So obviously, the first thing we did was add the path column to the users table. So we can actually store this uploaded profile.
11:52
The second thing we did was change over the way that this form gets submitted. So when we upload with inertia, we need to make a POST request through to this so it can be sent through as form data. But we spoof the method as put because the Fortify route requires that we put this data through.
12:09
So we spoofed that. The next thing we did was modify the update user profile information to make a request to a new action that we created. We don't have to do this.
12:19
If you don't want to do this, that's fine. You can do everything that we did inside of here directly in here. But this keeps it nice and isolated so we can reuse it. We can test it more easily.
12:29
And this update profile photo action goes ahead and updates the user with the stored path. So this stores this at the same time as returning the path and then puts it into the user account. And we attached a interface to this like all of the other actions in RFL Fortify.
12:48
And we registered that over on the Fortify service provider so we can inject it into anywhere and use it where we need. So there we go. We can now choose a profile photo, update that, and we're done.
40 episodes•5 hrs 21 mins•1 year ago
Overview
Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.
Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.
Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!