Styled the upload component and added loading state

Raccoon254 · May 29, 2024 · b42ccde · b42ccde
1 parent a59364e
commit b42ccde
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/app/Livewire/ProfileImageUploader.php b/app/Livewire/ProfileImageUploader.php
@@ -23,8 +23,10 @@ public function mount($color): void
     public function save(): void
     {
         $path = $this->profilePhoto->store('public/' . auth()->user()->name . '/profile');
-
+        sleep(5);
         auth()->user()->update(['profile_photo' => $path]);
+        $this->profilePhoto = null;
+        $this->dispatch('profile-photo-updated');
     }
 
     public function render(): View

diff --git a/resources/views/livewire/profile-image-uploader.blade.php b/resources/views/livewire/profile-image-uploader.blade.php
@@ -6,17 +6,18 @@
                 <circle cx="50%" cy="50%" r="48%" fill="transparent" stroke="white" stroke-width="4" stroke-linecap="round" stroke-dashoffset="61px" stroke-dasharray="288.88px"></circle>
             </svg>
         </div>
-        <!-- Camera Icon -->
-        <div class="absolute bottom-2 right-1 text-white rounded-full">
-            <label for="profilePhoto" class="btn btn-sm btn-circle btn-warning fas fa-camera cursor-pointer"></label>
-            <input type="file" id="profilePhoto" wire:model="profilePhoto" class="hidden">
-        </div>
         @if ($profilePhoto)
-            <div class="absolute bottom-0 right-0 text-white rounded-full">
+            <div class="absolute bottom-2 right-2 text-white rounded-full">
                 <button wire:click="save" class="btn btn-sm btn-circle btn-info ring ring-white">
-                    <i class="fas text-black/60 fa-check"></i>
+                    <i wire:loading.class="hidden" class="fas text-black/60 fa-check"></i>
+                    <span wire:loading wire:target="save" class="loading loading-sm"></span>
                 </button>
             </div>
+        @else
+            <div class="absolute bottom-2 right-1 text-white rounded-full">
+                <label for="profilePhoto" class="btn btn-sm btn-circle btn-warning fas fa-camera cursor-pointer"></label>
+                <input type="file" id="profilePhoto" wire:model="profilePhoto" class="hidden" accept="image/*">
+            </div>
         @endif
     </div>
 </div>