Laravel Livewire File Upload return Null

Question

I am having an issue with livewire on uploading files. I am using a very basic example to achieve my goal but the issue is that it returns null on Submit.

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

If you treat Livewire form as a normal form it is wrong, the livewire state is different with Laravel, you can't access livewire properties on form summation — MANSOOR KOCHY
– MANSOOR KOCHY, Commented Jun 23, 2022 at 7:35
Elaborate a bit with example. Because given example is almost same as given on livewire docs — DIGITAL JEDI
– DIGITAL JEDI, Commented Jun 23, 2022 at 8:14
IDK why there isn't a fair Answer to this... I've been having the exact same problem for a few days now. Have you resolved your issue? — maiakd
– maiakd, Commented Sep 4, 2022 at 14:40

maiakd · Accepted Answer · 2022-09-05 11:29:50Z

1

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

I had a very basic Livewire Controller to Store an image, but no matter what I did the input kept returning a NULL value or kept saying that the image input was REQUIRED even if the image was selected.

But, if I used a regular Controller (no Livewire) everything worked perfectly somehow.

After wasting many hours, I still launched my site on production and noticed that everything worked like a charm in there.

So I kept wondering: Why is it NOT WORKING in my LOCAL environment?

Everything was up-to-date !

I was also running my project locally and had been working with a Hot Reload served on the Port :3000 (http://localhost:3000).

As the issue was driving me crazy, I stopped the Hot Reload and continued testing everything on the main served hostname (localhost).

And magically... everything worked.

I still don't understand why Livewire ain't working properly with a Hot Reload. I mean, everything works like it should except for the input type="file" to store an image.

Hope this helps a bit!

answered Sep 5, 2022 at 11:29

maiakd

17010 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

antoninislam Over a year ago

Stopping hot reload fixes things. thanks a lot bro. you saved me.

llBestBoyll · Accepted Answer · 2022-07-06 22:12:01Z

0

you sure use withFileUploads?

use Livewire\WithFileUploads;

answered Jul 6, 2022 at 22:12

llBestBoyll

52 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Lucas Gabriel Over a year ago

Your answer "as is" is not helpful, I think you could elaborate a little more on the topic or link to another answer in order to help the OP

LASH · Accepted Answer · 2023-03-08 06:52:56Z

Your code block seems to be ok but there is one missing tag to prevent update element. For that we use wire:ignore.self. wire:ignore.self will inform livewire to don't update this element or it's children".

Here is the correct code for your example:

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');

    }

}

        

            
<div wire:ignore.self>
  <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>
</div>

Collectives™ on Stack Overflow

Laravel Livewire File Upload return Null

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related