Livewire example upload file

file-upload.blade.php

<div class="flex items-center">
    {{ $slot }}

    <div x-data="{ focused: false }">
        <span class="ml-5">
            <input @focus="focused = true" @blur="focused = false" class="sr-only" type="file" {{ $attributes }}>
            <label for="{{ $attributes['id'] }}" :class="{ 'outline-none border-blue-300 shadow-outline-blue': focused }" class="cursor-pointer py-2 px-3 border border-gray-300 rounded-md text-sm leading-4 font-medium text-gray-700 hover:text-gray-500 rounded-md shadow-sm active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
                {{ __("Change") }}
            </label>
        </span>
    </div>
</div>

Setting.php

<?php

use Illuminate\Validation\Rule;
use Livewire\Component;
use Livewire\WithFileUploads;

class Setting extends Component
{
  use WithFileUploads;

  /**
   * Real-Time picture validation.
   *
   * @return void
   */
  public function updatedPicture()
  {
    $this->validate([
        'picture' => 'nullable|image|max:1024', // 1MB Max
    ]);
  }

  /**
   * Update user profile to storage.
   *
   * @return void
   */
  public function save()
  {
    $this->validate([
        'picture' => 'nullable|image|max:1024', // 1MB Max
    ]);

    if ($this->picture) {
        $filename = $this->picture->store('/', 'your-disk-to-store-file');

        auth()->user()->update([
            'picture' => $filename,
        ]);
    }

    session()->flash('Your profile have been successfully updated!')
  }
}

settings.blade.php

<form wire:submit.prevent="save">
  <x-file-upload wire:model="picture" id="picture">
      <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100 flex items-center justify-center">
          @if($picture)
              <img class="h-full w-full bg-cover" src="{{ $picture->temporaryUrl() }}" alt="">
          @else
              <img class="h-full w-full bg-cover" src="{{ $logged_in_user->picture }}" alt="{{ $logged_in_user->email }}">
          @endif
      </span>
  </x-file-upload>
  <button type="submit" wire:loading.attr="disabled">
      <svg wire:loading wire:target="save" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
      </svg>
      {{ __("Save") }}
  </button>
</form>