File upload doesn't work property if it's after a hidden step (form wizard)

[sprtk-ches]

Package

filament/filament

Package Version

v3.2.14

Laravel Version

10.42.0

Livewire Version

v3.4.1

PHP Version

8.2.15

Problem description

If you have a wizard with a hidden step, and you conditionally show that step, the file upload after that hidden step will not work property and with throw the following JS error

Uncaught (in promise) TypeError: this.pond is null

This issue was introduced in version 3.1.24 (I believe this was the PR #10371)

Expected behavior

The file upload works properly even if it's after a hidden-step-turned-visible

Steps to reproduce

1. Create a form with a wizard and 3 steps
2. Add a file upload component in step 3
3. Make step 2 conditionally hidden
4. Toggle the 2nd step's visibility status
5. Open the browser console, go to step 3 and try to upload a file
6. You will see an error in the console

Here is a simple form that can reproduce this

Wizard::make([
    Wizard\Step::make('Step 1')
        ->schema([
            Toggle::make('something')
                ->label('Show step 2')
                ->live()
        ]),
    Wizard\Step::make('Hidden step')
        ->visible(fn (Get $get) => $get('something'))
        ->schema([]), // nothing to do here
    Wizard\Step::make('Step 3')
        ->schema([
            FileUpload::make('media')
                ->hint('Open the browser console and try to upload a file')
        ])
])

Reproduction repository

https://github.com/sprtk-ches/laravel-filament

Relevant log output

Uncaught (in promise) TypeError: this.pond is null
    B http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:40
    i http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:1
    setTimeout handler*Ml http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:1
    i http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:1
    i http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:1
    fire http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:1
    b http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    E http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    setTimeout handler*yd/E/</< http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    E http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    E http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    _write http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    <anonymous> http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    <anonymous> http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:2
    d http://filament.local/js/filament/forms/components/file-upload.js?v=3.2.14.0:1
...
file-upload.js:40:85386

[sprtk-ches]

Here is an example of how it looks

hidden-tab-1.mp4

[nils-kt]

After the update, I get this errror: Undefined variable $getUploadingMessage

[williamengbjerg]

After the update, I get this errror: Undefined variable $getUploadingMessage

Same here 👀

@nils-kt For me, the issue related to the $getUploadingMessage error was resolved by uninstalling/removing the package image-optimizer

[nils-kt]

@williamengbjerg confirmed! Can you create a issue (joshembling/image-optimizer)?
I'm on the go right now and can't formulate the issue perfectly because of that.
@joshembling

[williamengbjerg]

@williamengbjerg confirmed! Can you create a issue (joshembling/image-optimizer)? I'm on the go right now and can't formulate the issue perfectly because of that. @joshembling

Good idea. I submitted the issue

[joshembling]

Hi @nils-kt @williamengbjerg

This has now been fixed

joshembling/image-optimizer#9 (comment)