ismail777's avatar

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));
}
0 likes
5 replies
Snapey's avatar

remove .lazyfrom your file input?

ismail777's avatar

@snapey Tried. Nothing still. Do you have any tips on how to go on troubleshooting this? Thanks a lot.

Snapey's avatar

if no network activity when you pick a file then its unlikely to be the php component

I assume its showing the label?

temporarily unhide the file input

ismail777's avatar

After 2 days. I found the issue, and you guessed it it's very dumb. My input had wire.model it's supposed to be wire:model . Thanks @snapey

Snapey's avatar

doh. Sorry for not noticing that one - thats a tough one to spot.

Please or to participate in this conversation.