afterStateUpdated not firing when removing from multiple FileUpload

I have a FileUpload field in a custom Livewire component:

FileUpload::make('images')
                    ->disk('public')
                    ->directory('temporary')
                    ->preserveFilenames()
                    ->label('')
                    ->multiple()
                    ->maxFiles(10)
                    ->image()
                    ->panelLayout('grid')
                    ->afterStateUpdated(function ($state) {
                        Log::info('images updated');
                    }),

FileUpload::make('images')
                    ->disk('public')
                    ->directory('temporary')
                    ->preserveFilenames()
                    ->label('')
                    ->multiple()
                    ->maxFiles(10)
                    ->image()
                    ->panelLayout('grid')
                    ->afterStateUpdated(function ($state) {
                        Log::info('images updated');
                    }),

When i select 5 images, "images updated" is logged 5 times", but when i remove an image, it doesn't add another. Eventhough the state has been updated. I went from 5 images to 4.

1 Reply

Remi Hindriks•2w ago

i worked around it using

document.addEventListener('FilePond:removefile', (e) => {
        $wire.updateImagePreviews();
    });

document.addEventListener('FilePond:removefile', (e) => {
        $wire.updateImagePreviews();
    });

but shouldnt this work out of the box?

Gaming

Programming

afterStateUpdated not firing when removing from multiple FileUpload