remove .lazyfrom your file input?
Jun 20, 2020
5
Level 3
Livewire File Upload | Edit Image isn't working.
My edit profile form is working as expected except that I am unable to updated the profile image. Using chrome inspector -> network I can see that no request is being sent out when I choose an image meaning it is not being updated at all. However I don't see any errors anywhere.
profile.edit-profile.blade.php
<form wire:submit.prevent="submit">
<div class="mt-3">
<label for="photo" class="block text-sm font-medium text-gray-700 leading-5">
Profile Image
</label>
@if($UpdatedPhoto)
<img src="{{ $UpdatedPhoto->temporaryUrl() }}" class="rounded-full w-32 h-32 mx-auto shadow-md">
@else
<div class="self-center justify-center flex relative">
<img src="{{ asset('storage/'.$photo) }}" alt=""
class="w-32 h-32 rounded-full shadow-md">
<label>
<i class="fas fa-pen cursor-pointer"></i>
<input name="UpdatedPhoto"
type="file" wire.model.lazy="UpdatedPhoto" class="hidden" />
</label>
</div>
@error('UpdatedPhoto')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
<div wire:loading wire:target="UpdatedPhoto" class="mx-auto text-xs">Uploading...</div>
@endif
EditProfile.php (Livewire Controller)
public function submit()
{
$this->validate([
'username' => 'required | min:6 | unique:profiles,username| alpha_dash',
'bio' => 'min:10',
'website' => 'url',
'UpdatedPhoto' => 'image',
]);
$filename = $this->UpdatedPhoto->store('photos');
$this->profile->update([
'user_id' => auth()->id(),
'username' => $this->username,
'bio' => $this->bio,
'website' => $this->website,
'photo' => $filename,
]);
return redirect(route('profile.show', $this->username));
}
Please or to participate in this conversation.