Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sprtk-ches opened this issue Jan 26, 2024 · 6 comments
Open

Comments

@sprtk-ches
Copy link
Contributor

sprtk-ches commented Jan 26, 2024

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

Donate 💰 to fund this issue

  • You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
  • 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
  • Thank you in advance for helping us make maintenance sustainable!
Fund with Polar
@sprtk-ches
Copy link
Contributor Author

Here is an example of how it looks

hidden-tab-1.mp4

@danharrin danharrin added this to the v3 milestone Jan 26, 2024
@danharrin danharrin added bug in dependency help wanted and removed bug Something isn't working labels Jan 26, 2024
@nils-kt
Copy link

nils-kt commented Jan 26, 2024

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

@williamengbjerg
Copy link

williamengbjerg commented Jan 27, 2024

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
Copy link

nils-kt commented Jan 27, 2024

@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
Copy link

@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
Copy link
Contributor

Hi @nils-kt @williamengbjerg

This has now been fixed

joshembling/image-optimizer#9 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Todo
Development

No branches or pull requests

5 participants