Neeraj1005's avatar

Error Call to a member function store() on null

In my project I'm using livewire functionality for updating the value. But in this case if I upload an image it send me an error.

Error
Call to a member function store() on null

Can anyone please tell me how can i solve this. I read the documentation and follow as he mentioned but i did not understand whats wrong with with this function.

This is livewire component method

use WithFileUploads;

public $admin_panel_value;
public $admin_alt_text;

    public $admin_logo;
 public function adminLogoDataSave()
    {
        $this->validate([
            'admin_alt_text' => 'required|string|max:50',
            // 'admin_photo' => 'image|mimes:png,jpg|max:102400', // 1MB Max
        ]);

        $adminLogo = Logo::where('options','admin_panel_logo')->findOrFail(1);

        $pic = $this->admin_logo->store('photos');

        // dd($pic);

        // $adminLogo->update([
        //     'alt_text' => $this->admin_alt_text,
        // ]);
    }

and this livewire blade component

   <form wire:submit.prevent="adminLogoDataSave" enctype="multipart/form-data">
            <div class="card-body">

                <div class="form-group">
                    <label for="logotext">Logo Text</label>
                    <input
                        type="text"
                        name="admin_alt_text"
                        wire:model.defer="admin_alt_text"
                        class="form-control"
                        id="logotext" aria-describedby="logotext"
                    >
                    @error('admin_alt_text')<span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <input type="text" value="{{ $admin_panel_value->options }}">
                </div>


                <div class="form-group">
                    <label for="admin_logo">Select Logo</label>
                    <input
                        type="file"
                        name="admin_logo"
                        wire:model="admin_logo"
                        class="form-control-file"
                        id="admin_logo">
                    <small id="logo_path" class="form-text text-muted">JPEG, PNG only</small>
                    @error('admin_logo') <span class="error">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="card-footer border-top white-bg text-right">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
0 likes
13 replies
Snapey's avatar

Try validating

        $this->validate([
            'admin_alt_text' => 'required|string|max:50',
            'admin_logo' => 'image|mimes:png,jpg|max:102400', // 1MB Max
        ]);
Neeraj1005's avatar

@snapey Basically the problem was in my terminal browesSync was running with other localhost routes that causes the problem.

Neeraj1005's avatar

@snapey Now I'm facing the new issue image is uploaded fine but the file input is not cleared.

File Uploads - clear the input field

If I upload an image the input field in not cleared. can you please tell me how to clear this?

please check this image https://imgur.com/UJQX0jf

MarianoMoreyra's avatar

Hi @neeraj1005

This error also will happen if you submit your form before the file gets uploaded (which happens as soon as you choose a file).

So, consider adding a "loading" icon or label somewhere to test this, and if possible, disable the submit button while those loading states happen.

Neeraj1005's avatar

@marianomoreyra Now my image is uploaded but now i'm facing new problem. The problem is after uploading the image the input file name is not cleared in my file input box.

please look at this image https://imgur.com/UJQX0jf.

In this I've successfully uploaded the image and stored in database. But

  • file input name is not cleared...can you tell me how to clear this after uploading the file?
Neeraj1005's avatar

@snapey yes this problem is solved...using iteration. Now I want to show the updated image on right side of image upload image can you tell how to do this?

Mean for seeing the image I have to refresh the page...that I don't want it...if I upload an image then it would appears.

Snapey's avatar

As long as the image is in the component's view, you should be able to just change its URL when the view is re-rendered

Neeraj1005's avatar

@snapey How to re-rendered...can you please give me idea.. This is my blade what i did for short period....

  <div class="col">
                    {{-- Preview Image show and upload image --}}
                        <div class="form-group float-right">
                        @if ($uploadadminlogo)
                                <img src="{{ $uploadadminlogo->temporaryUrl() }}" width="35%" height="35%">
                        @else
                                <img class="rounded img-fluid img-thumbnail" src="{{ $this->admin_logo_path }}" width="35%" height="35%">
                        @endif
                        </div>
                    </div>
Snapey's avatar

after you store the image, set $this->uploadadminlogo to null so that the temporary image is no longer displayed

abilovelchin's avatar
public function save()
    {
        $this->validate([
             'attachment' => 'max:2048', // 2MB Max
		]);
	
	    $this->attachment->store('apply-files');
}

My code like above. And I would like to upload all type of files. But when upload files except image I get same error:

Error Call to a member function store() on null

Please help...

1 like

Please or to participate in this conversation.