F
Filament•8mo ago
SirAlyon

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
Dennis Koch•8mo ago
You added the action inside the form and the button submit the form. Try moving the modals component out of the form.
SirAlyon
SirAlyon•8mo ago
It's working outside the form, but can't understand why the validation is failing:
No description
SirAlyon
SirAlyon•8mo 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 :/
SirAlyon
SirAlyon•8mo 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)
No description
Dennis Koch
Dennis Koch•8mo ago
Are you sure it’s working? Or is the validation just not triggered?
SirAlyon
SirAlyon•8mo 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
SirAlyon
SirAlyon•8mo ago
No description
No description
Dennis Koch
Dennis Koch•8mo ago
Animated spinner is default for everything that takes a while. But double spinner looks like an issue 😅
SirAlyon
SirAlyon•8mo 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(?)
SirAlyon
SirAlyon•8mo 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')
No description
SirAlyon
SirAlyon•8mo ago
Any ideas to fix this issue are appreciated 🙂
Dennis Koch
Dennis Koch•8mo ago
Sorry, I don't really know. Any console errors?
SirAlyon
SirAlyon•8mo ago
I get this one only if i open the modal and close it, if i submit all seems to be ok
No description
Dennis Koch
Dennis Koch•8mo ago
Might be related
SirAlyon
SirAlyon•8mo ago
Anyway its 100% a modal issue because the same code i have inside the form is working fine without the spinners issue
SirAlyon
SirAlyon•8mo ago
Actually for me is impossible to debug
No description
SirAlyon
SirAlyon•8mo ago
I'm not setting any type of label or form (the modal doesnt contain a form, just simple input)
Dennis Koch
Dennis Koch•8mo ago
just simple input
Which is inside a form
SirAlyon
SirAlyon•8mo 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
SirAlyon
SirAlyon•8mo 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...
Want results from more Discord servers?
Add your server
More Posts
Sub-Navigation top positionIs it possible to get the top sub-navigation above the page title and breadcrumb, instead of having Change the HTTP method to GET for the Logout MenuItemHi there! I am trying to override the behaviour of the logout menu item in the user dropdown on my aDynamic Select FieldsI have a recursive relationship in a table. The table name is topics and each topic can have childrehide field conditionally and submit values accordingly.Hi there! I wan to achieve something like if user has role admin then show this ``` Select::make('uEditRecord and relationshipsOk, not sure if I am having a brain fart or what, but with the EditRecord page of a resource and a pAlert when navigation away from dirty formIs it possible to show an alert when using the browser navigation or closing the tab while fields inObject of class Filament\Support\Enums\MaxWidth could not be converted to stringSo I noticed my tables weren't showing the pagination badges so I google and came across a suggestiogetTabs()public function getTabs(): array { return [ 'all' => Tab::make('Active')->moTextEntry urlI have a custom page and it displays Infolist with some TextEntries. In my custom page I have this cAdding routes to Filament auth middlewareI have a Filament user panel where a website user can do normal CRUD operations after he logs in.