Add profile update with avatar upload support

Implemented profile update functionality, including validation and support for avatar image uploads using Spatie MediaLibrary. Updated the User model to register an 'avatars' media collection as a single file, adjusted the profile view to handle avatar previews, and added the corresponding route for profile updates.

Author: Vilkrin

app/Http/Controllers/ProfileController.php

@@ -53,7 +53,43 @@ public function edit(string $id)
      */
     public function update(Request $request, string $id)
     {
-        return redirect()->route('profile.show')->with('success', 'Profile updated successfully.');
+        $user = auth()->user();
+
+        // Validate input
+        $validated = $request->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'email', 'max:255'],
+            'password' => ['nullable', 'confirmed', 'min:8'],
+            'avatar' => ['nullable', 'image', 'max:2048'],
+        ]);
+
+        // Update basic fields
+        $user->name = $validated['name'];
+        $user->email = $validated['email'];
+
+        // Update password only if provided
+        if (!empty($validated['password'])) {
+            $user->password = Hash::make($validated['password']);
+        }
+
+        $user->save();
+
+        // Handle avatar upload
+        if ($request->hasFile('avatar')) {
+
+            // Build the new filename:
+            // example: "andrewbeechey_avatar.jpg"
+            $uploadedFile = $request->file('avatar');
+            $extension = $uploadedFile->getClientOriginalExtension();
+            $fileName = $user->username . '_avatar.' . $extension;
+
+            // If using singleFile(), Spatie replaces automatically.
+            $user->addMedia($uploadedFile)
+                ->usingFileName($fileName)
+                ->toMediaCollection('avatars');
+        }
+
+        return back()->with('success', 'Profile updated successfully!');
     }
 
     /**

app/Models/User.php

@@ -10,11 +10,13 @@
 use Illuminate\Notifications\Notifiable;
 use Illuminate\Support\Str;
 use Spatie\Permission\Traits\HasRoles;
+use Spatie\MediaLibrary\HasMedia;
+use Spatie\MediaLibrary\InteractsWithMedia;
 
-class User extends Authenticatable implements MustVerifyEmail
+class User extends Authenticatable implements MustVerifyEmail, HasMedia
 {
     /** @use HasFactory<\Database\Factories\UserFactory> */
-    use HasFactory, Notifiable, HasRoles;
+    use HasFactory, Notifiable, HasRoles, InteractsWithMedia;
 
     /**
      * The attributes that are mass assignable.
@@ -62,6 +64,11 @@ public function initials(): string
             ->implode('');
     }
 
+    public function registerMediaCollections(): void
+    {
+        $this->addMediaCollection('avatars')->singleFile();
+    }
+
 
     public function dossier()
     {

resources/views/profile/index.blade.php

@@ -31,28 +31,35 @@
 
                   <div class="p-6 pt-0 space-y-6">
                     <div class="flex justify-center mb-6">
-                      {{-- <div class="h-24 w-24 rounded-full bg-amber-400/20 border border-amber-400/40 flex items-center justify-center text-2xl font-bold text-amber-300" id="avatarFallback">CS</div> --}}
                       <flux:file-upload wire:model="photo">
-                        <!-- Custom avatar uploader -->
-                        <div class="h-24 w-24
-                            relative flex items-center justify-center size-20 rounded-full transition-colors cursor-pointer
-                            border border-zinc-200 dark:border-white/10 hover:border-zinc-300 dark:hover:border-white/10
-                            bg-zinc-100 hover:bg-zinc-200 dark:bg-white/10 hover:dark:bg-white/15 in-data-dragging:dark:bg-white/15
-                        ">
-                            <!-- Show the uploaded file if it exists -->
-                            {{-- @if ($photo)
-                                <img src="{{ $photo?->temporaryUrl() }}" class="size-full object-cover rounded-full" />
+                        <div
+                            class="relative flex items-center justify-center h-24 w-24 rounded-full transition-colors cursor-pointer
+                            border border-amber-400/40 hover:border-amber-400/60
+                            bg-amber-400/20 hover:bg-amber-400/30
+                            dark:border-amber-400/20 dark:hover:border-amber-400/40
+                            dark:bg-amber-400/10 dark:hover:bg-amber-400/20"
+                        >
+                            @if ($photo)
+                                <!-- Preview uploaded avatar -->
+                                <img src="{{ $photo->temporaryUrl() }}" class="h-full w-full object-cover rounded-full" />
                             @else
-                                <!-- Show the default icon if no file is uploaded -->
-                                <flux:icon name="user" variant="solid" class="text-zinc-500 dark:text-zinc-400" />
-                            @endif --}}
+                                <!-- Your existing fallback -->
+                                <div class="h-full w-full flex items-center justify-center rounded-full text-2xl font-bold text-amber-300">
+                                    CS
+                                </div>
+                            @endif
 
                             <!-- Corner upload icon -->
-                            <div class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 rounded-full">
-                                <flux:icon name="arrow-up-circle" variant="solid" class="text-zinc-500 dark:text-zinc-400" />
+                            <div
+                                class="absolute bottom-0 right-0 bg-white dark:bg-zinc-800 p-1 rounded-full shadow
+                                border border-zinc-200 dark:border-zinc-700"
+                            >
+                                <flux:icon name="arrow-up-circle" variant="solid" class="h-5 w-5 text-amber-500 dark:text-amber-400" />
                             </div>
                         </div>
-                    </flux:file-upload>
+                       </flux:file-upload>
+
+
                     </div>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                       <!-- Full Name -->
@@ -143,7 +150,7 @@
                     <p class="text-sm text-slate-400">Manage your account security and authentication</p>
                   </div>
                   <div class="p-6 space-y-6">
-                  <form method="POST" action="{{ route('profile.store') }}" enctype="multipart/form-data">
+                  <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                     @csrf
 
                     <div>

routes/web.php

@@ -51,6 +51,7 @@
 Route::prefix('profile')->name('profile.')->middleware(['auth'])->group(function () {
 
     Route::get('/', [ProfileController::class, 'index'])->name('index');
+    Route::post('/', [ProfileController::class, 'update'])->name('update');
 });
 
 // Org Services