Build a Starter Kit With Inertia and Fortify
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

0%
Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress
01. Setting up
01. Introduction and demo
4m 30s
0%
02. Installing Inertia from scratch
11m 49s
0%
03. Installing Tailwind
3m 24s
0%
04. Layout and navigation
31m 15s
0%
05. Installing Fortify
6m 10s
0%
06. Exposing routes with Ziggy
6m 44s
0%
07. Global modals
23m 41s
0%
02. Authentication
08. Registering users
13m 56s
0%
09. Sharing the authenticated user globally
5m 48s
0%
10. Signing in
9m 27s
0%
11. Signing out
2m 39s
0%
12. Redirecting to the intended location
4m 58s
0%
03. Feature management
13. Adding feature management checks
3m 14s
0%
14. Client-side feature management
5m 53s
0%
04. Building a toast feature
15. Basic flash messages with Inertia
7m 51s
0%
16. Building a toast plugin
15m 38s
0%
17. Styling and transitioning the toast
4m 53s
0%
05. Profile management
18. Creating an account layout
13m 24s
0%
19. Detecting and highlighting current pages
5m 22s
0%
20. Updating profile details
9m 22s
0%
21. Profile photo output and swapping
9m 17s
0%
22. Storing a profile photo
13m
0%
23. Changing user passwords
9m 9s
0%
24. Account feature toggling
8m 19s
0%
06. Password confirmation
25. Using a modal for password confirmation
8m 16s
0%
26. Confirming user passwords
4m 23s
0%
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
35. Mail setup and forcing email verification
4m 8s
0%
36. Adding a verification notice
3m 42s
0%
37. Resending the verification email
3m 27s
0%
09. Account recovery
38. Sending a recovery email
8m 45s
0%
39. Setting a new password
8m 22s
0%
10. Fixes and improvements
40. Closing the user navigation on click
2m 12s
0%

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.

Episode overview

In this episode, we finally tackle the process of storing a user's profile photo in our Laravel application. Until now, we could select a photo, but it wasn't actually being uploaded or saved anywhere. So, here’s what we do step-by-step:

First up, we make sure our form knows about the new photo—we add the necessary data property and use a Vue watcher to tie the selected file to the form. We do a quick test to check the file is actually part of the data we’re sending off.

Next, on the backend, we update our process to accept profile photos. We realize that we need to change how our frontend sends form data to the server (switch from PUT to POST but spoof the method, so Laravel's Fortify still handles it correctly).

On the database side, we create a migration to add a new profile_photo_path column to the users table, so we have somewhere to store the uploaded file's location.

To keep things tidy, we separate out the profile photo updating logic into its own action and interface. This makes it reusable and easy to manage on its own. We include the new action wherever we need, bind it properly in the service provider, and make sure when a user uploads a new photo, it stores the file on disk and updates the database with that path.

We cover file validation (only images, max 5MB), and finally, ensure the user's avatar URL gives us the public URL to the image, so it shows up right away.

To finish, we do a recap: we’ve added a database column, changed the way the form submits, separated our photo-upload logic, and made everything work together so users can now upload and update their profile pictures. All done!

Episode discussion

No comments, yet. Be the first!