filament media manager
v1.1.3
FilamentPHP の使いやすい GUI を備えた spatie メディア ライブラリを使用してメディア ファイルを管理します
composer require tomatophp/filament-media-manager次に、メディア移行を公開する必要があります
php artisan vendor:publish --provider= " SpatieMediaLibraryMediaLibraryServiceProvider " --tag= " medialibrary-migrations "パッケージをインストールした後、このコマンドを実行してください
php artisan filament-media-manager:install GUI とフォルダー ブラウザーを使用する場合は、最後に/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}は、サブフォルダーとメディア ファイルを含むフォルダーを 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 をチェックしてください
