filament media manager

Gerenciador de mídia de filamento

Gerencie seus arquivos de mídia usando a biblioteca de mídia spatie com GUI fácil de usar para FilamentPHP

Instalação

composer require tomatophp/filament-media-manager

agora você precisa publicar a migração de mídia

php artisan vendor:publish --provider= " SpatieMediaLibraryMediaLibraryServiceProvider " --tag= " medialibrary-migrations "

depois de instalar seu pacote, execute este comando

php artisan filament-media-manager:install

finalmente registre o plugin em /app/Providers/Filament/AdminPanelProvider.php , se você gosta de usar GUI e navegador de pastas.

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

Características

• Gerencie seus arquivos de mídia usando a biblioteca de mídia espacial
• Crie pastas e subpastas
• Definir senha para pastas
• Carregar arquivos com campos personalizados usando ->schema()
• Criação automática de pastas para modelo/coleção/registro
• Suporte a idiomas RTL/Mutli

Capturas de tela

Uso

você pode usar o gerenciador de mídia adicionando este código ao seu componente de filamento

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

Adicionar visualização personalizada ao tipo selecionado no gerenciador de mídia

você pode adicionar uma visualização personalizada ao tipo selecionado no gerenciador de mídia adicionando este código ao seu provedor

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

no seu arquivo de visualização você pode usá-lo assim

<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: 1 px 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>

você pode anexar um arquivo js ou css global ao gerenciador de mídia adicionando este código ao seu provedor

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

observe que o name do componente será o mesmo nome da coleção.

Permitir subpastas

você pode permitir a criação e gerenciamento de subpastas em seu gerenciador de mídia em /app/Providers/Filament/AdminPanelProvider.php

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

Permitir acesso do usuário

agora você pode permitir que o usuário acesse a pasta selecionada e restringir o usuário para acessar as pastas uns dos outros se a pasta não for pública em /app/Providers/Filament/AdminPanelProvider.php

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

agora no seu modelo de usuário você pode usar esta característica para permitir que o usuário acesse a pasta selecionada

 use TomatoPHP  FilamentMediaManager  Traits  InteractsWithMediaFolders ;

class User extends Authenticatable
{
    use InteractsWithMediaFolders ;
}

NOTA não se esqueça de migrar após atualizar o plugin

API de pastas

agora você pode acessar suas mídias e pastas usando API, você tem 2 endpoints

• /api/folders para obter todas as pastas
• /api/folders/{id} para obter pasta por id com subpastas e arquivos de mídia

para permitir este recurso você precisa publicar o arquivo de configuração usando este comando

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

então você pode definir api.active como true no arquivo de configuração

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

Publicar ativos

você pode publicar o arquivo de configuração usando este comando

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

você pode publicar o arquivo de visualizações usando este comando

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

você pode publicar o arquivo de idiomas usando este comando

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

você pode publicar o arquivo de migração usando este comando

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

Outros pacotes de filamentos

Confira nosso incrível TomatoPHP