Problem with a Filament Forms Livewire Component with a SpatieMediaLibraryFileUpload field

I've followed this example and created a livewire component with this form:

public function form(Form $form): Form
{
    return $form
        ->schema([
            Grid::make()->columns(3)->schema([
                TextInput::make('name')->required()->live(),
                TextInput::make('email')->required(),
                TextInput::make('phone')->required(),
            ]),
            Textarea::make('message')->rows(3)->required(),
            SpatieMediaLibraryFileUpload::make('attachments')
                ->collection('attachments')
                ->multiple()
                ->maxFiles(10)
                ->previewable(false)
                ->disk('public')
                ->maxSize(100 * 1024)
                ->required(function(Get $get): bool {
                    return filled($get('attachments'));
                })
        ])
        ->statePath('data');
}

public function form(Form $form): Form
{
    return $form
        ->schema([
            Grid::make()->columns(3)->schema([
                TextInput::make('name')->required()->live(),
                TextInput::make('email')->required(),
                TextInput::make('phone')->required(),
            ]),
            Textarea::make('message')->rows(3)->required(),
            SpatieMediaLibraryFileUpload::make('attachments')
                ->collection('attachments')
                ->multiple()
                ->maxFiles(10)
                ->previewable(false)
                ->disk('public')
                ->maxSize(100 * 1024)
                ->required(function(Get $get): bool {
                    return filled($get('attachments'));
                })
        ])
        ->statePath('data');
}

and the form itself

<form wire:submit="create" class="flex flex-col gap-8">

    <x-e.h2 title="Get a Quote"></x-e.h2>

    <div>{{ $this->form }}</div>

    <div class="mt-12">
        <x-filament::button type="submit">
            Submit
        </x-filament::button>
    </div>

</form>

<form wire:submit="create" class="flex flex-col gap-8">

    <x-e.h2 title="Get a Quote"></x-e.h2>

    <div>{{ $this->form }}</div>

    <div class="mt-12">
        <x-filament::button type="submit">
            Submit
        </x-filament::button>
    </div>

</form>

When user select a file, wait until it is uploaded and then click submit the form work fine. But if a user click the submit button before file has been uploaded it creates a problem. The attachments field is an optional field, so the submit go through, but files are not uploaded in this case. Does anyone have an idea how to solve this? In the Filament Panel, they have states for the Submit button to prevent users from clicking Submit while files are loading. Is there any way how to implement this in the livewire component? Thank you

Adding a form to a Livewire component - Form Builder - Filament

6 Replies

toeknee•3mo ago

Yeah you need to disable the submit button when wire is working wire:loading.attr="disabled" For example

rigrinev•3mo ago

Thank you @toeknee . I tried that and I tested it like this:

<div class="mt-12">
    <div wire:loading>Loading</div>
    <x-filament::button type="submit" wire:loading.attr="disabled">
        Submit
    </x-filament::button>
</div>

<div class="mt-12">
    <div wire:loading>Loading</div>
    <x-filament::button type="submit" wire:loading.attr="disabled">
        Submit
    </x-filament::button>
</div>

In this example the "Loading" text appears on a millisecond and disappears which shows that the wire:loading doesn't work as expected.

rigrinev•3mo ago

I see this problem is solved in the Panel. I don't see any way on how to solve it in the form Livewire component form.

rigrinev•3mo ago

I thought it would be good to have some kind of built in Submit button that can be added via form schema for example.

toeknee•3mo ago

Sorry you’ll need to set the target too: https://stackoverflow.com/questions/73347069/laravel-livewire-alpinejs-disable-a-button-while-loading-data-from-an-api-and-t I did it as a field for an extra large form I had a while back, similar method but just to the button would work: https://v2.filamentphp.com/tricks/forms-loading-inidicator

Stack Overflow

Laravel Livewire/AlpineJS: Disable a button while loading data from...

This should be really simple, but I don't get it. I want to replicate the functionality of a button that when pressed goes to an API (which could take about a minute to get the data and process it)...

Filament

Forms Loading Inidicator by Tony Partridge - Tricks - Filament

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

rigrinev•3mo ago

I've checked the links you provided. Thank you so much for your research. Just to make sure. I don't have any problems make the Submit button disabled if I have form like this:

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('name')->required()->live(),
            Textarea::make('message')->rows(3)->required()
        ])
        ->statePath('data');
}

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('name')->required()->live(),
            Textarea::make('message')->rows(3)->required()
        ])
        ->statePath('data');
}

the wire:loading.attr="disabled" work perfect in this case. But for the situation where I need to disable the Submit button when a user select a file and it is loading before clicking the submit button . Will your solution with specifying wire:target work? What would be the target for the field like SpatieMediaLibraryFileUpload::make('attachments'), should it be wire:target="attachments" or wire:target="data.attachments"? Thank you Anyway, @toeknee, I've checked your Form Loading Indicator trick. Thank you for your replies. I've spent about 4 hours trying to find the Filament solution for this problem. I will use just regular Livewire File upload functionality for now instead. Hopefully the Filament team will provide clear guidance for this in future. Thank you.

Gaming

Programming

Problem with a Filament Forms Livewire Component with a SpatieMediaLibraryFileUpload field