This episode is for members only
Level up with a premium membership
Get access
Already a member? Sign in to continue
Playing
09. Clearing a cropped profile photo
01. Introduction and demo
1m 52s
0%
02. Getting the User model ready for profile photos
3m 49s
0%
03. Building the profile photo upload field
5m 56s
0%
04. Opening a modal
3m 28s
0%
05. Setting up Cropper.js
4m 38s
0%
06. Cropping and dispatching
9m 6s
0%
07. Resizing on the backend
3m 57s
0%
08. Updating and submitting the parent form
5m 45s
0%
09. Clearing a cropped profile photo
3m 34s
0%
10. Handling closing the modal
1m 54s
0%
10 episodes• 43 mins•3 months ago
Course 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
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.