syncfusion-blazor-file-manager

Syncfusion Blazor FileManager の実装

このスキルを使用するタイミング

次のような場合に、このスキルを使用してください。

• ファイル管理インターフェイスを作成する - ファイルの閲覧、アップロード、ダウンロード、管理を行う Web アプリケーションを構築する
• クラウドストレージとの連携を設定する - Azure Blob Storage、Amazon S3、Google Drive、SharePoint、Firebase に接続する
• Docker 経由で統合プロバイダーサービスをデプロイする - Azure Blob／Amazon S3 統合プロバイダーのイメージを実行し、Blazor File Manager から接続する
• ファイル操作を実装する - ユーザーがファイルやフォルダーの作成、削除、名前変更、コピー、移動、検索を行えるようにする
• 大量のファイルを扱う - 仮想化とページネーションを使用して、数千件のファイルを表示する
• UI をカスタマイズする - ツールバー、コンテキストメニュー、表示モード、ナビゲーションをニーズに合わせて調整する
• ドラッグ＆ドロップ機能を追加する - ユーザーがファイルをドラッグ＆ドロップして、アップロードや整理を行えるようにする
• アクセシブルなファイルシステムを構築する - キーボードナビゲーションに対応した、WCAG 準拠のファイル管理機能を提供する
• 複雑なワークフローに対応する - カスタムの並べ替え、フィルタリング、プレビュー、複数プロバイダーのシナリオを実装する

コンポーネントの概要

Syncfusion Blazor FileManager は、ファイルとフォルダーを管理するための包括的なコンポーネントです。次の機能を提供します。

• 複数のファイル操作：Read、Create、Delete、Rename、Search、Copy、Move、Upload、Download、Get Details、GetSelectedFiles
• 柔軟なデータバインディング：AJAX 設定、リストオブジェクト、または注入されたサービス
• 豊富なイベントシステム：ページネーション用の PageChanging／PageChanged を含む 20 以上のイベント
• 多彩な UI カスタマイズ：ツールバー、コンテキストメニュー、表示モード（Details、LargeIcons）、NavigationPaneTemplate
• ファイルのプレビュー機能：画像やファイルのプレビューを表示する ShowThumbnail プロパティ
• クラウドプロバイダーのサポート：物理ファイル、Azure、AWS S3、Google Drive、SharePoint、Firebase、SQL、FTP
• 高度な機能：仮想化、イベントに対応したページネーション、ドラッグ＆ドロップ、カスタムフィルタリング、並べ替え、アクセシビリティ
• レイアウト管理：動的なサイズ変更やネストされたコンポーネントのシナリオに対応する RefreshLayoutAsync
• 高いパフォーマンス：仮想化と遅延読み込みにより、大量のファイルを処理します

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• Web App、Server App、WASM App、MAUI App 向けのインストール
• NuGet パッケージの設定とサービスの登録
• 基本的なコンポーネントの初期化と AJAX の設定
• ファイルプロバイダーの設定と wwwroot の構成
• 5 分で最初のファイルマネージャーインスタンスを作成

ファイル操作

📄 参照： references/file-operations.md

• 11 の主要な操作：Read、Create、Delete、Rename、Search、Details、Copy、Move、Upload、Download、GetImage
• リクエスト／レスポンスのデータ構造とパラメーター
• ドキュメントのコードを使用した操作例
• 公開メソッド：DownloadFilesAsync(selectedItems)、GetSelectedFiles()
• ShowThumbnail プロパティを使用したファイルのプレビュー機能
• SortBy プロパティと SortOrder プロパティを使用した並べ替え機能

データバインディングのパターン

📄 参照： references/data-binding.md

• リモートデータバインディング用の AjaxSettings
• ローカルデータと OnRead イベントを使用するリストオブジェクト
• 複雑なシナリオ向けの注入サービスパターン
• FileManagerDirectoryContent の構造
• 各バインディング方法の使い分け

イベントとコールバック

