FileUpload works in widget but error in livewire component

[glenelkinsdev]

Package

Form builder

Package Version

3

How can we help you?

I have a FileUpload component in a widget, this widget is loaded into a page header widgets and works perfectly

However, if i replicate the same code in a livewire component which i display in a modal it gives me an error which i don't understand since a widget inherits a livewire component.

So i load the component into my modal view like this:

@livewire('attachment-upload')

My form in the component is basic:

<div>
    <x-filament::section>
        <form wire:submit="upload">
            {{ $this->form }}
            <x-filament::button type="submit" class="mt-3">
                Upload Attachment
            </x-filament::button>
        </form>
    </x-filament::section>
</div>

And the php is practically the same as the widget:

<?php

namespace App\Livewire;


use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\Section;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Component;

/**
 * Class AttachmentUpload
 * @package App\Livewire
 */
class AttachmentUpload extends Component implements HasForms
{
    use InteractsWithForms;


    /**
     * @var array|null[]|null
     */
    public ?array $data = ['filename' => null];


    /**
     * @param Form $form
     * @return Form
     */
    public function form(Form $form): Form
    {
        return $form->schema([
            Section::make('Add A New Attachment')->schema([
                FileUpload::make('filename')
                    ->disk('private')
                    ->moveFiles()
                    ->previewable()
                    ->multiple(false)
            ])

        ])->statePath('data');
    }


    /**
     * @return View
     */
    public function render(): View
    {
        return view('livewire.attachment-upload');
    }

    /**
     * @return void
     */
    public function upload()
    {
        dd("DD");
    }
}

When i select a file in this one the js console gives this error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getFiles')

[leandrocfe]

public function mount(): void
{
    $this->form->fill();
}

[glenelkinsdev]

i had that previously and it makes no difference

I might add that the modal is loaded in through a form ViewField, the error happens right after the FileUpload is finished, before the form is even submitted

[leandrocfe]

Why not a modal form?
https://filamentphp.com/docs/3.x/actions/modals#modal-forms

[glenelkinsdev]

Because it's a custom modal that contains a html table inside a form, which filament can't do by itself, so ViewField lets me put the table in there with a radio button on each row to select an item and the upload component is above the table