livewire upload image and use spatie media collections - CORs errors too

I have been very busy trying to make the live wire works with the spatie media collections

this is a small guide for someone with the same problem trying to submit

FIRST YOU MUST BE ON THE LOCAL HOST 8000 NOT ON THE NPM WATCH 3000 IT WILL COUSE CORS ERRORS this will throw an error on the view please upload an image

following Porzio code https://laravel-livewire.com/docs/2.x/file-uploads

okay this is my code

// inside the live wire blade component

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

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

on the wire class

<?php

namespace App\Http\Livewire\Profile;

use Livewire\Component;
use Livewire\WithFileUploads;

class EditProfileAvatar extends Component
{
    use WithFileUploads;

    public $photo;

    public function updatedPhoto()
    {
        $this->validate([
            'photo' => 'image', // 1MB Max
        ]);

        //ray( $this->photo );
        user()->addMedia( $this->photo->getRealPath() )
        ->usingName($this->photo->getClientOriginalName())
        ->toMediaCollection('avatar');

    }

    public function render()
    {
        return view('livewire.profile.edit-profile-avatar');
    }


}

the hint here is that you must ->getRealPath of the image where is on the TEMP files or it will not get the image and will not upload, I hope this helps someone with the same code problems