Filament•3w 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!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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