FilamentF
Filament•2y ago
rigrinev

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');
}


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>


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
image.png
Adding a form to a Livewire component - Form Builder - Filament
Was this page helpful?