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.

Episode summary

In this episode, we're focusing on resizing (cropping) images on the backend after a user uploads and selects a crop region for their profile photo. First, we walk through the directory where temporary uploads are stored and clear things out to start with a clean slate.

Next, we install and use an image manipulation package that lets us load the uploaded image from disk, crop it according to the regions the user selected (using width, height, x, and y values), and then save it back to the same temporary location. This part is where all the actual "backend magic" happens—the user adjusts the crop on the frontend, and we physically change the file on the server accordingly.

After showing how the cropping works by uploading and cropping an image, we check the temp directory to see that our changes are applied. We also discuss what happens next: although the cropped image is in the temporary directory for now, it shouldn't be moved to its final, public location until the user saves the form. That way, if the user isn't happy with the crop or cancels, nothing gets saved accidentally.

Finally, we set things up for the next episode, where we’ll look at dispatching the cropped image and saving it alongside the form submission.

Episode discussion

No comments, yet. Be the first!