Filament•6mo ago

How can I use Spatie Media Library with fields for custom properties?

Hello there! This is my first time posting here, I'm still a Filament beginner. I'm using Spatie Media Library in my backend. For most of the cases, using the plugin has been straightforward, however there is a specific use-case that I don't know how to do: I'm using the Spatie Media Library for videos as well. The media is the video cover image and I'm storing the Youtube url and title as custom properties. In terms of UI, It seems to me that the easiest way to lay this out is using a Repeater, so this is what I have at the moment:

Repeater::make('portfolio-films')
    ->schema([
        SpatieMediaLibraryFileUpload::make('path')
            ->required()
            ->image()
            ->collection('portfolio'),
        TextInput::make('video_url')
            ->required()
            ->url(),
        TextInput::make('video_title')
            ->required(),
    ])

Repeater::make('portfolio-films')
    ->schema([
        SpatieMediaLibraryFileUpload::make('path')
            ->required()
            ->image()
            ->collection('portfolio'),
        TextInput::make('video_url')
            ->required()
            ->url(),
        TextInput::make('video_title')
            ->required(),
    ])

The UI/UX is looking great, however, it doesn't work as expected; Only the first media of the collection is shown, and it doesn't associate the custom properties. I tried using the regular FileUpload component instead of SpatieMediaLibraryFileUpload, however this means having to manually update/sync the files and state in the form:

public function update(): void
{
    $portfolioFilms = $this->form->getStateOnly(['portfolio-films']);

    if ($portfolioFilms['portfolio-films']) {
        // Case 1 - Remove deleted files
        // Case 2 - Update custom properties for existing media
        // Case 3 - Upload files for existing media
        // Case 4 - Create new media
    }

    // ...
}

public function update(): void
{
    $portfolioFilms = $this->form->getStateOnly(['portfolio-films']);

    if ($portfolioFilms['portfolio-films']) {
        // Case 1 - Remove deleted files
        // Case 2 - Update custom properties for existing media
        // Case 3 - Upload files for existing media
        // Case 4 - Create new media
    }

    // ...
}

This works in terms of data, however once the update action is done, the image preview goes missing. I tried looking for a way to refresh the form state again, but no luck yet. I feel like this is not an uncommon situation, since in the Spatie Media Library documentation page, custom properties is mentioned as a feature to be used. Does anyone know how to address this problem? Thank you!

1 Reply

sven•4mo ago

I would also be interested to know how this could work. In the docs it gives this example:

->customProperties(fn (Get $get): array => [
        'gallery_id' => $get('gallery_id'),
    ])

I guess you could use the Repeater, and set the additional fields on Live. Then re-fill the Video Url and title field again on mount from the saved custom properties. But I'd be curious if there's a more elegant way to do it @HFoletto Did you figure this out?

Gaming

Programming

How can I use Spatie Media Library with fields for custom properties?