CuratorPicker with Multiple images have weird behavior

[JobiJoba]

Filament Version

v3.1.35

Plugin Version

v3.4.4

PHP Version

PHP 8.2.0

Problem description

I've the following field on my panel form:

CuratorPicker::make('image')
      ->label('Images')
      ->acceptedFileTypes(['image/*'])
      ->multiple()
      ->preserveFilenames()
      ->listDisplay(true)
      ->directory('words')
      ->required(),

In my migration, image field is as following

$table->string('image');

and in my model, I cast it as an 'array'

protected $casts = [
        'image' => 'array',
    ];

When I want to edit the images (adding an image for example). Many issues arose

• Impossible to add new image
• Duplication of selected image

A video is worth a thousand word :) https://github.com/awcodes/filament-curator/assets/6494791/42bc3019-e35c-424b-baa4-43e628328d6c

Expected behavior

Being able to add new images, no duplication

Steps to reproduce

CuratorPicker::make('image')
                ->label('Images')
                ->acceptedFileTypes(['image/*'])
                ->multiple()
                ->preserveFilenames()
                ->listDisplay(true)
                ->directory('words')
                ->required(),

Reproduction repository

No response

Relevant log output

No response

[awcodes]

Can you provide a reproduction repo?

I'm unable to reproduce what you are showing in the video.

[JobiJoba]

Hi,

I followed the "get started" from filament (to install the whole panel plugin), then install the plugin fresh and followed the installation guide.

https://github.com/JobiJoba/curator-issue-409

I can't make the css works for the modal of the Picker field - I don't know what I'm doing wrong here -_- but still the same issue seems to appear as in the video.

Thanks for having a look

[awcodes]

You forgot to add the Filament theme css to your vite.config.js and you didn't add the theme to your Panel Provider with ->viteTheme().

From the docs. This would have been output in the terminal too after running filament:theme. :)

⇂ First, add a new item to the input array of vite.config.js: resources/css/filament/admin/theme.css ⇂ Next, register the theme in the admin panel provider using ->viteTheme('resources/css/filament/admin/theme.css') ⇂ Finally, run npm run build to compile the theme

[JobiJoba]

Argh I missed that step from the doc, thank you.

I've updated the example repo, and make a new video.

https://github.com/awcodes/filament-curator/assets/6494791/e1189fde-c189-42e3-84ed-9f945c31c163

As you can see, once I've inserted image, and want to add new media, i've double times the same images, and cannot add anything else.

Isn't it because my field is a string and cast as an array? - This method works well with the original fileuploader and I supposed It would work also with curator but maybe I need to do like your doc say with a Pivot Table?

Thanks

[awcodes]

Check what you are trying to do against https://github.com/awcodes/curator-demo. It has belongsTo, pivot table relationships and non relationship fields. All of which are working as expected.

[JobiJoba]

Hi,

I've installed curator-demo and try to reproduce the issue and it's there, here is a video of it (I didn't change anything in the code).

https://github.com/awcodes/filament-curator/assets/6494791/5bc7f1d2-8836-43fd-99cc-9568132d3503

As you can see, once I upload photos, I can't add new one, I can only remove existing file.

I didn't show on the video but if I don't change anything and just click "insert" the preview is duplicated (like here)

The image without the preview is just because I don't have the correct url set up.

[JobiJoba]

I've made a video about the "duplicate" - so if you click on an already added image, it shows it in the preview but doesn't save in the database:

https://github.com/awcodes/filament-curator/assets/6494791/0ad32834-85e6-4fb9-9f81-8db7470d52aa

hope it helps

[awcodes]

Make sure you are casting the field as an array if you are allowing multiple images.

[JobiJoba]

I'm using your curator-demo and you did cast the product_images as an array

protected $casts = [
    'product_images' => 'array',
    'products' => 'array',
];

[awcodes]

I can see the not being able to upload new media as an issue.

But I just can't replicate the duplication issue you are seeing.

[JobiJoba]

The duplication is not really a big issue as it's just "cosmetic" - when you save it does not save duplication. For the duplication to happen, you have to click multiple time on an already selected item and then click insert