Filament•12mo ago

Possible bug with Builder field and FileUpload

I've been chasing a bug I thought was in my project and I just want to confirm that I'm not losing my mind 😅 Here's a simplified example:

    Builder::make('test')->blocks([
        Block::make('file')->schema([
            FileUpload::make('file'),
        ])
    ]),

    Builder::make('test')->blocks([
        Block::make('file')->schema([
            FileUpload::make('file'),
        ])
    ]),

1. Start on an empty form 2. Add a block, leave it empty 3. Delete the block 4. See the following error in the Browser console:

module.esm.js:23899 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
...

module.esm.js:23899 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
...

6 Replies

Patrick Boivin•12mo ago

Is this a known issue? It seems to point to this watcher: https://github.com/filamentphp/filament/blob/2.x/packages/forms/resources/js/components/file-upload.js#L183-L192 where this.state ends up being undefined

awcodes•12mo ago

I think this might be the bug in Livewire that we've seen in other places with the FileUpload component. Basically, using $wire callbacks don't get caught by Alpine. The functionality should still be working correctly though.

Patrick Boivin•12mo ago

Thanks for the feedback! Indeed the builder field and any other file upload field are still working and saving correctly.

awcodes•12mo ago

I had a way to suppress it, but we felt it was better to not do that since it wasn't a bug on the Filament side.

Patrick Boivin•12mo ago

I'm probably missing the bigger picture but can a check be added to the state watcher? Something like if (typeof this.state === 'undefined') return; ? I'll experiment a bit, but I'm not yet setup with a dev environment for the filament packages.

Kenneth Sese•12mo ago

Filaments’s select.js code has similar types of check that probably needs to be added.

if ([null, undefined, ''].includes(this.state)) {
      return
 }

if ([null, undefined, ''].includes(this.state)) {
      return
 }

Gaming

Programming

Possible bug with Builder field and FileUpload