DOCSEARCHbyAlgolia
Submit Docs

Filament Spatie Media Library Plugin

repository·5.x·Indexed 41 days ago

https://github.com/filamentphp/spatie-laravel-media-library-plugin

A Filament plugin that integrates Spatie's Laravel Media Library into Filament forms, tables, and infolists. It provides specialized components like SpatieMediaLibraryFileUpload, SpatieMediaLibraryImageColumn, and SpatieMediaLibraryImageEntry to manage media collections, conversions, responsive images, and file manipulations. It also includes a SpatieMediaLibraryFileAttachmentProvider for integrating media management within the Filament RichEditor.

Tokens
6.5K
Snippets
36
Records
36
Agent score
52%

What's inside Filament Spatie Media Library

  1. Integrate Media Library with Rich Editor file attachments

    5.x

    To use Spatie Media Library for file attachments in a Filament RichEditor, you must implement HasRichContent on your model and register a rich content attribute. Use SpatieMediaLibraryFileAttachmentProvider::make() within the fileAttachmentProvider() method during registration.

    Key Provider Options:

    • collection('name'): Specify a custom collection name (defaults to the attribute name).
    • preserveFilenames(): Preserves the original filenames of uploaded files.
    • mediaName(fn...): Customizes the media name using a closure.
    • customProperties(array): Adds custom properties to the uploaded media.
    use Filament\Forms\Components\RichEditor\FileAttachmentProviders\SpatieMediaLibraryFileAttachmentProvider;
use Filament\Forms\Components\RichEditor\Models\Concerns\InteractsWithRichContent;
use Filament\Forms\Components\RichEditor\Models\Contracts\HasRichContent;
use Illuminate\Database\Eloquent\Model;

class Post extends Model implements HasRichContent
{
    use InteractsWithRichContent;

    public function setUpRichContent(): void
    {
        $this->registerRichContent('content')
            ->fileAttachmentProvider(SpatieMediaLibraryFileAttachmentProvider::make());
    }
}

  2. Install the Filament Spatie Media Library Plugin

    5.x

    To install the plugin, use Composer to require the package. You must also publish and run the migrations for the Spatie Media Library to create the necessary database tables. Finally, ensure your Eloquent model is prepared for media attachment according to Spatie's documentation.

    composer require filament/spatie-laravel-media-library-plugin:"^5.0" -W

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"

php artisan migrate

  3. Use SpatieMediaLibraryFileUpload for media management

    5.x

    The SpatieMediaLibraryFileUpload component is a specialized FileUpload component designed to integrate directly with Spatie Laravel Media Library. It allows you to upload, manage, and reorder files within specific media collections on your Eloquent models. It handles the heavy lifting of interacting with the HasMedia interface, including storing files in collections, managing conversions, and handling responsive images.

    use Filament\Forms\Components\SpatieMediaLibraryFileUpload; 

SpatieMediaLibraryFileUpload::make('media')
    ->collection('images')

  4. Configure Spatie Media Library as a File Attachment Provider for RichEditor

    5.x

    You can use the SpatieMediaLibraryFileAttachmentProvider to allow the Filament RichEditor component to upload and manage files directly within the Spatie Media Library. This enables users to attach images or files to rich text content, which are then stored in a specific media collection on your model.

    To use it, call SpatieMediaLibraryFileAttachmentProvider::make() within the fileAttachments() method of your RichEditor component.

    use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\FileAttachmentProviders\SpatieMediaLibraryFileAttachmentProvider;

RichEditor::make('content')
    ->fileAttachments(
        SpatieMediaLibraryFileAttachmentProvider::make()
            ->collection('attachments')
    )

  7. Filter media in a collection

    5.x

    The filterMediaUsing() method allows you to restrict the component to only interact with a specific subset of media within a collection. The closure receives the media Collection and can be used with any Laravel collection method to filter the items.

    use Filament\Forms\Components\SpatieMediaLibraryFileUpload;
use Filament\Forms\Get;
use Illuminate\Support\Collection;

SpatieMediaLibraryFileUpload::make('images')
    ->customProperties(fn (Get $get): array => [
        'gallery_id' => $get('gallery_id'),
    ])
    ->filterMediaUsing(
        fn (Collection $media, Get $get): Collection => $media->where(
            'custom_properties.gallery_id',
            $get('gallery_id')
        ),
    );

  8. Use media conversions in forms

    5.x

    You can specify which Spatie media conversion should be used to display the file within the form component using the conversion() method. You can also specify a different disk for these conversions using conversionsDisk().

    use Filament\Forms\Components\SpatieMediaLibraryFileUpload;

// Use a specific conversion
SpatieMediaLibraryFileUpload::make('attachments')
    ->conversion('thumb');

// Use a specific conversion on a different disk
SpatieMediaLibraryFileUpload::make('attachments')
    ->conversionsDisk('s3');

  9. Configure collections for SpatieMediaLibraryImageColumn

    5.x

    By default, SpatieMediaLibraryImageColumn only shows media from the default collection. You can specify a specific collection or show all collections using these methods:

    • collection('name'): Targets a specific media collection.
    • allCollections(): Displays media from all available collections.
    use Filament\Tables\Columns\SpatieMediaLibraryImageColumn;

// Show a specific collection
SpatieMediaLibraryImageColumn::make('avatar')
    ->collection('avatars')

// Show all collections
SpatieMediaLibraryImageColumn::make('avatar')
    ->allCollections()

  11. Use SpatieMediaLibraryImageEntry in infolists

    5.x

    To display media from Spatie Media Library in a Filament Infolist, use the SpatieMediaLibraryImageEntry. It supports all standard customization options available to the default Filament image entry.

    use Filament\Infolists\Components\SpatieMediaLibraryImageEntry;

SpatieMediaLibraryImageEntry::make('avatar')

  12. Filter media in SpatieMediaLibraryImageColumn

    5.x

    Use filterMediaUsing() to narrow down which media files are displayed in the column. This method accepts a closure that receives an Illuminate\Support\Collection of media objects. You can use any standard Laravel collection method to filter the results, such as filtering by custom_properties.

    use Filament\Tables\Columns\SpatieMediaLibraryImageColumn;
use Illuminate\Support\Collection;

SpatieMediaLibraryImageColumn::make('images')
    ->filterMediaUsing(
        fn (Collection $media): Collection => $media->where(
            'custom_properties.gallery_id',
            12345,
        ),
    )