syncfusion-aspnetcore-file-manager

Syncfusion File Manager コンポーネントの実装

Syncfusion File Manager は、Web アプリケーションでのファイルの閲覧、管理、整理に対応する、包括的で本番環境対応のコンポーネントです。ファイルシステムを操作するためのエクスプローラーのようなインターフェイスを提供し、ファイル操作（作成、名前変更、削除、コピー、移動、アップロード、ダウンロード）、ファイルの整理、コンテンツの検索とフィルタリング、アクセス権限の制御を行えるほか、仮想化によって大規模なデータセットを効率的に処理できます。

このスキルを使用する場面

ファイルの閲覧とナビゲーション

• ファイルエクスプローラーのインターフェイスを作成する：大きなアイコン表示または詳細なリスト表示でフォルダー階層を表示します
• ディレクトリのナビゲーションを有効にする：パンくずリストによるナビゲーション、パスの設定、前の場所への移動に対応します
• ファイル情報を表示する：ファイル名、サイズ、日付、種類、カスタムプロパティを表示します
• パス追跡を実装する：現在のディレクトリパスを保持して表示します
• ファイルプレビューに対応する：画像やファイルのプレビュー機能を有効にします

ファイル操作（CRUD）

• フォルダーを作成する：プログラムから新しいディレクトリを作成します
• ファイルを読み込んで一覧表示する：フィルタリングと並べ替えを適用して、ディレクトリの内容を表示します
• ファイルをアップロードする：進行状況の追跡に対応した、単一ファイル、複数ファイル、ディレクトリのアップロードをサポートします
• ファイルをダウンロードする：単一ファイルおよび複数ファイルのダウンロードを有効にします（ZIP に対応）
• ファイルやフォルダーの名前を変更する：検証や重複への対処を行いながら、名前を変更します
• ファイルやフォルダーをコピーする：場所をまたいでファイルを複製します
• ファイルやフォルダーを移動する：競合を解決しながら、切り取りと貼り付けを行います
• ファイルやフォルダーを削除する：確認ダイアログを表示して項目を削除します
• ファイルの詳細を取得する：詳細なメタデータとプロパティを取得します

ファイルの整理と検索

• ファイルを検索する：大文字と小文字の区別を指定して、名前で項目を検索します
• コンテンツをフィルタリングする：カスタムフィルターを適用し、一致する項目のみを表示します
• ファイルを並べ替える：名前、サイズ、日付、またはカスタム比較関数で並べ替えます
• 複数選択：Ctrl+クリック、Shift+クリック、Ctrl+A で複数の項目を選択します
• 範囲選択：ドラッグして連続する複数の項目を選択します
• すべて選択／選択を解除する：プログラムから選択状態を制御します

アップロードとドラッグ＆ドロップ

• ファイルのアップロード：アップロード設定、許可する拡張子、ファイルサイズの制限を構成します
• 一括アップロード：複数のファイルを順次または並列にアップロードします
• チャンクアップロード：一時停止と再開に対応して、大容量ファイルを処理します
• ディレクトリのアップロード：フォルダー構造全体をアップロードします
• ドラッグ＆ドロップ：外部ソースからのファイルや、ファイルマネージャー内の項目を受け付けます
• アップロードの進行状況：アップロードの状態を追跡し、ユーザーに状況を知らせます

表示のカスタマイズ

• 表示の切り替え：大きなアイコン表示と詳細表示を切り替えます
• 列のカスタマイズ：詳細表示の列（名前、サイズ、更新日など）を構成します
• テンプレートのカスタマイズ：項目やナビゲーションペインのカスタムレンダリングを作成します
• サムネイル表示：大きなアイコン表示で画像のプレビューを表示します
• ナビゲーションペイン：お気に入りのフォルダーやパンくずリストを含むサイドバーを構成します
• ツールバーのカスタマイズ：ツールバーの項目を追加、削除、またはカスタマイズします
• コンテキストメニュー：ファイル、フォルダー、レイアウトのコンテキストメニューを構成します

高度な機能

• 仮想化：仮想スクロールを使用して、大量のファイルリストを効率的に描画します
• フラットなデータ構造：サーバーとの通信なしで、配列からデータを読み込みます
• 状態の永続化：ユーザー設定をセッション間で保持します
• RTL 対応：国際化アプリケーション向けに、右から左へ記述するレイアウトに対応します
• ローカライズ：複数の言語と、ロケールに応じた書式設定に対応します
• セキュリティと権限：ロールまたはユーザーごとに、フォルダーやファイルへのアクセスを制御します
• カスタム認証：リクエストにヘッダー、API キー、またはトークンを追加します

