Livewire Image upload without form and click button

In my project, I have done image upload using form submit but now I want some advanced technique like If I select an image it automatically uploaded. can anyone tells me what should I have to do... These are my method have a look at them, please.

<?php

namespace App\Http\Livewire;

use App\Gallary;
use Livewire\Component;
use Livewire\WithFileUploads;

class AddMedia extends Component
{
    use WithFileUploads;

    public $gallaries;
    
    public $photos = [];

    public $perPage = 10;

    protected $listeners = [
        'mediaLoad' => 'scrollMore',
        'uploadImage' => 'save',
    ];


    public function updatedPhotos()
    {
        $this->validate([
            'photos.*' => 'required|image|max:1024', // 1MB Max
        ]);
    }

    public function save()
    {
        $this->validate([
            'photos.*' => 'required|image|max:1024', // 1MB Max
        ]);

        if ($this->photos) {
            foreach ($this->photos as $photo) {
                // $file_extension = $photo->extension();
                $path_url = $photo->storePublicly('gallary','public');
    
                Gallary::create([
                    'name' =>$photo->getClientOriginalName(),
                    'file_name' => $photo->getClientOriginalName(),
                    'file_photo_url' => $path_url,
                    'mime_type' => $photo->getMimeType(),
                    'size' => $photo->getSize(),
                ]);
            }
        }
        session()->flash('message', 'File Uploaded Successfully');

        $this->reset();

    }

    public function scrollMore()
    {
        $this->perPage = $this->perPage + 6;
    }

    public function render()
    {
        try {
            $this->gallaries = Gallary::latest()->take($this->perPage)->get();
        } catch (\Throwable $th) {
            //throw $th;
        }
        return view('livewire.add-media');
    }
}

and this is my blade component

   <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                            aria-labelledby="pills-profile-tab" x-data="{ isUploading: false, progress: 0 }"
                            x-on:livewire-upload-start="isUploading = true"
                            x-on:livewire-upload-finish="isUploading = false"
                            x-on:livewire-upload-error="isUploading = false"
                            x-on:livewire-upload-progress="progress = $event.detail.progress">
                            {{-- <form wire:submit.prevent="save" enctype="multipart/form-data"> --}}
                            <form enctype="multipart/form-data">
                                <input wire:model="photos" type="file" name="mediaupload" id="mediaupload" id="file-{{ $iteration }}"
                                multiple>
                                @error('photos.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <!-- Progress Bar -->
                                <div x-show="isUploading">
                                    <progress max="100" x-bind:value="progress"></progress>
                                </div>
                                {{-- <button wire:loading.attr="disabled" type="submit"
                                    class="btn btn-sm btn-outline-primary"
                                    {{ ($photos) ? '' : 'disabled' }}>Upload</button> --}}
                            </form>
                        </div>