Alpine Expression Error: fileUploadFormComponent when loading page first time

What I am trying to do:
Load a form with FileUpload field in an existing Laravel app (using only forms/tables, not the full panel)
Using Filament v3 due to conflicting dependencies with other plugins.

My issue / error:
On first page load, a default HTML upload button appears. Selecting a file shows an error on submit: nothing selected.
Console: Alpine Expression Error: fileUploadFormComponent is not defined

Refreshing the page enables drag-and-drop and the form works. But next login requires refresh again.

What I did:
Installed Filament Forms v3
Updated files per docs
Separated loading Filament and Datatables to avoid Alpine double-init
Tried moving app.js before/after @filamentScripts

Code:
importing filamentScripts in app.blade before closing body tag with:
@filamentScripts
@vite('resources/js/app.js')

Component code:

class PdfToExcel extends Component implements HasForms
{
    use InteractsWithForms;
    public ?array $data = [];
 
    public function mount(): void
    {
        $this->form->fill();
    }
 
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('file')
                    ->label(__('Choose File'))
                    ->acceptedFileTypes(['application/pdf'])
                    ->storeFiles(false)
                    ->required(),
            ])->statePath('data');
    }
}

class PdfToExcel extends Component implements HasForms
{
    use InteractsWithForms;
    public ?array $data = [];
 
    public function mount(): void
    {
        $this->form->fill();
    }
 
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('file')
                    ->label(__('Choose File'))
                    ->acceptedFileTypes(['application/pdf'])
                    ->storeFiles(false)
                    ->required(),
            ])->statePath('data');
    }
}

Blade:

<div>
    <form wire:submit="send" class="default-form import min-w-96">
        {{ $this->form }}
       
        <button type="submit" class="button primary mt-3">
            {{ ucfirst(__('submit')) }}
        </button>
    </form>
   
    <x-filament-actions::modals />
    @livewire('notifications')
</div>

<div>
    <form wire:submit="send" class="default-form import min-w-96">
        {{ $this->form }}
       
        <button type="submit" class="button primary mt-3">
            {{ ucfirst(__('submit')) }}
        </button>
    </form>
   
    <x-filament-actions::modals />
    @livewire('notifications')
</div>

Alpine Expression Error: fileUploadFormComponent when loading page first time

class PdfToExcel extends Component implements HasForms
{
    use InteractsWithForms;
    public ?array $data = [];
 
    public function mount(): void
    {
        $this->form->fill();
    }
 
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('file')
                    ->label(__('Choose File'))
                    ->acceptedFileTypes(['application/pdf'])
                    ->storeFiles(false)
                    ->required(),
            ])->statePath('data');
    }
}

class PdfToExcel extends Component implements HasForms
{
    use InteractsWithForms;
    public ?array $data = [];
 
    public function mount(): void
    {
        $this->form->fill();
    }
 
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('file')
                    ->label(__('Choose File'))
                    ->acceptedFileTypes(['application/pdf'])
                    ->storeFiles(false)
                    ->required(),
            ])->statePath('data');
    }
}

Blade:

<div>
    <form wire:submit="send" class="default-form import min-w-96">
        {{ $this->form }}
       
        <button type="submit" class="button primary mt-3">
            {{ ucfirst(__('submit')) }}
        </button>
    </form>
   
    <x-filament-actions::modals />
    @livewire('notifications')
</div>

<div>
    <form wire:submit="send" class="default-form import min-w-96">
        {{ $this->form }}
       
        <button type="submit" class="button primary mt-3">
            {{ ucfirst(__('submit')) }}
        </button>
    </form>
   
    <x-filament-actions::modals />
    @livewire('notifications')
</div>

Alpine Expression Error: fileUploadFormComponent when loading page first time

Alpine Expression Error: fileUploadFormComponent when loading page first time

Similar Threads

Similar Threads

Similar Threads