anhnt0212/filament-media-browser

Media browser modal for Filament RichEditor - browse and insert existing images, auto SEO filenames

dev-master 2026-03-23 03:54 UTC

Requires

• php: ^8.1
• filament/filament: ^3.0
• illuminate/support: ^10.0|^11.0|^12.0

MIT

• media
• browser
• seo
• laravel
• filament
• rich-editor

README

A lightweight media browser for Filament RichEditor. Browse and insert existing images without any extra packages.

Features

• Media Browser Modal - Browse existing uploaded images in a grid, click to insert directly into RichEditor
• SEO Filenames - Auto-rename uploaded images based on the post title (e.g. "Đây là hình" → day-la-hinh-a3x9k2.png)
• Multiple Directories - Switch between different storage directories (images, blogs, etc.)
• Pagination - Browse large media libraries with ease
• Dark Mode - Full support for Filament dark mode
• Zero Dependencies - Uses Alpine.js (built into Filament), no extra JS libraries needed

Installation

composer require anhnt0212/filament-media-browser

Publish the config (optional):

php artisan vendor:publish --tag=media-browser-config

Publish views for customization (optional):

php artisan vendor:publish --tag=media-browser-views

Usage

Basic - Add Media Browser to your Resource

use Anhnt0212\FilamentMediaBrowser\Forms\Components\MediaBrowser;

public static function form(Form $form): Form
{
    return $form->schema([
        // ... other fields

        MediaBrowser::make(),

        RichEditor::make('content')
            ->fileAttachmentsDisk('public')
            ->fileAttachmentsDirectory('images'),
    ]);
}

With SEO Filenames

Auto-rename uploaded images based on a form field:

MediaBrowser::make()
    ->slugFrom('title'),  // Uses the 'title' field to generate SEO filenames

When you upload an image and the title is "Dịch vụ tăng like Facebook", the filename becomes: dich-vu-tang-like-facebook-x7k2m9.png

Custom Directory

MediaBrowser::make()
    ->directory('blogs')     // Default directory to browse
    ->slugFrom('title'),

Full RichEditor with SEO Upload

MediaBrowser::make()
    ->slugFrom('title'),

RichEditor::make('content')
    ->fileAttachmentsDisk('public')
    ->fileAttachmentsDirectory('images')
    ->saveUploadedFileAttachmentsUsing(function ($file, $get) {
        $name = $get('title') ?: pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
        $slug = \Illuminate\Support\Str::slug($name ?: 'image');
        $filename = $slug . '-' . \Illuminate\Support\Str::random(6) . '.' . $file->getClientOriginalExtension();

        $path = $file->storeAs('images', $filename, 'public');

        return \Illuminate\Support\Facades\Storage::disk('public')->url($path);
    }),

Configuration

// config/media-browser.php

return [
    'disk' => 'public',                          // Storage disk
    'directories' => ['images', 'blogs'],         // Browsable directories
    'default_directory' => 'images',              // Default selected directory
    'per_page' => 24,                             // Images per page
    'extensions' => ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'],
    'middleware' => ['web', 'auth:admin'],         // Auth middleware
    'route_prefix' => 'admin',                    // Route prefix
];

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Filament 3.x

License

MIT