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>
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!