Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

edelr708's avatar

Media Custom Field

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>

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?

0 likes
1 reply

Please or to participate in this conversation.