F
Filament•2mo ago
Excavator

Repeater with Spatie Media Library

Has anyone implemented repeaters, that include Spatie Media Library inputs? I found some posts from 2023 and older with no real solutions - is there a better approach nowadays? I've managed to add a hidden field in customProperties, but I can't figure out how to properly configure filterMediaUsing to show the correct image (without it, it shows the first repeater block one as expected) 
Forms\Components\Repeater::make('content')
    ->label('Sections')
    ->schema([
        Forms\Components\TextInput::make('title')->label('Section Title'),
        Forms\Components\RichEditor::make('body')->label('Content'),
        Forms\Components\Hidden::make('image_id')
            ->default(fn() => Str::random(12)),
        SpatieMediaLibraryFileUpload::make('image')
            ->collection('service')
            ->disk('public')
            ->responsiveImages()
            ->image()
            ->maxSize(2048)
            ->customProperties(fn(Forms\Get $get) => ['gallery_id' => $get('gallery_id')])
            ->filterMediaUsing(function (Collection $media, Forms\Get $get) {
                return $media->filter(function (Media $item) use ($get) {
                    return $item->custom_properties['gallery_id'] === $get('gallery_id');
                });
            })
    ])
Forms\Components\Repeater::make('content')
    ->label('Sections')
    ->schema([
        Forms\Components\TextInput::make('title')->label('Section Title'),
        Forms\Components\RichEditor::make('body')->label('Content'),
        Forms\Components\Hidden::make('image_id')
            ->default(fn() => Str::random(12)),
        SpatieMediaLibraryFileUpload::make('image')
            ->collection('service')
            ->disk('public')
            ->responsiveImages()
            ->image()
            ->maxSize(2048)
            ->customProperties(fn(Forms\Get $get) => ['gallery_id' => $get('gallery_id')])
            ->filterMediaUsing(function (Collection $media, Forms\Get $get) {
                return $media->filter(function (Media $item) use ($get) {
                    return $item->custom_properties['gallery_id'] === $get('gallery_id');
                });
            })
    ])
1 Reply
Excavator
ExcavatorOP•2mo ago
I've tried doing this: 
Forms\Components\Repeater::make('content')
    ->label('Sections')
    ->schema([
        Forms\Components\TextInput::make('title')->label('Section Title'),
        Forms\Components\RichEditor::make('body')->label('Content'),
        Forms\Components\Hidden::make('row_uuid')
            ->default(fn() => (string) Str::uuid()),
        SpatieMediaLibraryFileUpload::make('image')
            ->collection('service')
            ->disk('public')
            ->responsiveImages()
            ->image()
            ->maxSize(2048)
            ->customProperties(fn($get) => [
                'row_uuid' => $get('row_uuid'),
            ])
            ->filterMediaUsing(function ($media, $get) {
                return $media->filter(
                    fn($item) => ($item->custom_properties['row_uuid'] ?? null) === $get('row_uuid')
                );
            }),
    ])

    ->collapsible()
    ->default([[
        'title' => '',
        'body' => '',

    ]])
    ->columnSpan('full'),
Forms\Components\Repeater::make('content')
    ->label('Sections')
    ->schema([
        Forms\Components\TextInput::make('title')->label('Section Title'),
        Forms\Components\RichEditor::make('body')->label('Content'),
        Forms\Components\Hidden::make('row_uuid')
            ->default(fn() => (string) Str::uuid()),
        SpatieMediaLibraryFileUpload::make('image')
            ->collection('service')
            ->disk('public')
            ->responsiveImages()
            ->image()
            ->maxSize(2048)
            ->customProperties(fn($get) => [
                'row_uuid' => $get('row_uuid'),
            ])
            ->filterMediaUsing(function ($media, $get) {
                return $media->filter(
                    fn($item) => ($item->custom_properties['row_uuid'] ?? null) === $get('row_uuid')
                );
            }),
    ])

    ->collapsible()
    ->default([[
        'title' => '',
        'body' => '',

    ]])
    ->columnSpan('full'),
which works, until I create a translation in another locale. After that, the DB content just becomes mangled with UUIDs like this: 
{
   "en":{
      "d390f89b-07de-4567-81fa-99b1d642c4a6":{
         "title":"test",
         "body":"<p>test</p>",
         "row_uuid":"c1335839-a0b8-4336-8226-e01413914c74",
         "image":{
            "8e5c96c8-92e4-4f44-9dee-8a2a90c29f51":"8e5c96c8-92e4-4f44-9dee-8a2a90c29f51"
         }
      },
      "60cacbb9-d563-48df-8474-63b7694a17be":{
         "title":"test2",
         "body":"<p>fsdfsdf</p>",
         "row_uuid":"3d95e7b8-9dad-4839-899e-f1a141c9137b",
         "image":{
            "0e85893f-89ae-471d-98ac-3bc88b2b8b27":"0e85893f-89ae-471d-98ac-3bc88b2b8b27"
         }
      },
      "736983d4-21c0-41c0-bcd2-0e82bdb42549":{
         "title":"muca!",
         "body":"<p>fsdfsdf</p>",
         "row_uuid":"25043037-228a-42be-9ea4-c699509d6585",
         "image":{
            "51b2c91a-58c3-4ff2-9c81-a9b6f130617c":"51b2c91a-58c3-4ff2-9c81-a9b6f130617c"
         }
      }
   },
   "sl":[
      {
         "title":"aaaa",
         "body":"<p>bbbbb</p>",
         "row_uuid":"e336c577-760a-460c-a77c-4e18ad35796e"
      },
      {
         "title":"aaaa NEW",
         "body":"<p>sdasdasdsd</p>",
         "row_uuid":"0a3f890e-7cf2-47ab-9525-283d659e904a"
      }
   ]
}
{
   "en":{
      "d390f89b-07de-4567-81fa-99b1d642c4a6":{
         "title":"test",
         "body":"<p>test</p>",
         "row_uuid":"c1335839-a0b8-4336-8226-e01413914c74",
         "image":{
            "8e5c96c8-92e4-4f44-9dee-8a2a90c29f51":"8e5c96c8-92e4-4f44-9dee-8a2a90c29f51"
         }
      },
      "60cacbb9-d563-48df-8474-63b7694a17be":{
         "title":"test2",
         "body":"<p>fsdfsdf</p>",
         "row_uuid":"3d95e7b8-9dad-4839-899e-f1a141c9137b",
         "image":{
            "0e85893f-89ae-471d-98ac-3bc88b2b8b27":"0e85893f-89ae-471d-98ac-3bc88b2b8b27"
         }
      },
      "736983d4-21c0-41c0-bcd2-0e82bdb42549":{
         "title":"muca!",
         "body":"<p>fsdfsdf</p>",
         "row_uuid":"25043037-228a-42be-9ea4-c699509d6585",
         "image":{
            "51b2c91a-58c3-4ff2-9c81-a9b6f130617c":"51b2c91a-58c3-4ff2-9c81-a9b6f130617c"
         }
      }
   },
   "sl":[
      {
         "title":"aaaa",
         "body":"<p>bbbbb</p>",
         "row_uuid":"e336c577-760a-460c-a77c-4e18ad35796e"
      },
      {
         "title":"aaaa NEW",
         "body":"<p>sdasdasdsd</p>",
         "row_uuid":"0a3f890e-7cf2-47ab-9525-283d659e904a"
      }
   ]
}
and my new locale (sl) doesn't include images at all. I'm using latest filament and latest plugin versions.

Did you find this page helpful?