PHPackages tsrgtm/filament-media-library - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [File & Storage](/categories/file-storage) 4. / 5. tsrgtm/filament-media-library ActiveLibrary[File & Storage](/categories/file-storage) tsrgtm/filament-media-library ============================= A production-ready, highly extensible Filament-native media library plugin for Laravel. 1.0.0(1mo ago)115↓88.9%MITPHPPHP ^8.2 Since Jun 1Pushed 1mo ago1 watchersCompare [ Source](https://github.com/Tsrgtm/Filament-Media-Library)[ Packagist](https://packagist.org/packages/tsrgtm/filament-media-library)[ RSS](/packages/tsrgtm-filament-media-library/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (19)Versions (12)Used By (0) Filament Media Library ====================== [](#filament-media-library) [![Filament Media Library Banner](docs/banner.png)](docs/banner.png) [![Latest Version on Packagist](https://camo.githubusercontent.com/7e603dd1f89751f3978410c5fab93f0c50b4a4279370401c43418e8c92b25d75/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f74737267746d2f66696c616d656e742d6d656469612d6c6962726172792e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/tsrgtm/filament-media-library)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE)[![Build Status](https://camo.githubusercontent.com/937e105fc83966d970d459cb02a1c3da1ba44f5e9522992176e869fce65b8a52/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f74657374732d70617373696e672d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](#testing) A premium, production-ready Filament-native media library plugin for Laravel. It provides polymorphic media attachments, background optimizations, responsive HTML layout generators, secure URL streaming, deduplication, in-page split-view visual media editing, and a WordPress-style media picker modal. 📖 **Interactive Documentation Portal:** --- Features -------- [](#features) - **Polymorphic Attachments:** Attach single or multiple files to any Eloquent model using a simple `HasMedia` trait. - **Intervention Image v3 Optimizations:** Automatically compresses, scales, and creates auto-negotiated WebP fallbacks for uploaded images. - **Video Upload & Processing:** Upload videos up to 500MB. Auto-generate thumbnail frames via `php-ffmpeg`. Trim video clips by start/end time directly in the UI. - **Persistent Split-View Visual Editor:** - 🖼️ **Visual Image Cropper** – crop visually using Cropper.js inside the right-hand panel. - 🎞️ **Video Trim Slider** – trim video clips visually using a range slider timeline. - ⚡ **SVG Live Code Editor** – edit raw SVG code and see the visual render update live. - 📝 **DOCX Find & Replace** – mock page view and search-and-replace text inside Word documents. - 📄 **PDF Metadata Editor & Viewer** – inline PDF iframe preview along with form to edit PDF attributes. - 🗒️ **Code Text Editor** – edit plain-text files (`.txt`, `.csv`, `.json`, `.md`, `.css`, `.js`, etc.) in a monospaced code container. - **File Replacement:** Replace the physical file of any media item without breaking its URL. - **High-Fidelity Lightbox Previews:** Fullscreen viewer with navigation arrows, keyboard control (←/→/Esc), and auto-detection of media type: - 📸 Image zoom/scroll - 📽️ HTML5 Video player with controls - 🎵 Audio player - 📄 PDF inline iframe viewer - 📁 Download fallback for other documents - **Right-Click Context Menu:** Access all actions instantly by right-clicking any media card. - **WordPress-style Media Details:** Visual slide-over details panel to preview files and edit alt text and titles inline. - **WordPress-style Media Picker:** Select, search, filter, and reuse existing uploaded files in form views instead of creating duplicate uploads. - **On-Demand Format Conversion:** Dynamically convert file formats (JPEG, PNG, WebP), compression quality (10–100), and max dimensions directly from the Filament resource table. - **SEO-Stable Paths:** Serves assets via static, predictable URLs (`/media-serve/{media_id}/{filename}`) preventing broken images. - **Secure File Support:** Automatically generates signed URLs valid for 1 hour for secure private disks. - **Smart Deduplication:** Performs SHA-256 integrity checks on uploads to link identical files to the same physical disk location, saving storage space. - **Background Processing:** Process image resizing and optimization asynchronously via Laravel Queues. - **Dark Mode & Custom CSS:** Full dark mode support using CSS variables. All classes are prefixed `fml-` and documented for customization. - **Dismissible First-Time Guide:** An onboarding guide card surfaces on first visit and can be permanently dismissed per browser with localStorage. --- Requirements ------------ [](#requirements) - PHP ≥ 8.1 - Laravel ≥ 10.x - Filament v3 / v4 / v5 - `intervention/image` v3 (GD driver) - `ffmpeg` binary on `$PATH` for video thumbnail generation (optional but recommended) --- Installation ------------ [](#installation) 1. Install the package via Composer: ``` composer require tsrgtm/filament-media-library ``` 2. Publish configuration and database migrations: ``` php artisan vendor:publish --provider="Tsrgtm\FilamentMediaLibrary\MediaLibraryServiceProvider" ``` 3. Run migrations: ``` php artisan migrate ``` 4. Register the plugin in your Filament Panel Provider (e.g., `app/Providers/Filament/AdminPanelProvider.php`): ``` use Tsrgtm\FilamentMediaLibrary\Filament\MediaLibraryPlugin; public function panel(Panel $panel): Panel { return $panel // ... ->plugins([ MediaLibraryPlugin::make(), ]); } ``` ### Video Support (FFMpeg) [](#video-support-ffmpeg) For thumbnail generation and video trimming install `php-ffmpeg` and set the binary paths in `config/media-library.php`: ``` composer require php-ffmpeg/php-ffmpeg ``` ``` // config/media-library.php 'ffmpeg' => [ 'ffmpeg_binary' => env('FFMPEG_BINARY', '/usr/bin/ffmpeg'), 'ffprobe_binary' => env('FFPROBE_BINARY', '/usr/bin/ffprobe'), 'timeout' => 3600, ], ``` ### Plugin Customization Options [](#plugin-customization-options) ``` MediaLibraryPlugin::make() // Media Library Resource customization: ->icon('heroicon-o-photo') // Alias for navigationIcon() ->label('Library') // Alias for navigationLabel() ->navigationGroup('Content') ->navigationSort(1) ->slug('media-library') // Settings Customization: ->showSettings(true) // Set to false to hide the settings header action modal ``` --- Setup Models ------------ [](#setup-models) Add the `HasMedia` trait to your Eloquent models and define your attachments collections inside the `mediaCollections` method: ``` namespace App\Models; use Illuminate\Database\Eloquent\Model; use Tsrgtm\FilamentMediaLibrary\Traits\HasMedia; class Post extends Model { use HasMedia; public function mediaCollections(): array { return [ 'featured_image' => [ 'single' => true, // Replaces previous attachment automatically 'conversions' => ['thumb', 'medium'], 'fallback' => '/images/default-thumbnail.png', ], 'gallery' => [ 'multiple' => true, ], ]; } } ``` ### Fluent Upload API [](#fluent-upload-api) ``` // From a request upload $post->addMedia($request->file('cover')) ->withAltText('Featured blog banner') ->toCollection('featured_image'); // From local path $post->addMedia(storage_path('exports/invoice.pdf')) ->preservingOriginal() ->toCollection('attachments'); ``` --- Filament Form Inputs -------------------- [](#filament-form-inputs) ### 1. File Upload Component (`MediaLibraryUpload`) [](#1-file-upload-component-medialibraryupload) ``` use Tsrgtm\FilamentMediaLibrary\Filament\Components\MediaLibraryUpload; public static function form(Form $form): Form { return $form ->schema([ MediaLibraryUpload::make('featured_image') ->label('Cover Photo') ->collection('featured_image') ->image() ->maxSize(2048), // KB ]); } ``` ### 2. Media Picker Component (`MediaLibraryPicker`) [](#2-media-picker-component-medialibrarypicker) ``` use Tsrgtm\FilamentMediaLibrary\Filament\Components\MediaLibraryPicker; public static function form(Form $form): Form { return $form ->schema([ MediaLibraryPicker::make('featured_image') ->label('Featured Image') ->collection('featured_image'), MediaLibraryPicker::make('gallery') ->label('Gallery Images') ->collection('gallery') ->multiple(), // Supports multi-selection ]); } ``` --- Media Library UI – New Features ------------------------------- [](#media-library-ui--new-features) ### Right-Hand Split-View Visual Editor [](#right-hand-split-view-visual-editor) Single-clicking any card opens the persistent right-hand **Visual Preview & Editor Panel** inline. This panel houses dedicated editing features tailored for each file type: - **🖼️ Image Crop** – Visually crop files using an interactive selection box (Cropper.js) directly inside the editor pane. - **↔️ Image Resize / Convert** – Re-scale images to a maximum boundary and convert dynamically to JPEG, PNG, or WebP. - **✂️ Video Trim** – Drag timeline sliders to define start and end trim boundaries for the video. - **⚡ SVG Live Code Editor** – Raw SVG XML text area editor on one tab and a live-updated visual preview container on another. - **📝 DOCX Find & Replace** – Extract and display DOCX text as a mock document page, offering an inline Find & Replace form. - **📄 PDF Viewer & Editor** – Embeds the PDF file in an iframe alongside forms to edit its metadata. - **🗒️ Text File Editor** – Full monospaced editor inside the side panel to edit text documents (`.txt`, `.csv`, `.json`, etc.). - **✏️ Edit Metadata** – Customize the asset's Title and Alt Text directly. - **🗑️ Delete** – Soft-delete items to the trash folder. ### Lightbox Preview [](#lightbox-preview) Click any media card thumbnail to open the fullscreen lightbox: - Navigate with **← →** arrow keys or on-screen buttons - Press **Esc** to close - Automatically renders the appropriate viewer by file type ### Video Upload [](#video-upload) Upload videos up to **500MB** with the standard Upload dialog. Videos with an `mp4`, `webm`, or `ogg` MIME type will: - Show an auto-generated thumbnail (requires FFMpeg) - Preview inline in the lightbox using the native HTML5 `` player - Support trimming via the **Trim Video** action --- Blade Templating & Responsive Images ---------------------------------------- [](#blade-templating--responsive-images) ``` {!! $post->getFirstMedia('featured_image')->img('medium', ['class' => 'rounded-xl border shadow-sm']) !!} ``` Compiles to: ``` ``` --- CSS Customization ----------------- [](#css-customization) The plugin ships a standalone CSS file (`resources/css/media-library.css`) that is auto-registered. All classes use the `fml-` prefix and CSS variables for theming. Dark mode is handled automatically. ClassDescription`.fml-media-box`Root grid layout for the media page`.fml-sidebar`Left navigation sidebar`.fml-card`Individual media item card`.fml-card-preview`Thumbnail/icon preview area within a card`.fml-card-footer`Title and metadata row below the preview`.fml-context-menu`Right-click context menu overlay`.fml-lightbox`Fullscreen media viewer modal`.fml-guide-card`Onboarding guide banner (first-time users)Override CSS variables in your app's stylesheet: ``` :root { --fml-primary: 99, 102, 241; /* custom indigo */ } ``` --- Testing ------- [](#testing) ``` vendor/bin/phpunit ``` --- License ------- [](#license) This package is open-sourced software licensed under the [MIT License](LICENSE). ### Health Score 42 — FairBetter than 88% of packages Maintenance91 Actively maintained with recent releases Popularity8 Limited adoption so far Community7 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 10 Last Release 43d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/131200885?v=4)[Tusar Gautam](/maintainers/tsrgtm)[@Tsrgtm](https://github.com/Tsrgtm) --- Top Contributors [![Tsrgtm](https://avatars.githubusercontent.com/u/131200885?v=4)](https://github.com/Tsrgtm "Tsrgtm (1 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/tsrgtm-filament-media-library/health.svg) ``` [![Health](https://phpackages.com/badges/tsrgtm-filament-media-library/health.svg)](https://phpackages.com/packages/tsrgtm-filament-media-library) ``` ### Alternatives [roots/acorn Framework for Roots WordPress projects built with Laravel components. 9762.4M133](/packages/roots-acorn)[flarum/core Delightfully simple forum software. 211.4M2.4k](/packages/flarum-core)[laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k15.1M136](/packages/laravel-pulse)[laravel/ai The official AI SDK for Laravel. 1.0k3.2M246](/packages/laravel-ai)[mike-bronner/laravel-model-caching Automatic caching for Eloquent models. 2.4k96.5k1](/packages/mike-bronner-laravel-model-caching)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 255.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)