I’m having a similar problem, I think. I’ve followed the documentation for file uploads and when I started putting in my loading indicator and trying to hide the submit button, the wire:loading
and wire:loading.remove
do not work. The loading indicator is present before uploading a file (and never changes). After clicking the save button, it does not remove itself.
Here’s my Livewire class:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class ProfilePhoto extends Component
{
use WithFileUploads;
/**
* @var null|\Livewire\TemporaryUploadedFile
*/
public $photo;
public function updatedPhoto()
{
$this->validate([
'photo' => 'image',
]);
}
public function save()
{
$this->photo->storePublicly('profiles', 'public');
}
public function render()
{
return view('livewire.profile-photo');
}
}
And my component:
<form wire:submit.prevent="save" class="flex flex-col">
@if($photo)
<img src="{{ $photo->temporaryUrl() }}" alt="Preview" class="self-center max-h-128 object-scale-down">
@endif
<div class="mt-auto flex justify-between items-center">
<label class="cursor-pointer" style="margin-bottom: 0;">
<i class="fas fa-fw fa-camera fa-2x" title="select picture"></i>
<input x-ref="fileInput" wire:model="photo" type="file" class="hidden">
</label>
<div wire:loading.remove wire:target="photo, save">
<button type="submit">
<i class="fas fa-fw fa-cloud-upload" title="save picture"></i>
</button>
</div>
<div wire:loading wire:target="photo, save">
<i class="fas fa-fw fa-spinner fa-pulse" title="uploading..."></i>
</div>
</div>
</form>
No matter what I’ve put in the wire:target
(save
, photo
, or as above both), the loading indicator and submit button are not behaving correctly.