File upload image editor deletes image on edit of existing image

[Nikkitory]

Package

filament/forms

Package Version

v3.2.107

Laravel Version

v11.21.0

Livewire Version

v3.5.6

PHP Version

PHP 8.2.14

Problem description

Using a filament panel file uploader with multiple set: When creating a resource the file uploader and image editor work as expected. But, when I open an existing resource that has an existing image, then click to edit that image, change its cropping, click "save" in the image editor, the image preview dissapears and pressing save on the form resource results in "image is required" error.

Expected behavior

I would expect the editted image to show in the preview area, and to be saved when I click save on the form.

https://github.com/user-attachments/assets/cfe1e170-5a33-44e3-adb9-a1e3f0f75eee

Steps to reproduce

Using a filament panel file uploader with multiple set: Create a resource with an image. Go to list/index page for that resource and click into the now existing resource to go to its edit page, there you will see the preview of the existing image. Click to edit the existing image, change its cropping, click "save" in the image editor, the image preview dissapears and pressing save on the form resource results in "image is required" error.

Reproduction repository (issue will be closed if this is not valid)

see video

Relevant log output

No errors in console. There is a 200 post to livewire/update in the network tab.

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!

[github-actions[bot]]

Hey @Nikkitory! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

[Nikkitory]

if it helps, my code is...

                FileUpload::make('images')
                    ->label('Image')
                    ->directory(function (Get $get) {
                        return 'events/' . $get('s3');
                    })
                    ->multiple()
                    ->helperText('After uploading, use the editor to crop the image into an oblong')
                    ->imageEditor()
                    ->imageEditorAspectRatios([
                        '1.68:1',
                    ])
                    ->imageResizeMode('force')
                    ->imageResizeTargetWidth('1718')
                    ->imageResizeTargetHeight('1024')
                    ->maxFiles(1)
                    ->downloadable()
                    ->maxSize(1024 * 10) // 10 MB
                    ->required()
                    ->image()
                    ->optimize('jpg'),

[Nikkitory]

I've narrowed the issue down to the ->maxFiles(x) code. It appears that temporarily after saving an edit to an existing image, both the newly editted image AND the existing image are included in the maxFiles count validator. This means, if you have ->maxFiles(2) set, and open an existing resource that already has two images, when you edit one image and click save on the edit panel, the editted image (old & new versions of it) dissapears entirely in the GUI , presumably because the maxFiles count has been exceeded (went up to three files temporarily). Note I use the word "existing", because it is not an issue when you have freshly uploaded an image and edit it, it is only an issue if you save the resource, close the page, and then re open the resource from the index table and try to edit an image. My temporary workaround is removing the maxFiles code ad manually do a file count validation on form submit.