Filament•12mo ago

Modal Action with Custom Livewire component

Hello everyone, I'm facing an issue with an action in a custom Livewire component. Upon clicking a button, a modal opens with a file uploader inside. Everything seems to be working correctly, but I just can't figure out why the "->action(//mycode....)" method doesn't seem to be triggered upon confirming the action. In fact, upon submitting the modal, I'm redirected back with a 'Saved' success notification. How is it possible that my dd($data) isn't being triggered? What am I missing? Livewire Controller:

class CreateOpenFundsD extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;
    use WithFileUploads;

public function mount(): void
    {
      //....
    }

    public function form(Form $form): Form
    {
        //Only half of my form... (the other one is rendered in the livwire component view)
    }

    public function importHeadersAction(): Action
    {
        return Action::make('importHeaders')
            ->label('Importa Headers')
            ->form([
                FileUpload::make('attachment')
                            ->storeFiles(false)
                            ->label('Carica File (CSV o XLSX)')
                            ->acceptedFileTypes(['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])
                            ->columnSpan(6)
            ])
            ->action(function ($data) {
                dd($data); //how this method is not triggered?
            });

    }

class CreateOpenFundsD extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;
    use WithFileUploads;

public function mount(): void
    {
      //....
    }

    public function form(Form $form): Form
    {
        //Only half of my form... (the other one is rendered in the livwire component view)
    }

    public function importHeadersAction(): Action
    {
        return Action::make('importHeaders')
            ->label('Importa Headers')
            ->form([
                FileUpload::make('attachment')
                            ->storeFiles(false)
                            ->label('Carica File (CSV o XLSX)')
                            ->acceptedFileTypes(['text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])
                            ->columnSpan(6)
            ])
            ->action(function ($data) {
                dd($data); //how this method is not triggered?
            });

    }

Livewire view:

<form wire:submit="createOrUpdate">
        {{ $this->form }}
  

         <div>
              {{ $this->importHeaders }}
 
              <x-filament-actions::modals />
          </div>

          //other things.....
 </form>

<form wire:submit="createOrUpdate">
        {{ $this->form }}
  

         <div>
              {{ $this->importHeaders }}
 
              <x-filament-actions::modals />
          </div>

          //other things.....
 </form>

Thanks to anyone will help! Bye 🙂

20 Replies

Dennis Koch•12mo ago

You added the action inside the form and the button submit the form. Try moving the modals component out of the form.

SirAlyonOP•12mo ago

It's working outside the form, but can't understand why the validation is failing:

SirAlyonOP•12mo ago

And why the filament buttons are rendered with a animated spinner?! xD Actually the validation was fine before moving it into the modal I have the same code inside my form and not rendered into the modal and its working fine :/

SirAlyonOP•12mo ago

As you can see the first button is the newer, it trigger the modal and now it is OUTSIDE the form. The second one is inside the form and its working! (i cant let you see, but when i click the second button, it do what it should)

Dennis Koch•12mo ago

Are you sure it’s working? Or is the validation just not triggered?

SirAlyonOP•12mo ago

Hi, i finally found the problem: if i dump $value of the FileUpload i can see livewire read all files mime type as "application/octet-stream", but obv they are not. I did something like:

FileUpload::make('attachment')
                            ->storeFiles(false)
                            ->label('Carica File (CSV o XLSX)')
                            ->acceptedFileTypes(['text/csv','text/plain', 'application/octet-stream', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])
                            ->rules([
                                function () {
                                    return function ($attribute, $value, $fail) {
                                        //dd($value->getMimeType());
                                        //dd($value);
                                        // Aggiungi qui la tua logica di validazione per il file
                                        // Ad esempio, puoi controllare il tipo di file o altre proprietà
                                        //dd('sono dentro');
                                        if ($value instanceof UploadedFile && $value->extension() !== 'csv' && $value->extension() !== 'xlsx' && $value->getMimeType() !== 'text/csv' && $value->getMimeType() !== 'text/plain' && $value->getMimeType() !== 'application/vnd.ms-excel' && $value->getMimeType() !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                                            $fail('Il file deve essere di tipo CSV o XLSX.');
                                        }
                                    };
                                },
                            ])

FileUpload::make('attachment')
                            ->storeFiles(false)
                            ->label('Carica File (CSV o XLSX)')
                            ->acceptedFileTypes(['text/csv','text/plain', 'application/octet-stream', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])
                            ->rules([
                                function () {
                                    return function ($attribute, $value, $fail) {
                                        //dd($value->getMimeType());
                                        //dd($value);
                                        // Aggiungi qui la tua logica di validazione per il file
                                        // Ad esempio, puoi controllare il tipo di file o altre proprietà
                                        //dd('sono dentro');
                                        if ($value instanceof UploadedFile && $value->extension() !== 'csv' && $value->extension() !== 'xlsx' && $value->getMimeType() !== 'text/csv' && $value->getMimeType() !== 'text/plain' && $value->getMimeType() !== 'application/vnd.ms-excel' && $value->getMimeType() !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                                            $fail('Il file deve essere di tipo CSV o XLSX.');
                                        }
                                    };
                                },
                            ])

So using "$value->getMimeType()" i get the right mime type and i can usccessfully validate the input. Maybe you know why the filament blade component render with an animated spinner? How can i remove it? Anyway i'll soon close this thread as solved. Thank you

SirAlyonOP•12mo ago

Dennis Koch•12mo ago

Animated spinner is default for everything that takes a while. But double spinner looks like an issue 😅

SirAlyonOP•12mo ago

Yes 🥲 Actually as you can see in the first screen, i have the spinner also on the buttons that are not loading.. So probably the issue is it is always visibile, and that's why i got 2 spinners while the fileupload is loading(?)

SirAlyonOP•12mo ago

Def something is wrong, i can add an icon:

return Action::make('importHeaders')
            ->label('Importa Headers')
            ->icon('tabler-arrows-move')

return Action::make('importHeaders')
            ->label('Importa Headers')
            ->icon('tabler-arrows-move')

SirAlyonOP•12mo ago

Any ideas to fix this issue are appreciated 🙂

Dennis Koch•12mo ago

Sorry, I don't really know. Any console errors?

SirAlyonOP•12mo ago

I get this one only if i open the modal and close it, if i submit all seems to be ok

Dennis Koch•12mo ago

Might be related

SirAlyonOP•12mo ago

Anyway its 100% a modal issue because the same code i have inside the form is working fine without the spinners issue

SirAlyonOP•12mo ago

Actually for me is impossible to debug

SirAlyonOP•12mo ago

I'm not setting any type of label or form (the modal doesnt contain a form, just simple input)

Dennis Koch•12mo ago

just simple input

Which is inside a form

SirAlyonOP•12mo ago

Ye you are right. I set the label method on the FileUplaod component and in the modal too with filament, i can't understand what is wrong.

    public function importHeadersAction(): Action
    {
        return Action::make('importHeaders')
            ->label('Importa Headers')
            ->icon('tabler-arrows-move')
            
            ->form([
                FileUpload::make('attachment')
                            ->storeFiles(false)
                            ->label('Carica File (CSV o XLSX)')
                            ->acceptedFileTypes(['text/csv','text/plain', 'application/octet-stream', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])
                            ->rules([
                                function () {
                                    return function ($attribute, $value, $fail) {
                                        //dd($value->getMimeType());
                                        //dd($value);
                                        // Aggiungi qui la tua logica di validazione per il file
                                        // Ad esempio, puoi controllare il tipo di file o altre proprietà
                                        //dd('sono dentro');
                                        if ($value instanceof UploadedFile && $value->extension() !== 'csv' && $value->extension() !== 'xlsx' && $value->getMimeType() !== 'text/csv' && $value->getMimeType() !== 'text/plain' && $value->getMimeType() !== 'application/vnd.ms-excel' && $value->getMimeType() !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                                            $fail('Il file deve essere di tipo CSV o XLSX.');
                                        }
                                    };
                                },
                            ])
                            
            ])
            ->action(function ($data) {
                //dd($data);
            });

    }

    public function importHeadersAction(): Action
    {
        return Action::make('importHeaders')
            ->label('Importa Headers')
            ->icon('tabler-arrows-move')
            
            ->form([
                FileUpload::make('attachment')
                            ->storeFiles(false)
                            ->label('Carica File (CSV o XLSX)')
                            ->acceptedFileTypes(['text/csv','text/plain', 'application/octet-stream', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'])
                            ->rules([
                                function () {
                                    return function ($attribute, $value, $fail) {
                                        //dd($value->getMimeType());
                                        //dd($value);
                                        // Aggiungi qui la tua logica di validazione per il file
                                        // Ad esempio, puoi controllare il tipo di file o altre proprietà
                                        //dd('sono dentro');
                                        if ($value instanceof UploadedFile && $value->extension() !== 'csv' && $value->extension() !== 'xlsx' && $value->getMimeType() !== 'text/csv' && $value->getMimeType() !== 'text/plain' && $value->getMimeType() !== 'application/vnd.ms-excel' && $value->getMimeType() !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                                            $fail('Il file deve essere di tipo CSV o XLSX.');
                                        }
                                    };
                                },
                            ])
                            
            ])
            ->action(function ($data) {
                //dd($data);
            });

    }

And also, if this fileupload is inside a form, why it is triggering the other one if i put the action inside the other form.. So strange behavior

SirAlyonOP•12mo ago

These are interesting... https://github.com/filamentphp/filament/issues/956, https://github.com/filamentphp/filament/issues/2772

GitHub

Issues · filamentphp/filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - Issues · filamentphp/filament

GitHub

Page's Action modal form with FileUpload field · Issue #2772 · fila...

Package filament/filament Package Version v2.12.31 Laravel Version v9.17.0 Livewire Version v2.10.5 PHP Version PHP 8 Bug description I am using an action within ListRecord's page to import fil...

Gaming

Programming

Modal Action with Custom Livewire component