Laravel Livewire file upload returns Null

Question

I'm having trouble uploading files with livewire. I'm using a very basic example to achieve my goal, but the problem is that it returns null on submit.

This is my Livewire controller code:

class UploadPhoto extends Component

{

    use WithFileUploads;

 

    public $photo;

 

    public function save()

    {

        dd($this->photo); //returns null

        $this->validate([

            'photo' => 'image|max:1024', // 1MB Max

        ]);

 

        $this->photo->store('photos');

    }

}

        

            

<form wire:submit.prevent="save">

    <input type="file" wire:model="photo">

 

    @error('photo') <span class="error">{{ $message }}</span> @enderror

 

    <button type="submit">Save Photo</button>

</form>

Answer 1

So, as I said before, I had the same problem a few weeks ago.

I have a very basic Livewire Controller to store an image, but no matter what I do the input returns a NULL value or keeps saying the image input is Required , even if an image is selected.

But if I use a regular controller (no Livewire) everything works perfectly somehow.

After wasting a lot of time, I still launched my website in production and found that everything worked fine there.

So I've been wondering: Why doesn't it work in my local environment?

Everything is up to date!

I'm also running my project locally and have been using hot reload on port :3000 (http://localhost:3000).

Since this issue was driving me crazy, I stopped the hot reload and continued testing everything on the main service hostname (localhost).

Andmagically...everything works.

I still don't understand why Livewire doesn't work properly with hot reload. I mean, everything is working fine except input type="file" to store the image.

Hope this helps!