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

juanborras's avatar

Filamentphp. Events

Hey there!

How can I fire an event inside a Form Select and listen to it in a Form FileUpload?

Thanks!

0 likes
9 replies
LaryAI's avatar
Level 58

To fire an event inside a Form Select and listen to it in a Form FileUpload using FilamentPHP, you can utilize Livewire's event system. Here's a step-by-step solution:

  1. Fire an Event from the Form Select:

    In your Livewire component, you can fire an event when the select option changes. You can do this by using the wire:change directive on your select input.

    <select wire:change="$emit('selectChanged', $event.target.value)">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <!-- Add more options as needed -->
    </select>
    
  2. Listen for the Event in the Form FileUpload:

    In the same Livewire component, you can listen for the event in your FileUpload component. Use the wire:listen directive to handle the event.

    <x-filament::form.file-upload
        wire:listen="selectChanged"
        wire:model="file"
    />
    
  3. Handle the Event in the Livewire Component:

    In your Livewire component class, you need to define a method to handle the event. This method will be triggered when the event is fired.

    use Livewire\Component;
    
    class YourComponent extends Component
    {
        public $file;
    
        protected $listeners = ['selectChanged'];
    
        public function selectChanged($value)
        {
            // Handle the event, e.g., update a property or perform an action
            // You can access the selected value via the $value parameter
            // For example, you might want to reset the file upload or perform some logic
        }
    
        public function render()
        {
            return view('livewire.your-component');
        }
    }
    

This setup allows you to fire an event from a Form Select and listen to it in a Form FileUpload component. You can then handle the event in your Livewire component to perform any necessary actions based on the selected value.

tisuchi's avatar

@juanborras Have you tried with Filament Action

For example:


return [
            Action::make('Your Action Name')
                ->action(function () {
                    // 
                    Event::dispatch(new YourEvent(auth()->user()));
                }),
        ];
2 likes
juanborras's avatar

@tisuchi First, thank you for taking the time to read the question and give it an answer :D :D

What I want to do is clean a FileUpload form field when, in the same form, a Select form field has its selected value changed. I though that maybe FileUpload would have a "hook" to allow me to "reset" or "clean" it last selected file(s). That's why I asked... but the thing is that FileUpload is build on FilePond, which is a JS component or library (not clear to me at this point).

Maybe my approach to solve the problem is not the right one...

Any thoughts?

juanborras's avatar

@Batman55 Hey thanks for the reply! I've used what you mentioned on related selects, but it doesnt work for the FileUpload... that's why I'm trying to figure out some method to notify the FileUpload... the big issue is that it can be done via javscript/alpine but it would require listening for FilePond events... and is where I get lost...

Thanks!

Please or to participate in this conversation.