F
Filament•2mo ago
Banzai

How to use SpatieMediaLibraryFileUpload in the Builder

What I am trying to do Using the builder my client can add blocks like "Banner/TextImage/AboutUs and so on. For the images i want to use SpatieMediaLibrary (for the responsive images option). The problem When i add 1 banner, upload an image this works (the media uploads and binds to the model Page). When i add a second banner these images are both bound to the model page (changing 1 image, changes both images). I want them to be unique to their own block in the builder (json). What i did In the documentation of the spatie plugin from filament: https://filamentphp.com/plugins/filament-spatie-media-library#filtering-media-2 I've got the following working 
class Navigation
{
    public static function make(): Block
    {
        return Block::make('banners_navigation')
            ->label('[Banner] - Navigation')
            ->icon('heroicon-m-photo')
            ->schema([
                SpatieMediaLibraryFileUpload::make('image')
                    ->collection('image')
                    ->customProperties(fn (Get $get): array => [
                        'gallery_id' => 12345,
                    ])
                    ->filterMediaUsing(
                        fn (Collection $media): Collection => $media->where(
                            'custom_properties.gallery_id',
                            12345,
                        ),
                    ),
            ]);
    }
}
class Navigation
{
    public static function make(): Block
    {
        return Block::make('banners_navigation')
            ->label('[Banner] - Navigation')
            ->icon('heroicon-m-photo')
            ->schema([
                SpatieMediaLibraryFileUpload::make('image')
                    ->collection('image')
                    ->customProperties(fn (Get $get): array => [
                        'gallery_id' => 12345,
                    ])
                    ->filterMediaUsing(
                        fn (Collection $media): Collection => $media->where(
                            'custom_properties.gallery_id',
                            12345,
                        ),
                    ),
            ]);
    }
}
Giving the image a custom property adds 
Database
Table: pages
Column: custom_properties

{
  "gallery_id": 12345
}
Database
Table: pages
Column: custom_properties

{
  "gallery_id": 12345
}
Now i am stuck how to continue or is there a better/smarter solution?
Filament
Spatie Media Library by Filament - Filament
Filament support for Spatie's Laravel Media Library package.
2 Replies
Banzai
BanzaiOP•2mo ago
Creating a uuid and putting that in the "block" of the builder makes it possible to retrieve the image based on that uuid. But there must be a cleaner way/solution? 
public static function make(): Block
    {
        $blockId = (string) \Illuminate\Support\Str::uuid();

        return Block::make('banners_navigation')
            ->schema([
                Hidden::make('block_id')->default($blockId),

                SpatieMediaLibraryFileUpload::make('image')
                    ->customProperties(fn (Get $get): array => [
                        'block_id' => $get('block_id') ?? $blockId,
                    ])
                    ->filterMediaUsing(
                        fn (Collection $media, Get $get): Collection => $media->where(
                            'custom_properties.block_id',
                            $get('block_id') ?? $blockId
                        ),
                    )
            ]);
public static function make(): Block
    {
        $blockId = (string) \Illuminate\Support\Str::uuid();

        return Block::make('banners_navigation')
            ->schema([
                Hidden::make('block_id')->default($blockId),

                SpatieMediaLibraryFileUpload::make('image')
                    ->customProperties(fn (Get $get): array => [
                        'block_id' => $get('block_id') ?? $blockId,
                    ])
                    ->filterMediaUsing(
                        fn (Collection $media, Get $get): Collection => $media->where(
                            'custom_properties.block_id',
                            $get('block_id') ?? $blockId
                        ),
                    )
            ]);
no one? or did i ask my question wrong?
Azad Furkan ŞAKAR
Azad Furkan ŞAKAR•2mo ago
You can't use this simple way. You need to make custom solutio like this https://www.answeroverflow.com/m/1158821463168659496
How to use Spatie Media Library in a json repeater field. - Filament
I have a requirement, where I need to use Spatie Media file upload and store the model_id in json column. Here is the required structure: 
{
    "items": [
        {"key": "Key 1", "value": "value 1", "model_id": 1}, 
        {"key": "Key 2", "value": "value 2", "model_id": 2}, 
    ]
}
{
    "items": [
        {"key": "Key 1", "value": "value 1", "model_id": 1}, 
        {"key": "Key 2", "value": "value 2", "model_id": 2}, 
    ]
}
Here is what i am trying, It can read files fr...

Did you find this page helpful?