README

Filament 媒体管理器

使用 FilamentPHP 的简单 GUI，通过 spatie media library 管理您的媒体文件

安装

composer require tomatophp/filament-media-manager

安装您的包后，请运行此命令

php artisan filament-media-manager:install

最后，如果您想使用 GUI 和文件夹浏览器，请在 /app/Providers/Filament/AdminPanelProvider.php 上注册插件。

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

功能

使用 spatie media library 管理您的媒体文件
创建文件夹和子文件夹
为文件夹设置密码
使用 ->schema() 上传带有自定义字段的文件
自动为 Model/Collection/Record 创建文件夹
RTL/多语言支持

截图

使用方法

您可以通过将以下代码添加到您的 Filament 组件中来使用媒体管理器

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),
            ]),
    ]);
}

为媒体管理器上选定的类型添加自定义预览

您可以通过将以下代码添加到您的提供者中来为媒体管理器上选定的类型添加自定义预览

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'),
    ]);
}

在您的视图文件中，您可以使用它如下

<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>

您可以通过将以下代码添加到您的提供者中来将全局 js 或 css 文件附加到媒体管理器

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'),
    ]);
}

请注意，组件的 name 将与集合的名称相同。

允许子文件夹

您可以在 /app/Providers/Filament/AdminPanelProvider.php 上允许在媒体管理器上创建和管理子文件夹

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

允许用户访问

现在，您可以在 /app/Providers/Filament/AdminPanelProvider.php 上允许用户访问选定的文件夹，如果文件夹不是公开的，则从用户那里撤回访问其他文件夹的权限

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

现在，在您的用户模型上，您可以使用此 trait 来允许用户访问选定的文件夹

use TomatoPHP\FilamentMediaManager\Traits\InteractsWithMediaFolders;

class User extends Authenticatable
{
    use InteractsWithMediaFolders;
}

注意不要忘记在更新插件后迁移

文件夹 API

现在您可以通过 API 访问您的媒体和文件夹，您有两个端点

/api/folders 获取所有文件夹
/api/folders/{id} 根据 ID 获取文件夹，包含子文件夹和媒体文件

要允许此功能，您需要通过使用此命令发布配置文件

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

然后您可以在配置文件中将 api.active 设置为 true

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

发布资源

您可以通过使用此命令发布配置文件

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

您可以通过使用此命令发布视图文件

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

您可以通过使用此命令发布语言文件

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

您可以通过使用此命令发布迁移文件

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

其他 Filament 包

查看我们的 Awesome TomatoPHP

tomatophp / filament-media-manager

维护者

详细信息