F
Filament•4w ago
earendil88

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>
13 Replies
Dennis Koch
Dennis Koch•4w ago
Are there any errors in DevTools Console or Network tab? Sounds like the file is not loaded the first time.
earendil88
earendil88OP•4w ago
Yes the errors in DevTools Console are: Alpine Expression Error: fileUploadFormComponent is not defined Expression: "fileUploadFormComponent({ ...} Alpine Expression Error: error is not defined Uncaught ReferenceError: error is not defined at [Alpine] error (eval at safeAsyncFunction), at livewire.js at tryCatch at livewire.js at reactiveEffect at Object.effect2 at effect at wrappedEffect at Function at flushHandlers
Dennis Koch
Dennis Koch•4w ago
Sorry, you already said, there's an console error. 🙈 Is there an error in network tab? Sounds like the JS is not loaded.
earendil88
earendil88OP•4w ago
No problem, now I could post the entire errors haha. The network tab only loads two files to start with: notifications.js support.js After refresh the other files get added: app.js / livewire.js / file-upload.js
Dennis Koch
Dennis Koch•4w ago
Okay, it's weird that those files are missing. How do you load them in your layout?
earendil88
earendil88OP•4w ago
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if (env('APP_ENV')!='production')
        <meta name="robots" content="noindex, nofollow">
    @endif
 
    <title>{{ config('app.name', 'Laravel') }}</title>
 
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
 
    @filamentStyles
    @vite(['resources/css/app.css', 'resources/css/style.css'])
</head>
 
<body class="font-sans antialiased">
 
    @filamentScripts
    @vite('resources/js/app.js')
</body>
 
</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if (env('APP_ENV')!='production')
        <meta name="robots" content="noindex, nofollow">
    @endif
 
    <title>{{ config('app.name', 'Laravel') }}</title>
 
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
 
    @filamentStyles
    @vite(['resources/css/app.css', 'resources/css/style.css'])
</head>
 
<body class="font-sans antialiased">
 
    @filamentScripts
    @vite('resources/js/app.js')
</body>
 
</html>
Dennis Koch
Dennis Koch•4w ago
It's super-weird because even your app.js is not loaded on first request. When you load the page, is that file in the HTML?
earendil88
earendil88OP•4w ago
They are in the HTML, that makes it even more weird. Even in the x-load-src the file-upload.js is mentioned, and the app.js (with the same suffix as in the assets folder) is in the HTML too. When I compare the rendered HTML before refresh and after refresh only the wire:id/snapshots differ, everything else stays the same.
LeandroFerreira
LeandroFerreira•4w ago
could you share the app.js?
awcodes
awcodes•4w ago
Are you using spa mode?
earendil88
earendil88OP•4w ago
This is in the app.js: import './bootstrap'; import '../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables-all.js';
And yes, we use spa mode. Tried to remove the wire:navigate. Then the page is a 'fresh' load when you open it, so that works. Would it be best to remove the wire:navigate or is there another option to load the right files?
LeandroFerreira
LeandroFerreira•4w ago
did you try it without rappasoft/laravel-livewire-tables?
earendil88
earendil88OP•4w ago
Yes, my first idea was that it would load Alpine twice, but removing it has no effect

Did you find this page helpful?