Alpine Expression Error: Cannot read properties of undefined (reading 'name')

For a unkown reason, this error is ocurring when trying to upload an image using a livewire componet. THe component is really simple so far, I am following a tutorial and this is not happening with the tutor guy...

Let's see some code:

logo-upload.blade.php (livewire view)

<div>
    <input type="file" class="file-input file-input-bordered file-input-primary file-input-xs w-full max-w-xs"  wire:model="logo"/>
    <button wire:click="upload" class="btn btn-primary btn-xs">Upload</button>
</div>

LogoUpload.php (livewire controller)

<?php

namespace App\Livewire;

use App\Models\Agency;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

class LogoUpload extends Component
{
    use WithFileUploads;
    public $logo;
    public $agency;

    public function upload()
    {
        dd($this->logo);
//        $this->validate(['logo' => 'image|max:5120']);
//
//        $agency = Agency::find($this->agency); // Busca o agencia pelo id
//        $image = $this->logo;
//        $filename = time() . '.' . $image->getClientOriginalExtension();
//        $path = $image->storeAs($agency->cnpj, $filename, 's3');
//        $agency->logo = $filename;
//        $agency->url = Storage::disk('s3')->url($path);
//        $agency->save();
    }


    public function render()
    {
        return view('livewire.logo-upload');
    }
}

index.blade.php (blade view that calls the @livewire)

<div class="w-1/3 p-4 sm:rounded-lg">
    <h3 class="text-3xl font-bold text-gray-800 dark:text-white">Logotipo</h3>
    <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
    @if($agency->logotipo)
        <div class="card w-96 bg-base-100 shadow-xl image-full">
            <figure>< <img src="{{ $agency->logotipo }}" alt="{{ $agency->nome.'logotipo' }}"></figure>
            <div class="card-body">
                <h2 class="card-title">Shoes!</h2>
                <p>If a dog chews shoes whose shoes does he choose?</p>
                <div class="card-actions justify-end">
                    <button class="btn btn-primary">Buy Now</button>
                </div>
            </div>
        </div>
    @else
        <svg class="w-60 h-60 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
        </svg>
        @livewire('logo-upload', ['agency_id' => $agency->id])
    @endif
</div>

And finally, the console error:

Solution

"Upload" is a Livewire reserved word, you must change the method name invoked by wire:click.
Here is the related documentation (search for: The "upload" method is reserved in the page)