PHPackages                             haosheng0211/filament-media-browser - 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. haosheng0211/filament-media-browser

ActiveLibrary[File & Storage](/categories/file-storage)

haosheng0211/filament-media-browser
===================================

A standalone Filament v3 media browser powered by Laravel Storage — no database required.

v1.3.0(1mo ago)013↑361.5%MITBladePHP ^8.2

Since Mar 15Pushed 1mo agoCompare

[ Source](https://github.com/haosheng0211/filament-media-browser)[ Packagist](https://packagist.org/packages/haosheng0211/filament-media-browser)[ Docs](https://github.com/haosheng0211/filament-media-browser)[ RSS](/packages/haosheng0211-filament-media-browser/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (10)Versions (7)Used By (0)

Filament Media Browser
======================

[](#filament-media-browser)

[![Latest Version on Packagist](https://camo.githubusercontent.com/b9193dbdcd728c03d3c7c245835e5feb00dab4a4641cf9f345b332342de25b66/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f68616f7368656e67303231312f66696c616d656e742d6d656469612d62726f777365722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/haosheng0211/filament-media-browser)[![Total Downloads](https://camo.githubusercontent.com/7e158a8b793f58296143701ab8b096349db4d3b61ad3040ada0ab527211cf7c4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f68616f7368656e67303231312f66696c616d656e742d6d656469612d62726f777365722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/haosheng0211/filament-media-browser)

A standalone Filament v3 media browser powered by Laravel Storage — no database required. Browse, upload, and manage files directly from the filesystem with folder navigation support.

Features
--------

[](#features)

- Browse files and folders on any Laravel Storage disk
- Upload, delete files and create/delete folders
- Breadcrumb navigation with subfolder support
- Filter by media type (image, video/audio, or all files)
- Search files by name
- Filename sanitization and collision handling
- Path traversal protection
- Authentication guard on all operations
- Dark mode support
- Works with any Filament v3 panel or Livewire component

Installation
------------

[](#installation)

```
composer require haosheng0211/filament-media-browser
```

Publish the config file:

```
php artisan vendor:publish --tag="filament-media-browser-config"
```

Add the package views to your `tailwind.config.js` content array:

```
// tailwind.config.js
content: [
    // ...existing paths
    './vendor/haosheng0211/filament-media-browser/resources/views/**/*.blade.php',
]
```

Then rebuild your assets:

```
npm run build
```

Make sure the storage disk is linked (for the `public` disk):

```
php artisan storage:link
```

Configuration
-------------

[](#configuration)

```
// config/filament-media-browser.php

return [
    // Laravel filesystem disk
    'disk' => 'public',

    // Root directory for browsing
    'directory' => 'media',

    // Allowed upload MIME types
    'accepted_file_types' => ['image/*', 'video/*', 'audio/*'],

    // Max upload size in KB
    'max_file_size' => 10240,

    // Output format: true = Storage::url(), false = relative path
    'store_as_url' => true,
];
```

Usage
-----

[](#usage)

### MediaPicker Field

[](#mediapicker-field)

A dedicated form field with square card previews, replace and remove buttons. Both single and multiple modes use the same grid layout with 1:1 aspect ratio cards. Stores the selected file's URL as a string (single) or array of strings (multiple) by default.

```
use MrJin\FilamentMediaBrowser\Forms\Components\MediaPicker;

// Basic usage — single image picker with preview
MediaPicker::make('featured_image');

// Multiple images (gallery)
MediaPicker::make('gallery')
    ->multiple()
    ->maxItems(10)
    ->reorderable(); // drag-to-reorder, enabled by default

// File picker (no image preview, shows path instead)
MediaPicker::make('attachment')
    ->mediaType('file');

// Custom disk and directory
MediaPicker::make('hero_image')
    ->mediaDisk('s3')
    ->mediaDirectory('uploads/heroes');

// Store relative path instead of URL
MediaPicker::make('document')
    ->storePath();

// Custom grid columns (default: 5, fewer = larger cards)
MediaPicker::make('hero')
    ->gridColumns(3);
```

**Stored value:**

- Single mode: string (e.g. `/storage/media/photo.jpg`) — use a `string` column
- Multiple mode: array of strings — use a `json` column with `->cast('array')` on the model
- Default output is `Storage::url()` (full URL). Use `->storePath()` to store the relative path (e.g. `media/photo.jpg`) instead.

#### Available Methods

[](#available-methods)

MethodDescription`->multiple(bool)`Enable multi-select mode`->maxItems(int)`Maximum number of files (multiple mode)`->reorderable(bool)`Enable drag-to-reorder (multiple mode, default: true)`->mediaType(string)``'image'` (default), `'media'`, or `'file'``->mediaDisk(string)`Override config disk`->mediaDirectory(string)`Override config directory`->storeAsUrl(bool)`Store as `Storage::url()` output (default: true)`->storePath(bool)`Store as relative path (e.g. `media/photo.jpg`)`->gridColumns(int)`Number of columns in the preview grid (default: 5)### With Filament Forms TinyMCE

[](#with-filament-forms-tinymce)

This package works seamlessly with [filament-forms-tinymce](https://github.com/haosheng0211/filament-forms-tinymce). Once both packages are installed, TinyMCE's file picker will automatically use the media browser.

```
use MrJin\FilamentFormsTinymce\TinyMceEditor;

TinyMceEditor::make('content');

// With custom disk/directory per field
TinyMceEditor::make('content')
    ->mediaDisk('s3')
    ->mediaDirectory('uploads/posts');

// Disable the file browser
TinyMceEditor::make('content')
    ->fileBrowser(false);
```

### Standalone Usage via Events

[](#standalone-usage-via-events)

The media browser communicates via Livewire events, so you can integrate it with any component.

**Open the browser** by dispatching the `open-media-browser` event:

```
// From Livewire — single file
$this->dispatch('open-media-browser', statePath: 'data.image', mediaType: 'image');

// Multiple files with custom disk/directory
$this->dispatch('open-media-browser',
    statePath: 'data.files',
    mediaType: 'file',
    multiple: true,
    disk: 's3',
    directory: 'uploads',
);

// Store relative path instead of URL
$this->dispatch('open-media-browser',
    statePath: 'data.document',
    mediaType: 'file',
    storeAsUrl: false,
);
```

```

    Browse Media

```

**Listen for file selection** via the `media-selected` event:

```
// Livewire
#[On('media-selected')]
public function onMediaSelected(
    string $statePath,
    string $url,
    string $alt,
    string $title,
    string $filename,
    string $extension,
    int $size,
    string $mime,
): void {
    // Use the selected media URL and metadata
}
```

```

```

### Event Reference

[](#event-reference)

EventDirectionParameters`open-media-browser`You → Browser`statePath`, `mediaType` (`image` | `media` | `file`), `multiple?`, `disk?`, `directory?`, `storeAsUrl?``media-selected`Browser → You`statePath`, `url`, `alt`, `title`, `filename`, `extension`, `size`, `mime`### Media Types

[](#media-types)

ValueFilters`image``image/*` only`media``video/*` and `audio/*``file`All files (no filter)Customizing Views
-----------------

[](#customizing-views)

```
php artisan vendor:publish --tag="filament-media-browser-views"
```

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

40

—

FairBetter than 88% of packages

Maintenance90

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

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

6

Last Release

52d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7844510af454731ef9d8d0c8dfe93a227fef3011b409e8a8cd3fb6b903dc81c7?d=identicon)[haosheng](/maintainers/haosheng)

---

Tags

laravelfilamentfile-browsermedia-browser

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/haosheng0211-filament-media-browser/health.svg)

```
[![Health](https://phpackages.com/badges/haosheng0211-filament-media-browser/health.svg)](https://phpackages.com/packages/haosheng0211-filament-media-browser)
```

###  Alternatives

[bezhansalleh/filament-shield

Filament support for `spatie/laravel-permission`.

2.8k2.9M88](/packages/bezhansalleh-filament-shield)[spatie/livewire-filepond

Upload files using Filepond in Livewire components

306452.7k3](/packages/spatie-livewire-filepond)[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[mwguerra/filemanager

A full-featured file manager package for Laravel and Filament v5 with dual operating modes, drag-and-drop uploads, S3/MinIO support, and comprehensive security features.

718.5k1](/packages/mwguerra-filemanager)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

254255.2k6](/packages/croustibat-filament-jobs-monitor)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)