Add user profile avatar storing functionality

Author: perisicnikola37

app/Http/Controllers/UserController.php

@@ -5,6 +5,7 @@
 use App\Http\Requests\UserStoreRequest;
 use App\Models\User;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
 
 class UserController extends Controller
@@ -34,9 +35,16 @@ public function create()
      */
     public function store(UserStoreRequest $request)
     {
-        User::create($request->validated());
+        $validatedData = $request->validated();
 
-        return to_route('users.index')->with('success', 'User has been created!');
+        if ($request->hasFile('avatar')) {
+            $avatarPath = $request->file('avatar')->store('public/avatars');
+            $validatedData['avatar'] = Storage::url($avatarPath);
+        }
+
+        User::create($validatedData);
+
+        return redirect()->route('users.index')->with('success', 'User has been created!');
     }
 
     /**
@@ -86,4 +94,4 @@ public function deleteMultiple(Request $request)
 
         return redirect()->route('users.index')->with('success', 'Operation successfully!');
     }
-}
+}

app/Http/Requests/UserStoreRequest.php

@@ -26,6 +26,7 @@ public function rules(): array
             'email' => 'required|email|min:2|max:255|unique:users',
             'password' => 'required|min:8|max:255',
             'role_id' => 'required',
+            'avatar' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
         ];
     }
 }

database/migrations/2014_10_12_000000_create_users_table.php

@@ -16,11 +16,11 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->string('email')->unique();
+            $table->string('avatar')->default('placeholder');
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
             $table->rememberToken();
             $table->foreignId('current_team_id')->nullable();
-            $table->string('profile_photo_path', 2048)->nullable();
             $table->bigInteger('role_id')->unsigned()->index()->nullable();
             // $table->foreign('role_id')->references('id')->on('roles')->cascadeOnDelete();
             $table->timestamps();

resources/js/Pages/Users/Create.vue

@@ -2,53 +2,62 @@
     <AppLayout title="Create user">
 
         <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                 Create user
             </h2>
         </template>
 
         <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="m-auto w-full max-w-xs">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="w-full max-w-xs m-auto">
 
-                    <form @submit.prevent="submit" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 m-auto">
+                    <form @submit.prevent="submit" class="px-8 pt-6 pb-8 m-auto mb-4 bg-white rounded shadow-md"
+                        enctype="multipart/form-data">
 
                         <div class="mb-4">
-                            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
+                            <label class="block mb-2 text-sm font-bold text-gray-700" for="name">
                                 Name <span class="text-red-500">*</span>
                             </label>
                             <input v-model="form.name"
-                                class="mb-2 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                class="w-full px-3 py-2 mb-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                 id="name" type="text">
                             <span class="text-red-500">{{ errors.name }}</span>
                         </div>
 
                         <div class="mb-4">
-                            <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
+                            <label class="block mb-2 text-sm font-bold text-gray-700" for="email">
                                 E-mail <span class="text-red-500">*</span>
                             </label>
                             <input v-model="form.email"
-                                class="mb-2 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                class="w-full px-3 py-2 mb-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                 id="email" type="email">
                             <span class="text-red-500">{{ errors.email }}</span>
                         </div>
 
                         <div class="mb-4">
                             <div class="mb-3 xl:w-96">
                                 <select disabled v-model="form.role_id"
-                                    class="form-select appearance-none block text-base font-normal text-gray-700  bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+                                    class="block m-0 text-base font-normal text-gray-700 ease-in-out bg-white bg-no-repeat border border-gray-300 border-solid rounded appearance-none form-select bg-clip-padding focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                                     aria-label="Default select example">
                                     <option value="2">Subscriber</option>
                                 </select>
                             </div>
                         </div>
 
                         <div class="mb-4">
-                            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+                            <label class="block mb-2 text-sm font-bold text-gray-700" for="avatar">
+                                Avatar <span class="text-red-500">*</span>
+                            </label>
+                            <input type="file" id="avatar" v-on:change="form.avatar = $event.target.files[0]">
+                            <span class="text-red-500">{{ errors.avatar }}</span>
+                        </div>
+
+                        <div class="mb-4">
+                            <label class="block mb-2 text-sm font-bold text-gray-700" for="password">
                                 Password <span class="text-red-500">*</span>
                             </label>
                             <input v-model="form.password"
-                                class="mb- 2shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded appearance-none mb- 2shadow focus:outline-none focus:shadow-outline"
                                 id="password" type="password">
                             <span class="text-red-500">{{ errors.password }}</span>
                         </div>
@@ -58,7 +67,7 @@
                         </div>
                     </form>
 
-                    <p class="text-center text-gray-500 text-xs">
+                    <p class="text-xs text-center text-gray-500">
                         &copy;2023 - <a class="text-blue-500" href="https://github.com/perisicnikola37"
                             target="_blank">@perisicnikola37</a>
                     </p>
@@ -88,6 +97,7 @@ export default {
                 email: '',
                 role_id: 2,
                 password: '',
+                avatar: null
             })
         }
     },

resources/js/Pages/Users/Show.vue

@@ -1,17 +1,19 @@
 <template>
     <AppLayout title="User profile">
         <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-            <div class="max-w-lg w-full bg-white shadow-lg rounded-lg overflow-hidden">
-                <img class="w-full h-64 object-cover" :src="user.coverImage" alt="User cover image">
+            <div class="w-full max-w-lg overflow-hidden bg-white rounded-lg shadow-lg">
+                <img class="object-cover w-full h-64" :src="user.coverImage" alt="User cover image">
                 <div class="p-4">
-                    <img class="h-24 w-24 rounded-full mx-auto mb-4" :src="user.profileImage" alt="User profile image">
+
+                    <img class="w-24 h-24 mx-auto mb-4 rounded-full" :src="userAvatar" alt="User profile image">
+
                     <h1 class="text-2xl font-bold text-center">{{ getUser.name }}</h1>
                     <center>
-                        <a :href="'mailto:' + getUser.email" class="text-gray-600 text-center">{{ getUser.email }}</a>
+                        <a :href="'mailto:' + getUser.email" class="text-center text-gray-600">{{ getUser.email }}</a>
                     </center>
                     <hr class="my-4">
                     <div class="my-2">
-                        <h2 class="text-gray-600 text-sm font-bold uppercase">About</h2>
+                        <h2 class="text-sm font-bold text-gray-600 uppercase">About</h2>
                         <p class="mt-2 text-gray-600">{{ user.about }}</p>
                     </div>
                 </div>
@@ -32,7 +34,14 @@ export default {
     },
     data() {
         return {
-            user: {}
+            user: {},
+        }
+    },
+    computed: {
+        userAvatar() {
+            return this.getUser.avatar !== 'placeholder'
+                ? this.getUser.avatar
+                : 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png';
         }
     },
     mounted() {