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
07. Resizing on the backend

Episodes

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

Transcript

00:00
Our goal now is to take the crop regions that we are dispatching back to our profile photo field and physically resize the temporary uploaded file before we go ahead and save it.
00:13
So just to give you an example, if we come over to our storage directory here under app and live wire temp, these are all of the temporary files that we've already uploaded. So I'm going to go ahead and delete this out just so we can start fresh, that will be recreated for us and now we're going to resize this image. So let's go over and we're going to use the sparse
00:34
image package here which will just basically allow you to take an image on disk, resize it and save it back again. Okay let's go ahead and install this and we will get started with it and resize these images. Okay so inside of here we're going to use the image package or the image facade directly from this package and we're going to load in an image. Now the image we want to load
00:58
is the image that we have already uploaded here and we want to crop that to those crop regions that we're getting passed back. So we're going to say this image and we're going to grab the real path so get real path and then once we've done that we can go ahead and just save it back to that location. So we're just taking the temporary file saving it back to the location but in between
01:20
that we can crop this. We can do pretty much anything we want to this but for now we're just going to do a manual crop on this based on the crop regions that we have. So we're going to say manual crop and into here we need to take in the width, the height, the x-axis and the y-axis. So we're just going to access the crop regions which will be an array, take the width that's the
01:40
first argument, the second is the height just here so let's take the crop regions and crop that to the height and finally the x and y. So again very easy crop regions x and crop regions and y. Okay so I'm going to get rid of this line now and let's just take a look at what happens within them temporary uploaded files we saw earlier. Okay let's go over and choose a profile
02:06
photo, let's go ahead and crop this down, hit done and let's go over and see what we've got. So under live wire and temp we have got my profile photo in there, there's a couple just where I was testing around but of course these are not cropped yet. Let's get rid of this again and let's go and pull back everything that we've done here and let's try that one more time.
02:30
Okay so I'm going to go ahead and crop this down to where I want to see this cropped, hit done and now when we go over and check this out there we go we have the actual cropped image. So now with that cropped image now that that's a temporary live wire file when we save that it will save it as the cropped image and of course it exists within the temporary directory at the
02:52
moment but we want to move that over to a public directory where we can access it. Now it's at this point where you can choose what you want to do, if you want this component to be a standalone component everything that we're about to do in the next episode you can just do directly inside of here, so you could just save this to the user actually store that photo and then update
03:13
their user record in the database but what we want to do if we think about it we've got a field here we're treating this like a field that exists that can be put into a form, so once we've gone ahead and cropped this on the back end we don't want to immediately store it because the user might not be happy, we only want to store this when they hit save, so what we're going to do in the next episode
03:35
is once we have gone ahead and cropped this shown the preview down here we're going to dispatch to say that from this component this dispatched or this cropped image is now ready and it can be saved as part of this form, so let's hop over to the next episode now we've resized the image and get this submitted along with this ball.
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!

Episode discussion

No comments, yet. Be the first!