Filament•3mo ago

Error with FileUpload in Livewire nested component

Hello All, I am using Filament forms in one of the Livewire components which is nested in another full-page Livewire component. filpond field is throwing the bellow error in the console when I upload the file the first time, Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore') But it works perfectly when I try to upload the file a second time (without page reload). FileUpload in my form schema:

FileUpload::make('pmva_2')->label('Certificate')->required()
            ->acceptedFileTypes(['application/pdf','image/jpeg','image/png'])
            ->disk('public')->directory('pmva_certs'),

FileUpload::make('pmva_2')->label('Certificate')->required()
            ->acceptedFileTypes(['application/pdf','image/jpeg','image/png'])
            ->disk('public')->directory('pmva_certs'),

Form in view file:

<form>
    {{ $this->form }}
    @if($this->showCreateCheckout)
        <x-filament::button color="info" class="mt-2" wire:click="createCheckout">
            @if($this->training->course_id === 6) Request Booking @else Confirm Booking @endif
        </x-filament::button>
    @endif
</form>
<x-filament-actions::modals />

<form>
    {{ $this->form }}
    @if($this->showCreateCheckout)
        <x-filament::button color="info" class="mt-2" wire:click="createCheckout">
            @if($this->training->course_id === 6) Request Booking @else Confirm Booking @endif
        </x-filament::button>
    @endif
</form>
<x-filament-actions::modals />

Could anyone please help with this? Thank you 🙂

Solution:

async-alpine was causing this issue. I have loaded this wrapper externally into my app layout file, working perfectly after removing this. https://github.com/Accudio/async-alpine...

GitHub

GitHub - Accudio/async-alpine: Async Alpine brings advanced code sp...

Async Alpine brings advanced code splitting and lazy-loading to Alpine.js components! - Accudio/async-alpine

Jump to solution

2 Replies

Sanchit Patil•3mo ago

getting this error in console.

Solution

Sanchit Patil•3mo ago

async-alpine was causing this issue. I have loaded this wrapper externally into my app layout file, working perfectly after removing this. https://github.com/Accudio/async-alpine

GitHub

GitHub - Accudio/async-alpine: Async Alpine brings advanced code sp...

Async Alpine brings advanced code splitting and lazy-loading to Alpine.js components! - Accudio/async-alpine

Gaming

Programming

Error with FileUpload in Livewire nested component