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
08. Updating and submitting the parent form

Episodes

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

Transcript

00:00
Let's get this cropped image dispatched back
00:02
into this main form so when we hit Save, this actually stores it in the database and moves it over to the location that we need. OK, so to do this, we're going to go ahead
00:12
and like we said in the last episode, dispatch this directly from here. So let's go ahead and say this dispatch, and we can pick that up from our main form profile photo.
00:22
And into this, we're just going to pass the path of the temporary file. And we're going to rebuild that up so we can store it. So again, we're going to grab the real path of this.
00:31
So to pick this event up, we're going to come back over to our profile information form. Remember, this is a sort of independent field in itself. And then inside of the main form itself,
00:44
we're going to pick this event up. So let's do this just underneath mount, and then we'll hook everything together. OK, so we're going to go ahead and create a method here
00:52
to handle this. So we'll say set profile photo. And this is going to happen when we get that event through. So again, we're going to say on profile photo.
01:05
And we just want to make sure we pull in the live wire attributes on in here just because we're working with the blade template. It doesn't like it too much.
01:12
OK, so this is going to be the profile photo URL. And of course, let's just test this out by dumping this out in here just to make sure everything is getting hooked up.
01:23
OK, so let's go through the whole flow. Choose a file. And we're going to go ahead and crop this. Hit done.
01:31
And there we go. Great. So that's been cropped on the back end. This is now the cropped image that we
01:36
saw from the live wire temporary file earlier. And now we can take this and store it. Now to do this, what we need to do, because we're just working with a standard URL,
01:47
we need to rebuild this up to a temporary uploaded file inside of here. So as part of any normal form in live wire that you would have the use with uploads trait in,
01:58
you would store this image, much like we did in the field itself. But because that's an independent field and that deals with the upload, this profile photo, this form itself doesn't.
02:08
So let's go ahead and say profile photo in there. And we could type in that. Let's leave that for now. And then down here, we're going to go ahead and set this up
02:17
to a temporary uploaded file. So we're going to say profile photo. And we're going to set this to a new temporary uploaded file. We're going to pass in the profile photo URL.
02:32
And we're going to pass in the location of this. So we can pull this directly from config under file systems and default. So that will be just our default file system.
02:41
But of course, over in EMV, you can go ahead and change this around here if you want to, the default one. We're just working with the local one. So now, let's die dump on the profile photo
02:52
and see what we have. And basically, what we're going to end up with is a temporary uploaded file as if we would have uploaded this directly
03:01
within this form itself. Again, this is super annoying because we're working in Blade here. We just want to make sure that we
03:06
pull in the full namespace for the temporary uploaded file since we're using it down here. OK, let's go through the flow again. Choose a file.
03:13
Let's go ahead and crop this. And what we should end up with is a temporary uploaded file as if we would have had an input on this form itself and uploaded the file.
03:25
So it's just a little bit of a workaround to take the path that we have specifically built up within this component and modified within this component and then dispatched it back to the form.
03:35
So now that we've done this, when we save this form, so if we just come down to here, you can see that this grabs the user, validates the name and the email address,
03:45
fills in the validated data, does all that kind of stuff and saves it. We can just save that profile photo here. Now, we don't necessarily need to validate this here
03:53
because it's already been validated within that component itself. And everything is done behind the scenes. So what we're going to do is we are just
04:01
going to store this on the user. So let's go down here. This data is getting filled with the validated data, checking if the email is dirty.
04:09
And down here, we can just check if the profile photo exists. So let's say profile photo. And if it does, we can go ahead and assign this to the profile photo.
04:21
Let's remind ourselves what we call this. And profile photo URL. And we're going to assign this to the uploaded file, which we have created ourselves.
04:33
And we're going to store this publicly inside a directory. So let's just add this to a profile photos directory. And we're going to set this as public. So it can be viewed by anyone.
04:45
OK, so that's going to head and set that. The user gets saved. And we should have that stored in the database. So let's go over to our data and keep on our profile photo URL
04:55
field. OK, let's just end that off. And we should be good. So let's try this out.
05:00
Click on an image. Go ahead and crop this. And we're going to go ahead and hit Save. So there we go.
05:07
That looks like it's been saved. Let's head over. Sure enough, that has been put into a path within Laravel's file system.
05:15
And if we refresh the page, that is now our default profile photo URL. Great. So to be honest, that is pretty much the entire process.
05:23
Again, if you are not including this as part of a form, you don't need to dispatch this back to the form and then recreate that temporary uploaded file. You could just store it directly within that component itself.
05:35
Now, let's take the next couple of episodes just to tidy up a couple of things around here, make the experience a little bit better, and then we're done with cropped profile photo uploads.

Episode summary

In this episode, we tackle the final step of our cropped profile photo feature: making sure that the image gets saved properly when you submit the main form. Up until now, we had the image cropping working, but we hadn't fully wired up the saving process.

We start by dispatching the cropped image from the cropper component back to the main parent form. This involves sending the temporary file path as an event, and then handling that event in our parent form so we can integrate the new profile photo with the rest of the user's data.

To make this work, we need to convert the URL or path of the cropped image back into a TemporaryUploadedFile so that Livewire treats it as if it were just a normal uploaded photo in the form. There's a bit of fiddling here—pulling in namespaces, making sure Livewire's Blade quirks don't trip us up—but soon enough, we've got the cropped photo behaving just like a regular upload.

With that in place, we simply move the file into the correct directory (making it public so users can see their new profile photo), update the user's info, and save it all as you'd expect. We test the whole flow: pick a file, crop, save, and confirm that the updated profile photo is properly referenced and visible after a page refresh.

As a final note, we point out that if you're dealing with uploads not tied to a larger form, you can skip the whole dispatch and file reconstruction bit—this workaround is just so everything plays nicely in our parent form with Livewire.

Next up, we'll add a bit of polish to the workflow, and then we’ll be all set with profile photo uploads!

Episode discussion

No comments, yet. Be the first!