クイックスタートの例

コントローラーコード（FileManagerController.cs）

using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.FileManager;

public class FileManagerController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    
    [HttpPost]
    public IActionResult FileManager(string action, string path)
    {
        // Handle file operations based on action parameter
        if (action == "read")
        {
            // Return list of files and folders for the given path
            return Ok(new {
                cwd = new { name = "Root", hasChild = true, filterPath = "/" },
                files = new object[] { },
                error = (object)null,
                details = (object)null
            });
        }
        
        return Ok();
    }
}

Razor ビュー（Index.cshtml）

<ejs-filemanager id="filemanager"
    path="/"
    width="100%"
    height="400px"
    allowDragAndDrop="true"
    allowMultiSelection="true"
    showThumbnail="true"
    enablePersistence="true">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager"
        downloadUrl="/FileManager/Download"
        uploadUrl="/FileManager/Upload"
        getImageUrl="/FileManager/GetImage">
    </e-filemanager-ajaxsettings>
</ejs-filemanager>

ナビゲーションガイド

実装のニーズに応じて、適切なリファレンスファイルを参照してください。

はじめにとセットアップ

📄 参照： references/getting-started.md

• コンポーネントのインストールとパッケージのセットアップ
• 基本的な初期化とレンダリング
• AJAX エンドポイントの設定
• 幅と高さの設定
• ビューの選択（LargeIcons と Details）
• 初期パスの設定
• ロケールと RTL の設定
• 状態の永続化の設定

ファイル操作（CRUD）

📄 参照： references/file-operations.md

• プログラムによる新規フォルダーの作成
• ファイルとフォルダーの名前変更
• コピーと貼り付けの操作
• 切り取りと移動の操作
• ファイルとフォルダーの削除
• ファイル／フォルダーの詳細情報の取得
• リクエストとレスポンスの形式
• エラー処理とエラーコード
• ベストプラクティスとパターン

ファイルのアップロードとドラッグ＆ドロップ

📄 参照： references/file-upload.md

• アップロード設定の構成
• ファイル形式のフィルタリング（allowedExtensions）
• ファイルサイズの制限（minFileSize、maxFileSize）
• 自動アップロードの動作と手動アップロード
• 順次アップロードと並列アップロード
• 大きなファイルのチャンクアップロード（一時停止／再開に対応）
• ディレクトリ（フォルダー）のアップロードのサポート
• アップロードイベントとハンドラー
• アップロードの進行状況の追跡

📄 参照： references/drag-and-drop.md

• ドラッグ＆ドロップ機能の有効化
• ドロップゾーンの設定
• 内部ドラッグ＆ドロップ（ファイルマネージャーの項目間）
• 外部ドラッグ＆ドロップ（デスクトップまたは外部ソースから）
• ドラッグイベントハンドラー（fileDragStart、fileDragging、fileDragStop、fileDropped）
• ブラウザーのデフォルト動作の防止
• 複数ファイルのドロップのサポート
• ドラッグ＆ドロップのスタイルのカスタマイズ

表示ビューとカスタマイズ

📄 参照： references/views-overview.md

• 大きなアイコンビュー（デフォルト）
• 列を設定できる詳細ビュー
• ビューの動的な切り替え
• 大きなアイコンのカスタムテンプレート
• 詳細ビューでの列の設定
• サムネイルの表示設定
• ファイル拡張子の表示設定

📄 参照： references/layouts-customization.md

• ナビゲーションペインの設定と表示／非表示
• パンくずナビゲーションとカスタマイズ
• ツールバーの設定と表示／非表示
• レイアウトのレスポンシブ設定
• テンプレートベースのカスタマイズ（ナビゲーションペイン、大きなアイコン）
• モバイルビューの最適化
• カスタムナビゲーション項目
• 非表示項目の表示／非表示
• ファイル拡張子の表示／非表示

選択、検索、並べ替え、フィルター

📄 参照： references/selection-modes.md

