Media Custom Field

[edel708]

Package

Form builder

Package Version

v3.2.127

How can we help you?

I want to implement the following functionality:
The user enters a URL from an external platform (e.g., YouTube) into a text field. On the blur event, I want to load the corresponding video inside an iframe.

My form was built using a Filament resource. I thought about creating a custom field to handle the logic for dynamically loading the video based on the platform.
custom field blade file:

  `  
    <div>
      <input 
          type="text" 
          wire:model.lazy="{{ $getStatePath() }}" 
          id="{{ $getId() }}" 
         {{--  @blur="Livewire.emit('videoUrlBlurred', '{{ $getStatePath() }}')"  --}}
          placeholder="Enter video URL"
      >
      {{ $getState() }} {{ $getStatePath() }}
      <script>
        window.addEventListener('load', function () {
            console.log('loaded');

                const input = document.getElementById('{{ $getId() }}');
                console.log(input);

                if (input) {
                    input.addEventListener('blur', () => {
                        Livewire.emit('videoUrlBlurred', { url: input.value });
                    });
                }         
        });
       </script>
  </div>
`

Edit Page of the resource:
`
namespace App\Filament\Resources\MediaResource\Pages;

    use App\Filament\Resources\MediaResource;
    use Filament\Actions;
    use Filament\Resources\Pages\EditRecord;
  
    class EditMedia extends EditRecord
    {
          protected static string $resource = MediaResource::class;
      
          protected $listeners = ['videoUrlBlurred'];
         
      
          public function videoUrlBlurred($statePath)
          {
              $field = $this->form->getComponent($statePath);
              if ($field && method_exists($field, 'fetchVideo')) {
                  $field->fetchVideo();
              }
          }
    
          protected function getHeaderActions(): array
          {
              return [
                  Actions\DeleteAction::make(),
              ];
          }
      }

 `

However, no matter how I trigger the videoUrlBlurred event, I always get the following error:
Uncaught TypeError: Livewire.emit is not a function

I haven’t been able to figure out how to fix this issue. Is Liverwire included by default in Filament, or do I need to configure something manually?

Any help or suggestions would be greatly appreciated!