Filament•7mo ago

Form in Livewire: Disable Submit-Button, while a file uploads?

Hi, im using the Filament Form inside a Livewire component. While uploading a large file, the user can still submit the main form. How can i disable the button while the upload runs. I search for a possiblity to listen for "livewire-upload-start | -finish| -cancel | -error | -progress" or some kind of variables available in filament. Something like this... (PSEUDO CODE)

<div>
    <form wire:submit="create">
        {{ $this->form }}
        
        <button 
            type="submit"
            disabled="{ $this->form->fileUploading }"
        >
            Submit
        </button>
    </form>
    
    <x-filament-actions::modals />
</div>

<div>
    <form wire:submit="create">
        {{ $this->form }}
        
        <button 
            type="submit"
            disabled="{ $this->form->fileUploading }"
        >
            Submit
        </button>
    </form>
    
    <x-filament-actions::modals />
</div>

Adding the Form documentation: https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form

8 Replies

Remi Hindriks•6mo ago

did you ever solve this?

Dennis Koch•6mo ago

Isn't this just a

wire:loading.attr="disabled"

btx•6mo ago

I'm also struggeling with it, but my submit button is inside the wizard

LeandroFerreira•6mo ago

are you using the wizard in a custom page or resource?

btx•6mo ago

Yes, I followed this guide to add a form to a livewire component. The form has two wizard steps, a name input and a file upload. Seems I can not prevent submitting before the upload is finished. And secondly if the user uploads 5GB, there will be a long lag after hitting submit, until the file is copied to S3. Seems it is not possible to make livewire upload it directly to S3 istead of copying? https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

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

LeandroFerreira•6mo ago

5GB 😵 😵 I think you can use ->moveFiles() to store as permanent files try to add wire:target: https://livewire.laravel.com/docs/wire-loading#targeting-specific-actions

Laravel

wire:loading | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Dennis Koch•6mo ago

Seems it is not possible to make livewire upload it directly to S3 istead of copying?

It's possible. Your need to switch temporary livewire files to S3, too, though. There's a setting for it in config/livewire.php

btx•6mo ago

Thank you, got it working!

Gaming

Programming

Form in Livewire: Disable Submit-Button, while a file uploads?