Multiple FileUpload implementation in a livewire component not submitting/rendering the right way.

[woutermoelker]

Package

filament/forms

Package Version

v3.2.141

Laravel Version

v11.43.2

Livewire Version

v3.5.20

PHP Version

v8.2.28

Problem description

When using a FileUpload component with the multiple() option in a Filament form, the component's styling appears to extend beyond its designated area and overlaps with the submit button, making it unclickable. This only happens when multiple() is enabled - without it, the submit button works correctly. Interestingly, if the FileUpload component with multiple() is placed inside a Wizard step, it works as expected without blocking the submit button.

Expected behavior

The FileUpload component with multiple() enabled should be properly contained within its designated area and should not interfere with or overlap the submit button. Users should be able to click the submit button without issues.

Steps to reproduce

1. Create a Livewire component that implements HasForms
2. Add a Filament form with a FileUpload component that has multiple() enabled
3. Add a submit button below the form
4. Try to click the submit button

`namespace App\Livewire\Components;

use App\Models\Quote; use Livewire\Component; use Filament\Forms\Form; use Filament\Forms\Contracts\HasForms; use Filament\Forms\Components\FileUpload; use Filament\Forms\Concerns\InteractsWithForms;

class ImageUpload extends Component implements HasForms { use InteractsWithForms;

public $quoteId;
public $images;

public function mount(Quote $quote)
{
    $this->quoteId = $quote->id;
    $this->images = [];
}

public function form(Form $form): Form
{
    return $form
        ->schema([
            FileUpload::make('images')
                ->label('Upload Image')
                ->multiple() // This causes the issue
        ]);
}

public function update()
{
    dd($this->form->getState());
}

public function render()
{
    $quote = Quote::find($this->quoteId);
    
    return view('livewire.components.image-upload', [
        'quote' => $quote
    ]);
}

}`

`

{{ $this->form }}

    <div class="mt-4">
        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">
            Upload Images
        </button>
    </div>
</form>

`

Additional Information

• Using Filament Forms v3.x
• The issue does not occur when the same component is placed inside a Wizard step
• No JavaScript errors appear in the console when trying to click the submit button
• The problem appears to be purely CSS/styling related, as the button becomes inaccessible to clicks
• When inspecting with dev tools, it appears that the FileUpload component's area extends beyond its visible boundaries, creating an invisible layer that blocks interaction with the submit button

Reproduction repository (issue will be closed if this is not valid)

https://github.com/woutermoelker/filament-forms-issue-multiple-file-upload-livewire

Relevant log output

[EngMustafaSabahWAW]

also i need solution for this issue my project is live

[magic-thomas]

You gonna need it ASAP.

I add this code at the end of form() for that trouble.

    Actions::make([
        Action::make('submit')
            ->label($this->post ? 'EDIT' : 'SAVE')
            ->submit('save_post')
            ->color('primary')
            ->extraAttributes(['class' => 'bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm']),
    ])

Good luck to you too.

[leandrocfe]

Follow this section

You should add $this->form->fill() to the mount method and use $this->form->getState() to validate and get the form data.

[danharrin]

Thanks @leandrocfe!