📄 参照： references/events-and-callbacks.md

• 完全なシグネチャを含む 20 以上のファイルマネージャーイベント
• イベントのライフサイクルとタイミング
• 一般的なイベントハンドラーパターン
• BeforeDownload、BeforeImageLoad、OnFileOpen イベント
• ItemsDeleting、ItemsDeleted、FolderCreating、FolderCreated イベント
• Searching、Searched、ItemRenaming、ItemRenamed イベント

カスタマイズと UI

📄 参照： references/customization.md

• ツールバーのカスタマイズと項目の設定
• コンテキストメニューのカスタマイズ
• 表示モード：詳細表示、大きなアイコン表示
• NavigationPaneTemplate によるナビゲーション項目のカスタマイズ
• アイコンとメタデータを備えたカスタムナビゲーションペインテンプレート
• スタイルと CSS のカスタマイズ
• 外観とテーマの設定

ファイルプロバイダーとストレージ

📄 参照： references/file-providers.md

• 物理ファイルプロバイダー（ローカルファイルシステム）
• Azure Blob Storage の設定
• Amazon S3 クラウドプロバイダー
• Google Drive との統合
• SharePoint Online プロバイダー
• Firebase Realtime Database
• SQL Database プロバイダー
• FTP（File Transfer Protocol）プロバイダー

Docker のデプロイ

📄 参照： references/docker-deployment.md

• Azure Blob Storage プロバイダーと Amazon S3 プロバイダーで共用する Docker イメージ
• バックエンドを切り替える FILEMANAGER_PROVIDER 環境変数
• 両プロバイダー向けの docker-compose.yml 設定
• クライアント側の FileManagerAjaxSettings を実行中のコンテナーに接続する設定
• ストレージ、ポート、DNS の問題のトラブルシューティング

アップロードとダウンロード

📄 参照： references/upload-download.md

• ファイルアップロードの設定とイベント
• ディレクトリアップロード（フォルダーのアップロード）
• 単一ファイルと ZIP に対応したファイルのダウンロード
• 大容量ファイルの処理
• アップロードの進行状況の追跡
• ダウンロードの防止と検証
• カスタムロジック向けの BeforeDownload イベント

高度な機能

📄 参照： references/advanced-features.md

• 大量のファイルセット向けの仮想化
• PageChanging イベントと PageChanged イベントを使用したページネーションの設定
• ドラッグ＆ドロップ機能
• ドラッグ＆ドロップによるアップロードの制限
• カスタムフィルタリングと検索
• RefreshLayoutAsync メソッドを使用したネストされた項目の処理
• ダイアログやコンテナーへのコンポーネントの統合
• アクセシビリティ機能（WCAG 準拠）
• キーボードナビゲーションのサポート
• 複数ファイルの選択

クイックスタートの例

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

サーバー側の設定（Program.cs）：

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();
builder.Services.AddControllers();

app.UseRouting();
app.MapControllers();

HTML の設定（App.razor）：

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
</body>

よくあるパターン

パターン 1：OnRead イベントを使用したローカルデータ

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" OnRead="OnReadAsync"></FileManagerEvents>
</SfFileManager>

@code {
    private async Task OnReadAsync(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        // Load data from your service
        var response = await YourService.GetFilesAsync(args.Path);
        args.Response = response;
    }
}

パターン 2：Azure プロバイダーを使用したクラウドストレージ

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/AzureProvider/FileOperations"
                             UploadUrl="/api/AzureProvider/Upload"
                             DownloadUrl="/api/AzureProvider/Download"
                             GetImageUrl="/api/AzureProvider/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

パターン 3：プログラムによるダウンロード

@ref="FileManager"

<SfButton OnClick="DownloadFiles">Download Selected</SfButton>
<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent">
    
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;
    
    public async Task DownloadFiles()
    {
        await FileManager.DownloadFilesAsync(FileManager.SelectedItems);
    }
}

