Improve user photos

app/Providers/AppServiceProvider.php

@@ -6,11 +6,9 @@ use Inertia\Inertia;
 use League\Glide\Server;
 use Carbon\CarbonImmutable;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\URL;
 use Illuminate\Pagination\UrlWindow;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Date;
-use Illuminate\Support\Facades\Config;
 use Illuminate\Support\Facades\Request;
 use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Facades\Storage;
@@ -69,7 +67,7 @@ class AppServiceProvider extends ServiceProvider
                 'source' => Storage::getDriver(),
                 'cache' => Storage::getDriver(),
                 'cache_folder' => '.glide-cache',
-                'base_url' => URL::to('img'),
+                'base_url' => 'img',
             ]);
         });
     }

app/User.php

@@ -4,6 +4,7 @@ namespace App;
 
 use League\Glide\Server;
 use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\URL;
 use Illuminate\Auth\Authenticatable;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Database\Eloquent\SoftDeletes;
@@ -36,11 +37,9 @@ class User extends Model implements AuthenticatableContract, AuthorizableContrac
 
     public function photoUrl(array $attributes)
     {
-        if (!$this->photo_path) {
-            return;
+        if ($this->photo_path) {
+            return URL::to(App::make(Server::class)->fromPath($this->photo_path, $attributes));
         }
-
-        return App::make(Server::class)->fromPath($this->photo_path, $attributes)->url();
     }
 
     public function scopeOrderByName($query)

resources/js/Pages/Users/Create.vue

@@ -45,12 +45,12 @@ export default {
     return {
       sending: false,
       form: {
-        first_name: '',
-        last_name: '',
-        email: '',
-        password: '',
+        first_name: null,
+        last_name: null,
+        email: null,
+        password: null,
         owner: false,
-        photo: '',
+        photo: null,
       },
     }
   },
@@ -59,12 +59,12 @@ export default {
       this.sending = true
 
       var data = new FormData()
-      data.append('first_name', this.form.first_name)
-      data.append('last_name', this.form.last_name)
-      data.append('email', this.form.email)
-      data.append('password', this.form.password)
+      data.append('first_name', this.form.first_name || '')
+      data.append('last_name', this.form.last_name || '')
+      data.append('email', this.form.email || '')
+      data.append('password', this.form.password || '')
       data.append('owner', this.form.owner ? '1' : '0')
-      data.append('photo', this.form.photo)
+      data.append('photo', this.form.photo || '')
 
       this.$inertia.post(this.route('users.store'), data)
         .then(() => this.sending = false)

resources/js/Pages/Users/Edit.vue

@@ -63,7 +63,7 @@ export default {
         email: this.user.email,
         password: this.user.password,
         owner: this.user.owner,
-        photo: '',
+        photo: null,
       },
     }
   },
@@ -72,16 +72,22 @@ export default {
       this.sending = true
 
       var data = new FormData()
-      data.append('first_name', this.form.first_name)
-      data.append('last_name', this.form.last_name)
-      data.append('email', this.form.email)
-      data.append('password', this.form.password)
+      data.append('first_name', this.form.first_name || '')
+      data.append('last_name', this.form.last_name || '')
+      data.append('email', this.form.email || '')
+      data.append('password', this.form.password || '')
       data.append('owner', this.form.owner ? '1' : '0')
-      data.append('photo', this.form.photo)
+      data.append('photo', this.form.photo || '')
       data.append('_method', 'put')
 
       this.$inertia.post(this.route('users.update', this.user.id), data)
-        .then(() => this.sending = false)
+        .then(() => {
+          this.sending = false
+          if (Object.keys(this.$page.errors).length === 0) {
+            this.form.photo = null
+            this.form.password = null
+          }
+        })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this user?')) {

resources/js/Shared/FileInput.vue

@@ -2,15 +2,15 @@
   <div>
     <label v-if="label" class="form-label">{{ label }}:</label>
     <div class="form-input p-0" :class="{ error: errors.length }">
-      <input class="hidden" ref="file" type="file" @change="change" :accept="accept">
+      <input ref="file" type="file" :accept="accept" class="hidden" @change="change">
       <div v-if="!value" class="p-2">
-        <button @click="browse" type="button" class="px-4 py-1 bg-grey-dark hover:bg-grey-darker rounded-sm text-xs font-medium text-white">
+        <button type="button" class="px-4 py-1 bg-grey-dark hover:bg-grey-darker rounded-sm text-xs font-medium text-white" @click="browse">
           Browse
         </button>
       </div>
       <div v-else class="flex items-center justify-between p-2">
         <div class="flex-1 pr-1">{{ value.name }} <span class="text-grey-dark text-xs">({{ filesize(value.size) }})</span></div>
-        <button @click="remove" type="button" class="px-4 py-1 bg-grey-dark hover:bg-grey-darker rounded-sm text-xs font-medium text-white">
+        <button type="button" class="px-4 py-1 bg-grey-dark hover:bg-grey-darker rounded-sm text-xs font-medium text-white" @click="remove">
           Remove
         </button>
       </div>
@@ -22,12 +22,6 @@
 <script>
 export default {
   props: {
-    id: {
-      type: String,
-      default() {
-        return `text-input-${this._uid}`
-      },
-    },
     value: File,
     label: String,
     accept: String,
@@ -41,7 +35,7 @@ export default {
       if (!value) {
         this.$refs.file.value = ''
       }
-    }
+    },
   },
   methods: {
     filesize(size) {
@@ -57,6 +51,6 @@ export default {
     remove() {
       this.$emit('input', null)
     },
-  }
+  },
 }
 </script>