Crop and Upload Profile Photos with Livewire
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
Episodes
- Total: 43m
- Played: 0m
- Remaining: 43m
Related courses
Ready to learn Livewire? Throughout this course, we’ll build up a real application that touches almost every aspect of Livewire — leaving you ready to start building your own applications.
Build your own modal functionality in Livewire, completely from scratch! We’ll cover creating a re-usable modal wrapper, transitions, triggering modals from anywhere with our own Alpine functionality, trapping focus inside modals, layering modals correctly, and more.
Effortlessly handle large file uploads in your Livewire apps with chunked, resumable uploading. We’ll cover the entire upload process, display a progress bar, then add the ability to pause, resume and cancel uploads. From there, you’ll be able to handle huge file uploads anywhere in your applications.