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
04. Opening a modal

Episodes

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

Transcript

00:00
as soon as we choose a new profile photo we want to launch a modal which will allow us to crop that hit done and then feed that back to this component, now the first thing that we want to focus on is just getting this modal open and for this we're going to go ahead and use wire elements and modal so let's go through and install this get it working and dump the temporary file within this modal so
00:21
we can start cropping it, okay so to go ahead and install this let's just require this in pretty straightforward and see what else we need to do, okay so somewhere in our overall wrapper we need to include this in so that's going to be in app.blade.php under views and layouts so let's put this just at the very bottom of the page and that's pretty much it so we are already using
00:44
tailwind so it's already set up to use tailwind but you can adjust this if you need to, okay let's get this pulled in so we're going to go over to our profile photo field and the first thing I want to do is detect when this image actually changes or is updated so we can actually hook into this with the life cycle hook within livewire and we're going to say updated image and this
01:08
relates to the property name just here so for example if I just die dump and say updated that is going to go ahead and trigger whenever this is changed and you can see that this is dumped out, great, so this is where we want to launch the modal but we want to pass the temporary uploaded file from our image to that modal so to go ahead and open this modal we need to first of all create
01:31
a modal so let's go ahead and do that now so I'm going to go ahead and create out another component and we're going to call this profile photo modal and let's open up the profile photo modal class itself this needs to extend the component that comes from that package and that is the modal component so that's all we really need to change around here now just while we're here let's also
01:53
set in a property that we can use to go ahead and take that temporary url from our upload so we can pass this through and then display it within here so I'm going to go ahead and open up the profile photo modal template and just for now I'm going to say modal just so we can see that this is actually opening and it's working, okay so how do we go ahead and actually open this modal up well we
02:16
just want to dispatch an event here so let's go ahead and dispatch open modal and then we want to choose the component name so we're going to say profile photo modal and to be honest that is pretty much it we've done everything correctly this should now launch that modal once we've selected a photo so let's choose a photo and sure enough we have our modal great so really really
02:38
simple to do now the next thing we want to do is pass through that temporary uploaded url which will be bound the properties within that component so we call that temporary url and we know that we can extract that from the image so let's say this image and temporary url and we should be good so over on our profile photo modal that will now contain the url for that modal for that profile
03:03
photo and then we can go ahead and just dump it out in the component just here so let's go and take this we'll create an image for this just so it makes a little bit more sense and let's put our temporary url in there great so let's see if this works and then we can move on to cropping it so let's choose a photo here and yeah sure enough it works great

Episode summary

In this episode, we kick off the process of letting users crop their profile photos by setting up a modal dialog that appears as soon as a new photo is chosen. First, we focus on just getting the modal to open—using the Wire Elements modal package to make things quicker and neater.

You'll see how to install the package, set it up in your app layout, and ensure it's ready for use (it's Tailwind-ready, so no big hassle there). Once that's sorted, we update our profile photo Livewire component so that it reacts when an image is selected. On image change, we capture the temporary uploaded file.

We then build a new modal component called ProfilePhotoModal and make sure it's hooked up, so the modal pops open when we choose a new image. Finally, we wire up the modal so it receives and displays the temp image file, proving everything works as expected.

At the end, we see our image nicely displayed inside the modal, which sets us up perfectly for the next step—letting the user actually crop it. Super straightforward, but a solid foundation!

Episode discussion

No comments, yet. Be the first!