File upload doesn't work property if it's after a hidden step (form wizard)
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
- Create a form with a wizard and 3 steps
- Add a file upload component in step 3
- Make step 2 conditionally hidden
- Toggle the 2nd step's visibility status
- Open the browser console, go to step 3 and try to upload a file
- 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
filamentphp / filament
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
19.2k
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too