filament media manager
v1.1.3
Управляйте своими медиа-файлами с помощью медиа-библиотеки Spatie с простым в использовании графическим интерфейсом для FilamentPHP.
composer require tomatophp/filament-media-managerтеперь вам нужно опубликовать миграцию медиа
php artisan vendor:publish --provider= " SpatieMediaLibraryMediaLibraryServiceProvider " --tag= " medialibrary-migrations "после установки пакета запустите эту команду
php artisan filament-media-manager:install наконец, зарегистрируйте плагин в /app/Providers/Filament/AdminPanelProvider.php , если вы хотите использовать графический интерфейс и браузер папок.
-> plugin ( TomatoPHP FilamentMediaManager FilamentMediaManagerPlugin :: make ())->schema()вы можете использовать медиа-менеджер, добавив этот код в свой компонент нити.
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: 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> вы можете прикрепить глобальный файл 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 ()
)теперь в вашей пользовательской модели вы можете использовать эту черту, чтобы разрешить пользователю доступ к выбранной папке
use TomatoPHP FilamentMediaManager Traits InteractsWithMediaFolders ;
class User extends Authenticatable
{
use InteractsWithMediaFolders ;
}ПРИМЕЧАНИЕ. Не забудьте выполнить миграцию после обновления плагина.
теперь вы можете получить доступ к своим медиафайлам и папкам с помощью API, у вас есть 2 конечные точки
/api/folders чтобы получить все папки/api/folders/{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 " Ознакомьтесь с нашим удивительным TomatoPHP