• 複数選択（デフォルトで有効）
• 単一選択モード
• マウスドラッグによる範囲選択
• チェックボックスによる選択
• キーボードショートカット（Ctrl+A、Ctrl+クリック、Shift+クリック）
• 選択イベント（fileSelect、fileSelection）
• プログラムによる選択メソッド
• 選択の解除機能

📄 参照： references/search-sort-filter.md

• 検索機能と設定
• 大文字と小文字を区別する検索オプション
• ユーザーの入力に応じたリアルタイム検索
• 名前、更新日、サイズによる並べ替え
• カスタム並べ替え比較関数
• フィルターの種類（contains、startswith、endswith）
• 非表示項目の表示設定
• ファイル拡張子の表示

ツールバーとコンテキストメニューのカスタマイズ

📄 参照： references/toolbar-customization.md

• ツールバー項目の設定
• デフォルトのツールバー項目一覧
• カスタムツールバー項目とアクション
• ツールバー項目の動的な有効化／無効化
• ツールバーの表示設定
• ツールバーのレイアウトとスタイル
• ツールバーのクリックイベント処理

📄 参照： references/context-menu.md

• ファイル、フォルダー、レイアウトのコンテキストメニュー設定
• デフォルトのコンテキストメニュー項目
• メニュー項目の動的な有効化／無効化
• メニュー項目のイベント処理
• カスタムメニュー項目とアクション
• メニューの表示設定
• メニューイベント（menuOpen、menuClick、menuClose）

イベントとメソッド

📄 参照： references/file-events.md

• ファイル操作イベント：beforeDelete、delete、rename、folderCreate、beforeMove、move
• 選択イベント：fileSelect、fileSelection
• ナビゲーションイベント：fileOpen、fileLoad
• アップロードイベント：uploadListCreate、success、failure
• AJAX イベント：beforeSend、beforeDownload、beforeImageLoad
• ポップアップイベント：popupOpen、beforePopupOpen、popupClose、beforePopupClose
• ツールバー／メニューイベント：toolbarClick、toolbarCreate、menuClick、menuOpen、menuClose
• 検索イベント：search
• コンポーネントのライフサイクル：created、destroyed
• イベントハンドラーのパターンとベストプラクティス

📄 参照： references/programmatic-methods.md

• 選択メソッド：selectAll()、clearSelection()、getSelectedFiles()
• ファイル操作メソッド：createFolder()、deleteFiles()、renameFile()、downloadFiles()
• ナビゲーションメソッド：openFile()、traverseBackward()、refreshFiles()、refreshLayout()
• アップロードメソッド：uploadFiles()
• ダイアログメソッド：closeDialog()
• ツールバー／メニューメソッド：disableToolbarItems()、enableToolbarItems()、disableMenuItems()、enableMenuItems()
• フィルターメソッド：filterFiles()
• 高度なメソッド：getMenuItemIndex()、getToolbarItemIndex()
• 非同期操作の処理

パフォーマンスと高度な機能

📄 参照： references/virtualization.md

• 大きなファイル一覧向けの仮想スクロール
• 仮想化の設定
• 仮想化の制限と回避策
• 大規模なデータセットのパフォーマンス最適化
• メモリ管理のベストプラクティス
• 仮想化を使用したファイルの選択

📄 参照： references/flat-data-customization.md

• フラットデータの構造と設定
• サーバーとの通信なしでのデータ読み込み
• ローカルファイル配列と JSON データ
• フラットデータイベントの処理（作成、削除、名前変更、移動）
• UI のカスタマイズ（拡張子、非表示項目、サムネイル）
• カスタムファイルプロバイダーの実装
• 遅延読み込みのパターン

セキュリティとアクセス制御

📄 参照： references/security-basics.md

• XSS 攻撃を防ぐための HTML サニタイズ
• 入力検証とエラー処理
• SQL インジェクションの防止
• ファイルタイプの検証
• 一般的なセキュリティの脆弱性
• 安全なファイル処理のプラクティス
• 権限ベースのアクセス制御

📄 参照： references/authentication-headers.md

• AJAX リクエストへのヘッダーの追加
• カスタムヘッダーのための Before Send イベント
• Bearer トークン認証
• API キー認証
• 基本認証
• Before Download イベントの処理
• Before Image Load イベントの処理
• OAuth トークン更新のパターン
• リクエストヘッダーのパターンと例

サーバー統合

📄 参照： references/server-integration.md

