Filament media manager

Manage your media files using spatie media library with easy to use GUI for FilamentPHP

Installation

composer require tomatophp/filament-media-manager

after install your package please run this command

php artisan filament-media-manager:install

finally register the plugin on /app/Providers/Filament/AdminPanelProvider.php, if you like to use GUI and Folder Browser.

->plugin(\TomatoPHP\FilamentMediaManager\FilamentMediaManagerPlugin::make())

Features

• Manage your media files using spatie media library
• Create folders and subfolders
• Set password for folders
• Upload Files with Custom Fields using ->schema()
• Auto Create Folders for Model/Collection/Record
• RTL/Mutli Language Support

Screenshots

Usage

you can use the media manager by add this code to your filament component

use TomatoPHP\FilamentMediaManager\Form\MediaManagerInput;

public function form(Form $form)
{
    return $form->schema([
        MediaManagerInput::make('images')
            ->disk('public')
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Forms\Components\TextInput::make('description')
                    ->required()
                    ->maxLength(255),
            ]),
    ]);
}

Add Custom Preview to selected type on the media manager

you can add custom preview to selected type on the media manager by add this code to your provider

use TomatoPHP\FilamentMediaManager\Facade\FilamentMediaManager;
use TomatoPHP\FilamentMediaManager\Services\Contracts\MediaManagerType;


public function boot() {
     FilamentMediaManager::register([
        MediaManagerType::make('.pdf')
            ->icon('bxs-file-pdf')
            ->preview('media-manager.pdf'),
    ]);
}

on your view file you can use it like this

<div class="m-4">
    <canvas id="the-canvas"></canvas>
</div>

<script src="//mozilla.github.io/pdf.js/build/pdf.mjs" type="module"></script>

<style type="text/css">
    #the-canvas {
        border: 1px solid black;
        direction: ltr;
    }
</style>
<script type="module">
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    var url = "{{ $url }}";

    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var { pdfjsLib } = globalThis;

    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.mjs';

    // Asynchronous download of PDF
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {

        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
            var scale = 1;
            var viewport = page.getViewport({scale: scale});

            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
        });
    }, function (reason) {
        // PDF loading error
        console.error(reason);
    });
</script>

you can attach global js or css file to the media manager by add this code to your provider

use TomatoPHP\FilamentMediaManager\Facade\FilamentMediaManager;
use TomatoPHP\FilamentMediaManager\Services\Contracts\MediaManagerType;


public function boot() {
     FilamentMediaManager::register([
        MediaManagerType::make('.pdf')
            ->js('https://mozilla.github.io/pdf.js/build/pdf.mjs'),
            ->css('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf_viewer.min.css'),
            ->icon('bxs-file-pdf')
            ->preview('media-manager.pdf'),
    ]);
}

please note that the name of the component will be the same name of the collection.

Allow Sub Folders

you can allow create and manage subfolders on your media manager on /app/Providers/Filament/AdminPanelProvider.php

->plugin(
    \TomatoPHP\FilamentMediaManager\FilamentMediaManagerPlugin::make()
        ->allowSubFolders()
)

Allow User Access

now you can allow user to access selected folder and restract user to access each other folders if the folder is not public on /app/Providers/Filament/AdminPanelProvider.php

->plugin(
    \TomatoPHP\FilamentMediaManager\FilamentMediaManagerPlugin::make()
        ->allowUserAccess()
)

now on your user model you can use this trait to allow user to access selected folder

use TomatoPHP\FilamentMediaManager\Traits\InteractsWithMediaFolders;

class User extends Authenticatable
{
    use InteractsWithMediaFolders;
}

NOTE don't forget to migrate after update the plugin

Folders API

now you can access your media and folders using API you have 2 endpoints

• /api/folders to get all folders
• /api/folders/{id} to get folder by id with sub folders and media files

to allow this feature you need to publish the config file by use this command

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

then you can set api.active to true on the config file

'api' => [
    "active" => true,
],

Publish Assets

you can publish config file by use this command

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

you can publish views file by use this command

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

you can publish languages file by use this command

php artisan vendor:publish --tag="filament-media-manager-lang"

you can publish migrations file by use this command

php artisan vendor:publish --tag="filament-media-manager-migrations"

Other Filament Packages

Checkout our Awesome TomatoPHP