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.
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!

Comments

No comments, yet. Be the first to leave a comment.