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

Error with FileUpload in Livewire nested component

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

Error with FileUpload in Livewire nested component

Error with FileUpload in Livewire nested component

Similar Threads

Similar Threads

Similar Threads