Crop and Upload Profile Photos with Livewire
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
Let's take a look at how to crop and upload profile photos in LiveWire and also make this seamlessly integrate with forms that you already have. So this thing that you can see here can run standalone
00:11
to a form that you already have, like this profile information form, or you can take it and just have it automatically upload the profile photo after it's selected. We'll look at putting this into a form because that's the most common use case for this, but then you can slightly tweak this
00:27
later based on the events that this emits. Okay, let's take a look at how this works. So I'm going to go ahead and obviously click on change profile photo and I've already got a profile photo here that I can use. So as soon as I go ahead and select
00:40
this, this brings us up a modal where we can obviously go ahead and crop this in any way you want. We're using cropper.js here and you can customize this and configure this to do anything like have rotations, all that kind of stuff. Okay, so I'm just
00:55
going to go ahead and focus on one part of this picture and once I'm done I just hit done here. That goes ahead and updates this here. We can still clear this out and start again if we want to, but obviously when we go ahead and hit save that goes ahead and changes it,
01:08
give the page a refresh and as you can see that is our new profile photo. So this seems quite simple but we're going to be doing a couple of things here to make this the best we can. So for example we are going to be cropping these images on the back end and resizing them there,
01:23
just so we don't end up with huge files. If a user is uploading an absolutely massive image and they crop it down, you're still going to have a really big image. So we're going to scale this down on the back end to make sure we don't end up with huge images and
01:37
yeah, just learn about everything that goes into this. Okay, so now that we've seen how this works, let's go over to the next episode with a fresh project and just get the user model set up ready for uploading profile photos.

Episode summary

In this intro episode, we get a hands-on demo of how cropping and uploading profile photos works in a LiveWire application. You'll see how easy it is to integrate a photo cropping feature into your own forms—you can have it standalone or seamlessly tie it into something like a profile settings form.

We walk through the user experience: clicking to change the profile photo, selecting an image, using a modal (powered by cropper.js) to crop it just how you like, and then saving the new profile picture. There's also the option to clear and redo it if you're not happy with your selection.

But in the background, there's more going on! We'll make sure cropped images don't stay huge by resizing them on the backend after upload, keeping everything fast and efficient. This is all about making a polished, user-friendly feature that you can easily adapt to your own needs.

Now that you've seen how it works, in the next episode we'll dive in from scratch—starting with setting up our user model for profile photo uploads!

Episode discussion

No comments, yet. Be the first!