• ASP.NET Core バックエンドの実装
• Node.js バックエンドの実装
• リクエスト／レスポンスのパターンと形式
• チャンクを使用したアップロードリクエスト
• エラー処理の戦略
• 再開可能なアップロードのパターン
• ファイル操作のリクエスト／レスポンス構造

API 完全リファレンス

📄 参照： references/api-complete-reference.md

• すべてのプロパティ：ajaxSettings、path、view、width、height など 40 以上
• すべてのメソッド：selectAll()、clearSelection()、createFolder()、deleteFiles()、renameFile()、downloadFiles() など 15 以上
• すべてのイベント：beforeDelete、delete、fileSelect、beforeSend、beforeDownload、beforeImageLoad など 20 以上
• 型定義：FileData、AjaxSettingsModel、UploadSettingsModel など
• 完全な動作例：すべての機能を備えた実装

よく使われるパターン

パターン 1：ツールバーとコンテキストメニューを使用した基本設定

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager"
    path="/"
    width="100%"
    height="400px">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager"
        uploadUrl="/FileManager/Upload"
        downloadUrl="/FileManager/Download"
        getImageUrl="/FileManager/GetImage">
    </e-filemanager-ajaxsettings>
    <e-filemanager-toolbarsettings items="@new string[] {'NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename', 'Refresh'}">
    </e-filemanager-toolbarsettings>
    <e-filemanager-contextmenusettings file="@new string[] {'Open', 'Delete', 'Rename', 'Download', 'Details'}"
        folder="@new string[] {'Open', 'Delete', 'Rename', 'Download', 'Details'}"
        layout="@new string[] {'SortBy', 'View', 'Refresh', 'NewFolder', 'Upload'}">
    </e-filemanager-contextmenusettings>
</ejs-filemanager>

パターン 2：検証と制約を伴うアップロード

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager" path="/">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager"
        uploadUrl="/FileManager/Upload">
    </e-filemanager-ajaxsettings>
    <e-filemanager-uploadsettings autoUpload="true"
        allowedExtensions=".jpg,.png,.pdf,.doc,.docx"
        minFileSize="1024"
        maxFileSize="5242880">
    </e-filemanager-uploadsettings>
</ejs-filemanager>

パターン 3：カスタム列を使用した詳細ビュー

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager" view="Details">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
    <e-filemanager-detailsviewsettings>
        <e-detailsviewsettings-columns>
            <e-detailsviewsettings-column field="name" headerText="Name" minWidth="150" width="200"></e-detailsviewsettings-column>
            <e-detailsviewsettings-column field="_fm_modified" headerText="Date Modified" type="dateTime" minWidth="120" width="150"></e-detailsviewsettings-column>
            <e-detailsviewsettings-column field="size" headerText="Size" minWidth="90" width="120"></e-detailsviewsettings-column>
        </e-detailsviewsettings-columns>
    </e-filemanager-detailsviewsettings>
</ejs-filemanager>

パターン 4：プログラムによるファイル操作

ビューコード（Index.cshtml）：

<button onclick="selectAllAndDelete()">Select All & Delete</button>

<ejs-filemanager id="filemanager">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
</ejs-filemanager>

<script>
    function selectAllAndDelete() {
        var filemanager = document.getElementById('filemanager').ej2_instances[0];
        filemanager.selectAll();
        var selected = filemanager.getSelectedFiles();
        var names = selected.map(function(f) { return f.name; });
        filemanager.deleteFiles(names);
    }
</script>

パターン 5：リアルタイムフィルタリングを使用した検索

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager" search="onSearch">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
    <e-filemanager-searchsettings allowSearchOnTyping="true"
        filterType="Contains"
        ignoreCase="true">
    </e-filemanager-searchsettings>
</ejs-filemanager>

<script>
    function onSearch(args) {
        console.log('Search query:', args.searchString);
    }
</script>

パターン 6：アップロード機能付きドラッグ＆ドロップ

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager"
    allowDragAndDrop="true"
    fileDragStart="onFileDragStart"
    fileDragStop="onFileDragStop"
    fileDropped="onFileDropped">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager"
        uploadUrl="/FileManager/Upload">
    </e-filemanager-ajaxsettings>
    <e-filemanager-uploadsettings autoUpload="true"
        allowedExtensions=".jpg,.png,.pdf">
    </e-filemanager-uploadsettings>
</ejs-filemanager>

