how to trigger js event from livewire component?

[lingtalfi]

I have this livewire simple attachment component in my blade template:

<livewire:media-library wire:model="photo" />

It's working fine.

However, client side, i would like to detect when a file is added, so that i can replace the picture (outside of this livewire component) by the newly updated one.
So my question: is there any js event triggered when a file is uploaded via the media-library component? (looked through the docs but didn't find anything so far...).

Note: i saw this page about events: https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/consuming-events, but from my understanding it's about laravel events, not livewire/js usable events. I'm probably missing something, but not sure where to look for.

Note2: i saw somebody use the window.livewire.hook method here #2290, so if i could figure out which event to listen to maybe i could work around my problem.

[perisicnikola37]

Hi there.

Here's a suggested approach to achieve what you're looking for:

Livewire Hook:
You can use the wire:model directive to listen for changes to the photo property and trigger a Livewire hook. In your Livewire component, add a updated method:

class YourComponent extends Component
{
    public $photo;

    public function updatedPhoto()
    {
        $this->emit('photoUpdated', $this->photo);
    }

    // Rest of your component code...
}

Livewire JavaScript Hook:
In your Blade template or separate JavaScript file, use the Livewire JavaScript hook to listen for the Livewire event:

document.addEventListener('livewire:load', function () {
    Livewire.hook('message.processed', (message, component) => {
        if (message.updateQueue.some(i => i.name === 'photoUpdated')) {
            // The 'photo' property has been updated, handle your logic here.
            let updatedPhoto = component.photo;
            console.log('Updated Photo:', updatedPhoto);
        }
    });
});

This approach uses the Livewire JavaScript hook to listen for when Livewire processes a message (such as an event emission).

Please note that this method relies on Livewire's internal mechanisms and might be subject to changes in future versions. Ensure that you check the Livewire documentation or source code for any updates.

I hope this helps. Feel free to reach out if you have further questions or if there are updates to Livewire that affect this approach.

[lingtalfi]

Thanks, it helped a lot.

I had to adapt the code a little, but you got me thinking in the right direction.

For those in the same case: here is what i did.
I actually have two solutions:

The first one is using js as described:

First solution (using js)

My Livewire component php side:

class YourComponent extends Component
{
    public $photo = [];

    public function updatedPhoto()
    {
        $this->dispatch('photoUpdated', $this->photo);
    }

    // Rest of your component code...
}

For my livewire component i added the live property to force the update:

<livewire:media-library wire:model.live="photo" />

And to interact with it js side (in my blade component):

@script
<script>
  Livewire.on('photoUpdated', function(data){
    console.log('photoUpdated', data);
  })
</script>
@endscript

That worked.
However, i find another approach with just php that actually suited my need more:

Second solution (using php)

my Livewire component php side:

class YourComponent extends Component
{
    public $photo = [];
    // Rest of your component code...
}

For my livewire component i still had to add the live property to force the update:

<livewire:media-library wire:model.live="photo" />

And in my blade component:

@php
    if($photo){
        $url = $photo[array_key_first($photo)]['preview_url'];
        // do anything with the url now...
    }
@endphp