Image Picker Component Implementation For Profile Header Layout Editor

[betsyecastro]

Scroll down to see the latest updates to this branch ⬇️ ⬇️ ⬇️

[betsyecastro]

🔀 Merged develop to update branch and 🐛 fixed broken image after saving in the image picker

The image was uploading correctly, but after saving, the page would redirect and show a broken image until it was manually refreshed.

Used Claude 🤖 to help identify the issue, which was caused by the picker form using method="GET" along with the global replace-icon handler declared in app.js, which was triggering the form submission and bypassed wire:submit.prevent, redirecting to the profile page while the Livewire save() request was still running.

Changes:

• Removed method="GET", @csrf, and the file input name since Livewire doesn’t need them.
• Updated replace_icon to add a conditional that skips the native submit fallback for Livewire forms.
• Replaced data-toggle="replace-icon" on the Save button with wire:loading for the spinner and disabled the button while saving to prevent double submissions.
• Fixed the upload validation rules since uploadedImageRules() returns an array and can’t be used directly inside a rule string.