Crop and Upload Profile Photos with Livewire

10 episodes
43 mins

About this course

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

Your teacher

Alex Garrett-Smith
Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Related content

You might also enjoy these

Learn Livewire

episodes
2 hrs 52 mins

Building Modals in Livewire

episodes
1 hr 1 min

Chunking Large Uploads in Livewire

episodes
53 mins
Want to stay in the loop about new content?
Of course you do.

© 2024 Codecourse Ltd. All Rights Reserved. Born in the UK.