パターン 4：カスタムイベント処理

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       ItemsDeleting="OnItemsDeleting"
                       BeforeDownload="OnBeforeDownload">
    </FileManagerEvents>
</SfFileManager>

@code {
    public async Task OnItemsDeleting(ItemsDeleteEventArgs<FileManagerDirectoryContent> args)
    {
        // Validate before delete
        if (args.Files.Count > 10)
        {
            args.Cancel = true;
        }
    }

    public void OnBeforeDownload(BeforeDownloadEventArgs<FileManagerDirectoryContent> args)
    {
        // Custom download logic
    }
}

主なプロパティ

プロパティ	型	デフォルト	目的
TValue	ジェネリック	FileManagerDirectoryContent	データモデルの型
Url	string	-	ファイル操作用の AJAX エンドポイント
UploadUrl	string	-	アップロードエンドポイント
DownloadUrl	string	-	ダウンロードエンドポイント
GetImageUrl	string	-	画像プレビューエンドポイント
SortBy	string	Name	並べ替えフィールド（Name、Size、DateModified、DateCreated）
SortOrder	SortOrder	Ascending	並べ替え順序（None、Ascending、Descending）
View	ViewType	LargeIcons	表示モード（Details、LargeIcons）
EnableVirtualization	bool	false	大規模なデータセットの仮想スクロールを有効にする
RootPath	string	-	ルートディレクトリのパス
ShowHiddenItems	bool	false	隠しファイルとフォルダーを表示する
EnablePagination	bool	false	ページネーションのサポートを有効にする
PageSize	int	100	1 ページあたりの項目数
DirectoryUpload	bool	false	ディレクトリのアップロードを許可する

一般的なユースケース

1. 社内ドキュメント管理

• 物理ファイルプロバイダーを使用してセットアップします
• ツールバーを使用して CRUD 操作を実行します
• 検索とフィルタリングを有効にします
• 監査ログ記録用のイベントハンドラーを追加します

2. クラウドベースのチームコラボレーション

• Azure または AWS S3 に接続します
• ドラッグ＆ドロップによるアップロードを有効にします
• 共有用のカスタムツールバーを追加します
• イベントを通じてアクセス制御を実装します

3. メディアライブラリ

• GetImageUrl を使用した画像プレビューを有効にします
• LargeIcons ビューを使用してサムネイルを表示します
• パフォーマンス向上のためにページネーションを実装します
• ファイルの種類によるカスタムフィルタリングを追加します

4. バックアップおよびアーカイブシステム

• 複数のストレージプロバイダーに接続します
• 圧縮によるダウンロードを有効にします
• 大規模なデータセットには仮想化を使用します
• カスタムの並べ替えとフィルタリングを追加します

5. 公開ファイル共有ポータル

• イベントハンドラーで操作を制限します
• 削除と名前の変更を無効にします
• ダウンロードとプレビューのみを有効にします
• ナビゲーションと UI をカスタマイズします

6. コンテナ化されたクラウドストレージバックエンド

• 統合された syncfusion/filemanager-provider Docker イメージを実行します
• FILEMANAGER_PROVIDER 環境変数を使用して、Azure Blob Storage と Amazon S3 を切り替えます
• Blazor クライアントの FileManagerAjaxSettings をコンテナの API エンドポイントに向けます

次のステップ

1. セットアップを選択する: 使用するプラットフォームに応じて、はじめにを参照します
2. データソースを選択する: AJAX、ローカル、サービスのいずれかを選ぶため、データバインディングのパターンを読みます
3. ファイル操作を設定する: 利用可能なアクションについて、ファイル操作を確認します
4. イベントを処理する: 必要なハンドラーについて、イベントとコールバックを確認します
5. UI をカスタマイズする: ツールバーとテーマについて、カスタマイズを参照します
6. ストレージを選択する: ファイルプロバイダーでプロバイダーを選択します
7. バックエンドをコンテナ化する: Docker デプロイを使用して、統合された Azure / S3 プロバイダーをデプロイします