Profile picture

app/Http/Controllers/ProfileController.php

@@ -9,6 +9,8 @@
 use Illuminate\Support\Facades\Redirect;
 use Illuminate\View\View;
 
+use Illuminate\Support\Facades\Storage;
+
 class ProfileController extends Controller
 {
     /**
@@ -24,18 +26,36 @@ public function edit(Request $request): View
     /**
      * Update the user's profile information.
      */
-    public function update(ProfileUpdateRequest $request): RedirectResponse
-    {
-        $request->user()->fill($request->validated());
 
-        if ($request->user()->isDirty('email')) {
-            $request->user()->email_verified_at = null;
-        }
+     public function update(ProfileUpdateRequest $request): RedirectResponse
+     {
+         $validated = $request->validated();
+
+         if ($request->hasFile('image')) {
+             $user = $request->user();
 
-        $request->user()->save();
+             if ($user->image) {
+                 Storage::disk('public')->delete($user->image);
+             }
+
+             $path = $request->file('image')->store('avatar', 'public');
+             $validated['image'] = $path; 
+         } else {
+             unset($validated['image']);
+         }
+
+         $request->user()->fill($validated);
+
+         if ($request->user()->isDirty('email')) {
+             $request->user()->email_verified_at = null;
+         }
+
+         $request->user()->save();
+
+         return Redirect::route('profile.edit')->with('status', 'profile-updated');
+     }
+
 
-        return Redirect::route('profile.edit')->with('status', 'profile-updated');
-    }
 
     /**
      * Delete the user's account.

app/Http/Requests/ProfileUpdateRequest.php

@@ -23,8 +23,10 @@ public function rules(): array
                 'lowercase',
                 'email',
                 'max:255',
+
                 Rule::unique(User::class)->ignore($this->user()->id),
             ],
+            'image' => ['nullable', 'image', 'mimes:jpeg,png,jpg', 'max:2048'],
         ];
     }
 }

app/Models/User.php

@@ -19,6 +19,7 @@ class User extends Authenticatable
     protected $fillable = [
         'name',
         'email',
+        'image',
         'password',
     ];
 

database/migrations/2024_11_23_144334_add_profile_picture_to_users.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            //
+            $table->string('image')->nullable();
+
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            //
+            $table->dropColumn('image');
+        });
+    }
+};

resources/css/app.css

@@ -40,3 +40,10 @@
 .messagesBackground {
     background-image: url('../../public/source/assets/images/messageBackground.png');
 }
+
+.avatar {
+    vertical-align: middle;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+  } 

resources/js/app.js

@@ -1,6 +1,6 @@
-import './bootstrap';
+import "./bootstrap";
 
-import Alpine from 'alpinejs';
+import Alpine from "alpinejs";
 
 window.Alpine = Alpine;
 

resources/views/profile/partials/update-profile-information-form.blade.php

@@ -13,7 +13,7 @@
         @csrf
     </form>
 
-    <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
+    <form method="post" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="mt-6 space-y-6">
         @csrf
         @method('patch')
 
@@ -27,38 +27,39 @@
             <x-input-label for="email" :value="__('Email')" />
             <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
             <x-input-error class="mt-2" :messages="$errors->get('email')" />
+        </div>
 
-            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
-                <div>
-                    <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
-                        {{ __('Your email address is unverified.') }}
-
-                        <button form="send-verification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
-                            {{ __('Click here to re-send the verification email.') }}
-                        </button>
-                    </p>
-
-                    @if (session('status') === 'verification-link-sent')
-                        <p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
-                            {{ __('A new verification link has been sent to your email address.') }}
-                        </p>
-                    @endif
-                </div>
-            @endif
+        <div>
+            <label for="image-upload">
+                <img src="{{ $user->image ? asset('storage/' . $user->image) : asset('/source/assets/avatar/avatar.png') }}"
+                    alt="Image" class="avatar" style="cursor: pointer;">
+            </label>
+            <input type="file" id="image-upload" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
         </div>
 
         <div class="flex items-center gap-4">
             <x-primary-button>{{ __('Save') }}</x-primary-button>
 
             @if (session('status') === 'profile-updated')
-                <p
-                    x-data="{ show: true }"
-                    x-show="show"
-                    x-transition
-                    x-init="setTimeout(() => show = false, 2000)"
-                    class="text-sm text-gray-600 dark:text-gray-400"
-                >{{ __('Saved.') }}</p>
+            <p
+                x-data="{ show: true }"
+                x-show="show"
+                x-transition
+                x-init="setTimeout(() => show = false, 2000)"
+                class="text-sm text-gray-600 dark:text-gray-400">{{ __('Saved.') }}</p>
             @endif
         </div>
     </form>
-</section>
+    <script>
+        function previewImage(event) {
+            const reader = new FileReader();
+            const avatar = document.querySelector('.avatar');
+
+            reader.onload = function() {
+                avatar.src = reader.result;
+            };
+
+            reader.readAsDataURL(event.target.files[0]);
+        }
+    </script>
+</section>