<script>
    function onFileDragStart(args) {
        console.log('Drag started:', args.fileDetails);
    }
    
    function onFileDragStop(args) {
        console.log('Drag stopped');
    }
    
    function onFileDropped(args) {
        console.log('File dropped:', args.fileDetails);
    }
</script>

パターン 7：イベント駆動型のファイル操作

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager"
    beforeDelete="beforeDelete"
    delete="onDelete"
    beforeSend="beforeSend">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
</ejs-filemanager>

<script>
    function beforeDelete(args) {
        console.log('Before delete:', args.fileDetails);
        // Validate or prevent deletion
        var isReadOnly = args.fileDetails.some(function(f) { return f.isReadOnly; });
        if (isReadOnly) {
            args.cancel = true;
        }
    }
    
    function onDelete(args) {
        console.log('File deleted:', args.fileDetails);
        // Update UI or log action
    }
    
    function beforeSend(args) {
        // Add custom headers
        args.ajaxSettings.headers = args.ajaxSettings.headers || {};
        args.ajaxSettings.headers['Authorization'] = 'Bearer ' + getToken();
    }
</script>

パターン 8：大規模データセット向けの仮想スクロール

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager"
    enableVirtualization="true"
    height="600px"
    width="100%">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
</ejs-filemanager>

パターン 9：状態の永続化

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager"
    enablePersistence="true">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
</ejs-filemanager>

パターン 10：ローカライズと RTL

ビューコード（Index.cshtml）：

<ejs-filemanager id="filemanager"
    locale="ar-AE"
    enableRtl="true">
    <e-filemanager-ajaxsettings url="/FileManager/FileManager">
    </e-filemanager-ajaxsettings>
</ejs-filemanager>

主なプロパティの概要

基本的な設定：

• ajaxSettings - サーバーとの通信エンドポイント（url、uploadUrl、downloadUrl、getImageUrl）
• path - 現在のディレクトリパス
• width / height - コンポーネントの幅／高さ
• view - 表示モード（LargeIcons または Details）
• allowDragAndDrop - ドラッグ＆ドロップ機能を有効化
• allowMultiSelection - 複数ファイルの選択を有効化
• showThumbnail - 画像のサムネイルを表示

アップロード設定：

• uploadSettings.autoUpload - ファイルを自動的にアップロード
• uploadSettings.allowedExtensions - ファイルの種類を制限
• uploadSettings.maxFileSize - ファイルサイズの上限
• uploadSettings.directoryUpload - フォルダーのアップロードを有効化
• uploadSettings.sequentialUpload - ファイルを1つずつアップロード

カスタマイズ：

• toolbarSettings - ツールバーの項目と表示状態を設定
• contextMenuSettings - コンテキストごとのコンテキストメニューを設定
• navigationPaneSettings - 左側のサイドバーを設定
• detailsViewSettings - 詳細ビューの列を設定
• searchSettings - 検索動作を設定

詳細設定：

• enableVirtualization - 大規模なリストのレンダリングを最適化
• enablePersistence - ユーザー設定を記憶
• enableRtl - 右から左へのレイアウトをサポート
• cssClass - カスタム CSS スタイルを適用
• showFileExtension - ファイル拡張子を表示
• showHiddenItems - 隠しファイルを表示／非表示
• showItemCheckBoxes - 選択用のチェックボックスを表示

よくあるユースケース

ユースケース 1：ドキュメント管理システム

• ユーザーがフォルダーごとにアップロード済みのドキュメントを参照
• メタデータでドキュメントを検索、フィルタリング
• ドキュメントをダウンロード、またはプレビュー
• アクセス制御付きで新しいドキュメントをアップロード

ユースケース 2：画像ギャラリー管理

• サムネイルプレビュー付きで画像フォルダーを参照
• 画像をドラッグ＆ドロップして整理
• 画像コレクションの名前を変更して整理
• 選択した画像を ZIP としてダウンロード

ユースケース 3：コンテンツ管理

• Web サイトのコンテンツフォルダーを管理
• フォルダー階層を作成して整理
• コンテンツ項目の名前変更と削除
• 特定のフォルダーへのユーザーアクセスを制御

ユースケース 4：クラウドストレージクライアント

• ファイル管理の全操作
• 進行状況を追跡しながら複数のファイルをアップロード
• セッションをまたいでユーザー設定を保持
• 状態を同期

---