syncfusion-javascript-file-manager

Syncfusion TypeScript FileManager の実装 - 完全リファレンス

Syncfusion FileManager コンポーネントは、ファイルやフォルダーの閲覧、管理、整理を行うエンタープライズグレードのウェブベースのファイル管理システムです。包括的なファイル操作、カスタマイズオプション、ドラッグアンドドロップ、仮想化、多言語対応、RTL レンダリング、ロールベースのアクセス制御などの高度な機能を備えています。

目次

1. このスキルを使う場面
2. クイックスタート
3. 完全ナビゲーションガイド
4. コアプロパティリファレンス
5. 設定オブジェクト
6. メソッドリファレンス
7. イベントリファレンス
8. UI モジュールとインジェクション
9. 一般的なパターンとシナリオ
10. 高度な統合
11. ベストプラクティス
12. API 互換性マトリックス

---

このスキルを使う場面

次の場合にこのスキルを使用します：

• エンタープライズグレードのファイルブラウザーまたはドキュメント管理インターフェイスを作成する
• 検証機能を備えた完全なファイルのアップロード／ダウンロード機能を実装する
• 特定のワークフローに合わせてツールバー、コンテキストメニュー、ビューをカスタマイズする
• 範囲選択機能を備えた複数選択のファイル選択インターフェイスを構築する
• カスタム検証を伴う高度なドラッグアンドドロップのファイル処理を実装する
• カスタムファイルシステムプロバイダー（Physical、Azure、S3 など）を統合する
• ローカライズ、RTL 対応、多言語インターフェイスを適用する
• アクセス制御とロールベースの権限を実装する
• 仮想化を使用して大量のファイル一覧を最適化する
• カスタムの並べ替え、フィルタリング、検索を実行する
• ファイル向けの入れ子またはフラットなデータ構造を構築する
• セッションをまたいでコンポーネントの状態を保持する
• サムネイルとファイルプレビューをカスタマイズする
• ディレクトリのアップロード機能を構築する

---

クイックスタート

最小限の設定

import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';

// Step 1: Inject required modules
FileManager.Inject(Toolbar, NavigationPane, DetailsView);

// Step 2: Initialize FileManager with AJAX configuration
const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://your-api.com/api/FileManager/FileOperations',
        getImageUrl: 'https://your-api.com/api/FileManager/GetImage',
        uploadUrl: 'https://your-api.com/api/FileManager/Upload',
        downloadUrl: 'https://your-api.com/api/FileManager/Download'
    },
    height: '100%',
    width: '100%'
});

// Step 3: Render to DOM element
filemanager.appendTo('#filemanager');

HTML テンプレート

まず、Fluent 2 テーマパッケージをインストールします：

npm install @syncfusion/ej2-fluent2-theme --save

次に、index.css ファイルでテーマ CSS を参照します（FileManager 用の index.css は、必要な依存スタイルをすべて自動的に読み込みます）：

@import "../node_modules/@syncfusion/ej2-fluent2-theme/styles/file-manager/index.css";

次に、基本的な HTML コンテナーを作成します：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Syncfusion FileManager</title>
    <link href="index.css" rel="stylesheet" />
</head>
<body>
    <div id="filemanager"></div>
    <script src="index.js"></script>
</body>
</html>

---

完全ナビゲーションガイド

はじめにと基本

📄 参照先： references/getting-started.md

• トピック： インストール、セットアップ、CSS のインポート、基本的な初期化、レンダリング、設定

ファイル操作と API 統合

📄 参照先： references/file-operations.md

• トピック： アップロード／ダウンロード、CRUD 操作、ディレクトリのアップロード、検索機能

📄 参照先： references/file-operations-detailed.md

• トピック： リクエスト／レスポンスの全パラメーター、全 11 種類の操作、エラーコード、TypeScript の型

スタイル、カスタマイズ、UI

📄 参照先： references/styling-and-ui.md

• トピック： CSS のカスタマイズ、ツールバーのカスタマイズ、コンテキストメニュー、ナビゲーションペインのテンプレート

ビューとナビゲーション

📄 参照先： references/navigation-and-views.md

• トピック： ビューモード（詳細、大きなアイコン）、パンくずリスト、ナビゲーションペイン、仮想化

高度な機能

📄 参照先： references/advanced-features.md

• トピック： ドラッグアンドドロップ、複数選択、範囲選択、ローカライズ、RTL、アクセス制御

設定とデータバインディング

📄 参照先： references/advanced-configuration.md

• トピック： カスタムプロバイダー、データ構造（入れ子／フラット）、並べ替え、検証、アクセス制御

📄 参照先： references/data-binding.md

• トピック： AJAX 設定、カスタムプロバイダー、サーバー通信、リクエスト／レスポンスの処理

ファイルシステムプロバイダー

📄 参照: references/file-system-providers-detailed.md

• トピック: セットアップ、構成、例を含む10種類の完全なプロバイダー

ローカライズ

📄 参照: references/localization-and-internationalization.md

• トピック: 多言語サポート、ロケール、RTL レンダリング、カスタム翻訳

---

コアプロパティのリファレンス

プロパティ一覧

プロパティ	型	デフォルト	説明
ajaxSettings	AjaxSettingsModel	{}	サーバー通信の AJAX 構成
allowDragAndDrop	boolean	false	ドラッグ＆ドロップ操作を有効にします
allowMultiSelection	boolean	true	複数ファイルの選択を有効にします
contextMenuSettings	ContextMenuSettingsModel	{...}	コンテキストメニューの構成
cssClass	string	""	カスタムスタイル用の CSS クラス
detailsViewSettings	DetailsViewSettingsModel	{...}	詳細ビューのグリッド構成
enableHtmlSanitizer	boolean	true	XSS を防ぐために HTML をサニタイズします
enablePersistence	boolean	false	ビュー、パス、選択状態を保持します
enableRangeSelection	boolean	false	Shift+クリックによる範囲選択を有効にします
enableRtl	boolean	false	RTL 方向で表示します
enableVirtualization	boolean	false	大きなリストで仮想化を有効にします
fileSystemData	FileData[]	[]	ローカルファイルシステムのデータ配列。各項目には次の値が必要です：dateCreated、dateModified、filterPath、hasChild、id、isFile、name、parentId、size、type
height	string | number	"400px"	コンポーネントの高さ
largeIconsTemplate	string | Function	null	大きなアイコンビュー用のカスタムテンプレート
locale	string	"en-US"	ローカライズ言語コード
navigationPaneSettings	NavigationPaneSettingsModel	{...}	ナビゲーションペインの構成
navigationPaneTemplate	string | Function	null	ナビゲーションペイン用のカスタムテンプレート
path	string	"/"	表示する現在のファイルパス
popupTarget	HTMLElement | string	null	ダイアログのポップアップ対象要素
rootAliasName	string	null	ルートフォルダーの表示名
searchSettings	SearchSettingsModel	{...}	検索の構成
selectedItems	string[]	[]	事前選択されたファイル／フォルダー
showFileExtension	boolean	true	一覧にファイル拡張子を表示します
showHiddenItems	boolean	false	一覧に隠しファイルを含めます
showItemCheckBoxes	boolean	true	ホバー時にチェックボックスを表示します
showThumbnail	boolean	true	ファイルのサムネイルを表示します
sortBy	string	"name"	並べ替えに使用するフィールド名
sortComparer	SortComparer | string	null	カスタム並べ替え関数
sortOrder	SortOrder	"Ascending"	並べ替え順（Ascending、Descending、None）
toolbarItems	ToolbarItemModel[]	[]	カスタムツールバー項目の配列
toolbarSettings	ToolbarSettingsModel	{...}	ツールバーの構成
uploadSettings	UploadSettingsModel	{...}	ファイルアップロードの構成
view	ViewType	"LargeIcons"	初期ビューの種類（LargeIcons または Details）
width	string | number	"100%"	コンポーネントの幅

プロパティの例

// Example 1: Basic configuration
const filemanager = new FileManager({
    path: '/Documents',
    view: 'Details',
    height: '500px',
    width: '100%',
    allowMultiSelection: true,
    showThumbnail: true
});

// Example 2: Persistence and RTL
const filemanager = new FileManager({
    enablePersistence: true,  // Saves view, path, selection
    enableRtl: true,
    locale: 'ar-AE',
    cssClass: 'custom-fm-theme'
});

// Example 3: Range selection and drag-drop
const filemanager = new FileManager({
    allowDragAndDrop: true,
    enableRangeSelection: true,
    allowMultiSelection: true,
    enableHtmlSanitizer: true
});

---

構成オブジェクト

1. AjaxSettings

ファイル操作用のサーバーエンドポイントを構成します。

プロパティ	型	説明
url	string	ファイル操作（読み取り、作成、削除など）用のサーバーエンドポイント
uploadUrl	string	ファイルアップロード用のサーバーエンドポイント
downloadUrl	string	ファイルダウンロード用のサーバーエンドポイント
getImageUrl	string	画像／サムネイル取得用のサーバーエンドポイント

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations',
        uploadUrl: 'https://api.example.com/api/FileManager/Upload',
        downloadUrl: 'https://api.example.com/api/FileManager/Download',
        getImageUrl: 'https://api.example.com/api/FileManager/GetImage'
    }
});

2. UploadSettings

ファイルのアップロード動作と検証を制御します。

Property	Type	Default	Description
allowedExtensions	string	""	許可するファイル拡張子（カンマ区切り。例：".jpg,.png,.pdf"）
autoClose	boolean	false	すべてのファイルのアップロード後にアップロードダイアログを閉じます
autoUpload	boolean	true	選択後、自動的にファイルをアップロードします
chunkSize	number	0	大きなファイルをチャンク（バイト単位）に分割して順次アップロードします
directoryUpload	boolean	false	フォルダー／ディレクトリのアップロードを許可します
maxFileSize	number	30000000	ファイルサイズの最大値（バイト単位。デフォルト：30MB）
minFileSize	number	0	ファイルサイズの最小値（バイト単位）
sequentialUpload	boolean	false	ファイルを一度に1つずつ順次アップロードします

const filemanager = new FileManager({
    uploadSettings: {
        allowedExtensions: '.jpg,.png,.pdf,.docx',  // Comma-separated extensions
        maxFileSize: 52428800,                      // 50 MB
        minFileSize: 1024,                          // 1 KB
        autoUpload: true,                           // Auto-upload on selection
        autoClose: false,                           // Keep dialog open after upload
        directoryUpload: true,                      // Allow folder upload
        sequentialUpload: false,                    // Upload multiple files at once
        chunkSize: 0                                // No chunking (0 = disabled)
    }
});

3. ToolbarSettings

ツールバーと利用可能なアクションをカスタマイズします。

Property	Type	Description
items	ToolBarItems[]	ツールバー項目の配列
visible	boolean	ツールバーの表示／非表示

const filemanager = new FileManager({
    toolbarSettings: {
        items: [
            'NewFolder', 'Refresh', 'Upload', 'Delete', 'Download', 
            'Rename', 'SortBy', 'View', 'Details'
        ],
        visible: true
    }
});

4. ContextMenuSettings

ファイル、フォルダー、レイアウトのコンテキストメニュー項目を設定します。

Property	Type	Description
file	string[]	ファイル用のメニュー項目
folder	string[]	フォルダー用のメニュー項目
layout	string[]	空の領域用のメニュー項目
visible	boolean	コンテキストメニューの表示／非表示

const filemanager = new FileManager({
    contextMenuSettings: {
        file: ['Open', 'Cut', 'Copy', 'Delete', 'Rename', 'Details'],
        folder: ['Open', 'Cut', 'Copy', 'Paste', 'Delete', 'Rename'],
        layout: ['Refresh', 'NewFolder', 'Paste', 'SortBy', 'View'],
        visible: true
    }
});

5. NavigationPaneSettings

左側のナビゲーションペインをカスタマイズします。

Property	Type	Default	Description
visible	boolean	true	ナビゲーションペインの表示／非表示
maxWidth	string	"200px"	ナビゲーションペインの最大幅
minWidth	string	"150px"	ナビゲーションペインの最小幅

const filemanager = new FileManager({
    navigationPaneSettings: {
        visible: true,
        maxWidth: '300px',
        minWidth: '200px'
    }
});

6. DetailsViewSettings

詳細ビューのグリッド表示を設定します。

Property	Type	Description
columns	Column[]	グリッドの列定義
hideColumns	string[]	特定の列を非表示にします

const filemanager = new FileManager({
    detailsViewSettings: {
        columns: [
            { field: 'name', headerText: 'File Name', width: '200px' },
            { field: 'dateModified', headerText: 'Date Modified', width: '150px' },
            { field: 'type', headerText: 'Type', width: '100px' },
            { field: 'size', headerText: 'Size', width: '100px' }
        ]
    }
});

7. SearchSettings

検索機能を設定します。

Property	Type	Default	Description
filterType	FilterType	"StartsWith"	検索の一致方法："StartsWith"、"Contains"、"EndsWith"
ignoreCase	boolean	true	大文字と小文字を区別しない検索

const filemanager = new FileManager({
    searchSettings: {
        filterType: 'Contains',
        ignoreCase: true
    }
});

---

メソッドリファレンス

メソッド一覧 - 27以上の全メソッド

ファイル操作メソッド

Method	Signature	Returns	Description
openFile	(id: string) => void	void	IDでファイルまたはフォルダーを開きます
deleteFiles	(ids?: string[]) => void	void	IDまたは選択項目でファイル／フォルダーを削除します
renameFile	(id?: string, name?: string) => void	void	ファイルまたはフォルダーの名前を変更します
createFolder	(name?: string) => void	void	新しいフォルダーを作成します
downloadFiles	(ids?: string[]) => void	void	ファイルまたは選択項目をダウンロードします
uploadFiles	() => void	void	アップロードダイアログを開きます
refreshFiles	() => void	void	現在のディレクトリ一覧を更新します
filterFiles	(filterData?: Object) => void	void	カスタムフィルターを適用したファイルを表示します

選択メソッド

Method	Signature	Returns	Description
selectAll	() => void	void	現在のパスにあるすべてのファイルとフォルダーを選択します
clearSelection	() => void	void	選択中のすべてのファイルとフォルダーの選択を解除します
getSelectedFiles	() => Object[]	Object[]	現在選択されているファイルの詳細を取得します

ナビゲーションと表示のメソッド

メソッド	シグネチャ	戻り値	説明
traverseBackward	() => void	void	1 つ上のディレクトリに移動します
refresh	() => void	void	コンポーネント全体を更新して再レンダリングします
refreshLayout	() => void	void	レイアウトのみを更新します

ツールバーとメニューの管理

メソッド	シグネチャ	戻り値	説明
enableToolbarItems	(items: string[]) => void	void	指定したツールバー項目を有効にします
disableToolbarItems	(items: string[]) => void	void	指定したツールバー項目を無効にします
getToolbarItemIndex	(item: string) => number	number	ツールバー項目のインデックスを取得します
enableMenuItems	(items: string[]) => void	void	指定したコンテキストメニュー項目を有効にします
disableMenuItems	(items: string[]) => void	void	指定したコンテキストメニュー項目を無効にします
getMenuItemIndex	(item: string) => number	number	メニュー項目のインデックスを取得します

ダイアログの管理

メソッド	シグネチャ	戻り値	説明
closeDialog	() => void	void	開いているダイアログをプログラムから閉じます

コンポーネントのライフサイクル

メソッド	シグネチャ	戻り値	説明
appendTo	(selector?: string | HTMLElement) => void	void	コンポーネントを DOM に追加します
destroy	() => void	void	コンポーネントを破棄します
dataBind	() => void	void	保留中のプロパティ変更を直ちに適用します
getRootElement	() => HTMLElement	HTMLElement	ルート DOM 要素を返します

イベントの管理

メソッド	シグネチャ	戻り値	説明
addEventListener	(eventName: string, handler: Function) => void	void	イベントリスナーを追加します
removeEventListener	(eventName: string, handler: Function) => void	void	イベントリスナーを削除します

モジュールの注入

メソッド	シグネチャ	戻り値	説明
Inject	(moduleList: Function[]) => void	void	必要なモジュールを動的に注入します

メソッドの使用例

// File Operations
filemanager.openFile('file-id-123');
filemanager.deleteFiles(['file1.txt', 'folder/file2.pdf']);
filemanager.renameFile('file.txt', 'renamed-file.txt');
filemanager.createFolder('New Folder');
filemanager.downloadFiles(['doc1.pdf', 'doc2.docx']);
filemanager.uploadFiles();
filemanager.refreshFiles();
filemanager.filterFiles({ action: 'customFilter', data: {...} });

// Selection Management
filemanager.selectAll();
filemanager.clearSelection();
const selected = filemanager.getSelectedFiles();
console.log(selected);  // Array of FileData objects

// Navigation
filemanager.traverseBackward();
filemanager.refresh();
filemanager.refreshLayout();

// Toolbar Control
filemanager.enableToolbarItems(['NewFolder', 'Upload', 'Delete']);
filemanager.disableToolbarItems(['Cut', 'Copy']);
const toolbarIndex = filemanager.getToolbarItemIndex('Download');

// Menu Control
filemanager.enableMenuItems(['Open', 'Delete']);
filemanager.disableMenuItems(['Rename']);
const menuIndex = filemanager.getMenuItemIndex('Details');

// Dialogs
filemanager.closeDialog();

// Module Injection
import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView);

// Event Handling
filemanager.addEventListener('fileSelect', (args) => {
    console.log('File selected:', args);
});
filemanager.removeEventListener('fileSelect', handler);

view: 'Details'

});

// Component refresh filemanager.refresh();

---

## Events Reference

### Complete Events List - All 37 Events

#### Lifecycle Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `created` | Object | Component initialized | Fires when FileManager component is created |
| `destroyed` | Object | Component destroyed | Fires when FileManager component is destroyed |

#### AJAX/Server Communication Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `beforeSend` | BeforeSendEventArgs | Before server request | Fires before AJAX request to server |
| `success` | SuccessEventArgs | After successful operation | Fires when AJAX request succeeds |
| `failure` | FailureEventArgs | After failed operation | Fires when AJAX request fails |

#### File Selection Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `fileSelect` | FileSelectEventArgs | File selected/unselected | Fires when file is selected or unselected |
| `fileSelection` | FileSelectionEventArgs | Before file selected | Fires before file is selected |

#### File Operation Events (Before)

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `beforeDelete` | DeleteEventArgs | Before delete operation | Fires before file/folder deletion |
| `beforeRename` | RenameEventArgs | Before rename operation | Fires before file/folder rename |
| `beforeFolderCreate` | FolderCreateEventArgs | Before folder creation | Fires before new folder creation |
| `beforeMove` | MoveEventArgs | Before move/paste operation | Fires when file begins to move |
| `beforeDownload` | BeforeDownloadEventArgs | Before download request | Fires before sending download request |
| `beforeImageLoad` | BeforeImageLoadEventArgs | Before image retrieval | Fires before getting image/thumbnail |

#### File Operation Events (After)

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `delete` | DeleteEventArgs | After deletion | Fires after successful file/folder deletion |
| `rename` | RenameEventArgs | After rename complete | Fires when file/folder is renamed |
| `folderCreate` | FolderCreateEventArgs | After folder created | Fires when new folder is created |
| `move` | MoveEventArgs | After paste operation | Fires when file/folder is pasted |

#### File Access Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `fileLoad` | FileLoadEventArgs | Before file rendered | Fires before file/folder is rendered |
| `fileOpen` | FileOpenEventArgs | Before file opened | Fires before file/folder is opened |

#### Drag and Drop Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `fileDragStart` | FileDragEventArgs | Drag starts | Fires when file/folder dragging starts |
| `fileDragging` | FileDragEventArgs | While dragging | Fires while dragging file/folder |
| `fileDragStop` | FileDragEventArgs | Before drop | Fires when file about to be dropped |
| `fileDropped` | FileDragEventArgs | After drop | Fires when file/folder is dropped |

#### UI Interaction Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `menuOpen` | MenuOpenEventArgs | Before menu opens | Fires before context menu opens |
| `menuClick` | MenuClickEventArgs | Menu item clicked | Fires when context menu item clicked |
| `menuClose` | MenuCloseEventArgs | Before menu closes | Fires before context menu closes |
| `toolbarCreate` | ToolbarCreateEventArgs | Before toolbar rendered | Fires before toolbar is created |
| `toolbarClick` | ToolbarClickEventArgs | Toolbar button clicked | Fires when toolbar item clicked |

#### Dialog Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `beforePopupOpen` | BeforePopupOpenCloseEventArgs | Before dialog opens | Fires before dialog/popup opens |
| `beforePopupClose` | BeforePopupOpenCloseEventArgs | Before dialog closes | Fires before dialog/popup closes |
| `popupOpen` | PopupOpenCloseEventArgs | After dialog opened | Fires when dialog/popup is opened |
| `popupClose` | PopupOpenCloseEventArgs | After dialog closed | Fires when dialog/popup is closed |

#### Search and Upload Events

| Event | EventArgs | Trigger | Description |
|-------|-----------|---------|-------------|
| `search` | SearchEventArgs | During search | Fires when search is performed |
| `uploadListCreate` | UploadListCreateArgs | Before upload item rendered | Fires before each file in upload dialog |

### Data Structure Interfaces

#### FileData (fileSystemData items)
```typescript
interface FileData {
    dateCreated?: Date;           // File/folder creation date in ISO 8601 format
    dateModified?: Date;          // Last modified date in ISO 8601 format
    filterPath: string;           // Full path from root (e.g., "", "Files/", "Files/Documents/")
    hasChild?: boolean;           // true if folder has subfolders/files, false for files
    id: string;                   // Unique identifier for the file/folder
    isFile: boolean;              // true for files, false for folders
    name: string;                 // File/folder name (display name)
    parentId?: string | null;     // Parent folder ID (null for root items)
    size?: number;                // Size in bytes
    type?: string;                // File extension or type (e.g., "folder", "pdf", "jpg")
    children?: FileData[];        // Child items for nested data structures (optional)
}

// Example Usage:
const fileData: FileData = {
    dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
    dateModified: new Date("2024-01-08T18:16:38.4384894+05:30"),
    filterPath: "",
    hasChild: true,
    id: '0',
    isFile: false,
    name: "Files",
    parentId: null,
    size: 1779448,
    type: "folder"
};

イベント引数の構造

BeforeSendEventArgs

interface BeforeSendEventArgs {
    action: string;           // AJAX action name
    ajaxSettings: Object;     // AJAX settings sent to server
    cancel: boolean;          // Set to true to cancel
}

FileSelectEventArgs

interface FileSelectEventArgs {
    action: string;           // 'select' or 'unselect'
    fileDetails: Object;      // Selected file/folder data
    isInteracted: boolean;    // True if user-triggered
}

FileSelectionEventArgs

interface FileSelectionEventArgs {
    action: string;           // 'select' or 'unselect'
    fileDetails: Object;      // File/folder being selected
    isInteracted: boolean;    // True if user-triggered
}

DeleteEventArgs

interface DeleteEventArgs {
    cancel: boolean;          // Set to true to cancel deletion
    itemData: Object[];       // Data of deleted items
    path: string;             // Current folder path
}

RenameEventArgs

interface RenameEventArgs {
    cancel: boolean;          // Set to true to cancel rename
    itemData: Object;         // Renamed item data
    newName: string;          // New file/folder name
    oldName: string;          // Original file/folder name
    path: string;             // Current folder path
}

FolderCreateEventArgs

interface FolderCreateEventArgs {
    cancel: boolean;          // Set to true to cancel creation
    itemData: Object;         // Created folder data
    path: string;             // Parent folder path
}

MoveEventArgs

interface MoveEventArgs {
    cancel: boolean;          // Set to true to cancel move
    itemData: Object[];       // Items being moved
    path: string;             // Destination path
    sourceItems: Object[];    // Source item details
}

FileDragEventArgs

interface FileDragEventArgs {
    cancel: boolean;          // Set to true to cancel drag
    element: HTMLElement;     // Drag element
    event: MouseEvent | TouchEvent;  // Native drag event
    fileDetails: Object[];    // Files being dragged
    target: HTMLElement;      // Drop target element
}

FileLoadEventArgs

interface FileLoadEventArgs {
    element: HTMLElement;     // Rendered DOM element
    fileDetails: Object;      // File/folder data
    module: string;           // Module name (DetailsView, LargeIconsView)
}

FileOpenEventArgs

interface FileOpenEventArgs {
    cancel: boolean;          // Set to true to prevent opening
    fileDetails: Object;      // Opened file/folder data
    module: string;           // Module name
}

MenuOpenEventArgs

interface MenuOpenEventArgs {
    cancel: boolean;          // Set to true to cancel menu
    element: HTMLElement;     // Context menu element
    fileDetails: Object;      // Right-clicked file/folder
    items: Object[];          // Menu items to display
}

MenuClickEventArgs

interface MenuClickEventArgs {
    cancel: boolean;          // Set to true to cancel action
    element: HTMLElement;     // Clicked menu item element
    fileDetails: Object;      // Target file/folder
    item: Object;             // Menu item clicked
}

MenuCloseEventArgs

interface MenuCloseEventArgs {
    cancel: boolean;          // Set to true to keep menu open
    element: HTMLElement;     // Context menu element
}

ToolbarCreateEventArgs

interface ToolbarCreateEventArgs {
    cancel: boolean;          // Set to true to cancel creation
    element: HTMLElement;     // Toolbar DOM element
    items: Object[];          // Toolbar items array
}

ToolbarClickEventArgs

interface ToolbarClickEventArgs {
    cancel: boolean;          // Set to true to cancel default action
    item: Object;             // Clicked toolbar item
    element: HTMLElement;     // Clicked toolbar element
}

BeforePopupOpenCloseEventArgs

interface BeforePopupOpenCloseEventArgs {
    cancel: boolean;          // Set to true to cancel
    element: HTMLElement;     // Dialog element
}

PopupOpenCloseEventArgs

interface PopupOpenCloseEventArgs {
    element: HTMLElement;     // Dialog element
    isInteracted: boolean;    // True if user-triggered
}

SearchEventArgs

interface SearchEventArgs {
    cancel: boolean;          // Set to true to cancel search
    searchString: string;     // Search query
}

UploadListCreateArgs

interface UploadListCreateArgs {
    element: HTMLElement;     // Upload item DOM element
    fileData: Object;         // File data
    index: number;            // Item index
    postData: Object;         // Upload POST data
}

SuccessEventArgs

interface SuccessEventArgs {
    action: string;           // Completed action name
    result: any;              // Operation result
}

FailureEventArgs

interface FailureEventArgs {
    action: string;           // Failed action name
    error: string;            // Error message
}

イベントハンドラーの完全な例

例 1：イベント処理を伴うファイル操作

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    
    // Before any server request
    beforeSend: (args) => {
        console.log('Action:', args.action);
        // Add authentication token
        args.ajaxSettings.headers = { 'Authorization': 'Bearer token' };
    },
    
    // File operations
    beforeDelete: (args) => {
        console.log('Deleting:', args.itemData.map(f => f.name));
        // Confirm or cancel
    },
    
    delete: (args) => {
        console.log('Deleted successfully');
    },
    
    beforeRename: (args) => {
        console.log('Renaming:', args.oldName, '→', args.newName);
    },
    
    rename: (args) => {
        console.log('Rename complete');
    },
    
    beforeFolderCreate: (args) => {
        console.log('Creating folder in:', args.path);
    },
    
    folderCreate: (args) => {
        console.log('Folder created');
    },
    
    beforeMove: (args) => {
        console.log('Moving to:', args.path);
    },
    
    move: (args) => {
        console.log('Move complete');
    }
});

例 2：選択とアクセスのイベント

const filemanager = new FileManager({
    // Selection events
    fileSelection: (args) => {
        console.log('About to select:', args.fileDetails.name);
        // Can set args.cancel = true to prevent
    },
    
    fileSelect: (args) => {
        console.log('Selected:', args.action);
        console.log('Files:', args.fileDetails.map(f => f.name));
    },
    
    // File loading
    fileLoad: (args) => {
        console.log('Rendering:', args.fileDetails.name);
        console.log('View:', args.module);
        // Can customize rendered element
    },
    
    fileOpen: (args) => {
        console.log('Opening:', args.fileDetails.name);
        if (args.fileDetails.isFile) {
            args.cancel = true;  // Prevent opening
            // Do custom action
        }
    }
});

例 3：ドラッグ＆ドロップのイベント

const filemanager = new FileManager({
    // Drag-drop lifecycle
    fileDragStart: (args) => {
        console.log('Drag started:', args.fileDetails.length, 'items');
    },
    
    fileDragging: (args) => {
        console.log('Dragging over:', args.target.id);
    },
    
    fileDragStop: (args) => {
        console.log('About to drop to:', args.target.id);
        // Can cancel with args.cancel = true
    },
    
    fileDropped: (args) => {
        console.log('Dropped successfully');
    }
});

例 4：UI 操作のイベント

const filemanager = new FileManager({
    // Toolbar events
    toolbarCreate: (args) => {
        console.log('Toolbar items:', args.items.length);
        // Can modify toolbar items before rendering
    },
    
    toolbarClick: (args) => {
        console.log('Clicked:', args.item.id);
        if (args.item.id === 'CustomButton') {
            args.cancel = true;  // Prevent default
            // Do custom action
        }
    },
    
    // Menu events
    menuOpen: (args) => {
        console.log('Menu opening for:', args.fileDetails.name);
        console.log('Menu items:', args.items.length);
    },
    
    menuClick: (args) => {
        console.log('Menu action:', args.item.id);
        if (args.item.id === 'CustomMenu') {
            // Handle custom menu item
        }
    },
    
    menuClose: (args) => {
        console.log('Menu closed');
    }
});

例 5：ダイアログのイベント

const filemanager = new FileManager({
    // Dialog/popup lifecycle
    beforePopupOpen: (args) => {
        console.log('Dialog opening');
        // Can prevent with args.cancel = true
    },
    
    popupOpen: (args) => {
        console.log('Dialog opened');
    },
    
    beforePopupClose: (args) => {
        console.log('Dialog closing');
    },
    
    popupClose: (args) => {
        console.log('Dialog closed');
    }
});

例 6：ダウンロード、アップロード、検索のイベント

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations',
        downloadUrl: 'https://api.example.com/api/FileManager/Download'
    },
    
    // Download events
    beforeDownload: (args) => {
        console.log('Downloading:', args.fileDetails.map(f => f.name));
        if (args.fileDetails.length > 5) {
            alert('Cannot download more than 5 files');
            args.cancel = true;
        }
    },
    
    beforeImageLoad: (args) => {
        console.log('Loading image/thumbnail');
    },
    
    // Upload events
    uploadListCreate: (args) => {
        console.log('Upload item for:', args.fileData.name);
        console.log('Index:', args.index);
    },
    
    // Search events
    search: (args) => {
        console.log('Searching for:', args.searchString);
    }
});

例 7：ステータス処理の全例

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    
    beforeSend: (args) => {
        console.log('Sending request:', args.action);
        // Show loading indicator
        showSpinner();
    },
    
    success: (args) => {
        console.log('✓ Success:', args.action);
        console.log('Result:', args.result);
        hideSpinner();
    },
    
    failure: (args) => {
        console.error('✗ Failure:', args.action);
        console.error('Error:', args.error);
        hideSpinner();
        showErrorMessage(args.error);
    }
});

function showSpinner() { /* Show loading UI */ }
function hideSpinner() { /* Hide loading UI */ }
function showErrorMessage(msg) { console.error(msg); }

---

UI モジュールと注入

FileManager では、各機能に応じて特定のモジュールを注入する必要があります。

利用可能なモジュール

モジュール	用途	インポート
Toolbar	アクション付きツールバーを表示します	@syncfusion/ej2-filemanager
NavigationPane	左側のナビゲーションツリー	@syncfusion/ej2-filemanager
DetailsView	グリッド形式のファイル一覧	@syncfusion/ej2-filemanager

モジュールのインジェクション例

import { FileManager, Toolbar, NavigationPane, DetailsView} from '@syncfusion/ej2-filemanager';

// Inject all modules
FileManager.Inject(Toolbar, NavigationPane, DetailsView);

// Now all features are available
const filemanager = new FileManager({
    view: 'LargeIcons', 
    ajaxSettings: { /* ... */ }
});

---

一般的なパターンとシナリオ

パターン 1：進捗表示と検証を伴うファイルのアップロード

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations',
        uploadUrl: 'https://api.example.com/api/FileManager/Upload'
    },
    uploadSettings: {
        maxFileSize: 10485760,      // 10 MB
        minFileSize: 1024,          // 1 KB
        allowedExtensions: ['.pdf', '.doc', '.docx', '.xls', '.xlsx'],
        autoUpload: false           // Manual upload
    },
    uploading: (args) => {
        console.log('Upload progress:');
        args.fileData.forEach(file => {
            console.log(`  ${file.name}: ${file.size} bytes`);
        });
    },
    success: (args) => {
        if (args.action === 'upload') {
            console.log('Upload completed successfully');
        }
    },
    failure: (args) => {
        console.error('Upload failed:', args.error);
    }
});

filemanager.appendTo('#filemanager');

パターン 2：検証機能付きのカスタムコンテキストメニュー

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    contextMenuSettings: {
        file: ['Open', 'Cut', 'Copy', 'Delete', '|', 'Rename', 'Details'],
        folder: ['Open', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename'],
        layout: ['Refresh', 'NewFolder', 'Paste', '|', 'SortBy', 'View']
    },
    menuClick: (args) => {
        if (args.item.text === 'Delete') {
            const confirmed = confirm(`Delete "${args.fileDetails.name}"?`);
            if (!confirmed) {
                args.cancel = true;
            }
        }
    }
});

filemanager.appendTo('#filemanager');

パターン 3：一括操作が可能な複数選択

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    allowMultiSelection: true,
    enableRangeSelection: true,
    fileSelect: (args) => {
        const selectedFiles = filemanager.getSelectedFiles();
        console.log(`${selectedFiles.length} files selected`);
        
        // Update bulk action buttons
        updateBulkActionButtons(selectedFiles.length > 0);
    }
});

function bulkDownload() {
    const selected = filemanager.getSelectedFiles();
    if (selected.length > 0) {
        filemanager.downloadFiles();  // Downloads selected files
    }
}

function bulkDelete() {
    const selected = filemanager.getSelectedFiles();
    if (selected.length > 0 && confirm(`Delete ${selected.length} files?`)) {
        filemanager.deleteFiles();  // Deletes selected files
    }
}

filemanager.appendTo('#filemanager');

パターン 4：カスタム処理を伴うドラッグ＆ドロップ

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    allowDragAndDrop: true,
    fileDragStart: (args) => {
        console.log('Starting drag operation for:', args.fileDetails.length, 'items');
    },
    fileDragging: (args) => {
        // Check if drop target is valid during dragging
        const isValidTarget = args.target?.classList?.contains('drop-zone');
        if (!isValidTarget) {
            args.element.style.opacity = '0.5';  // Visual feedback
        }
    },
    fileDragStop: (args) => {
        // Perform validation before drop
        console.log('About to drop on:', args.target.id);
    },
    fileDropped: (args) => {
        // Called after successful drop
        const files = args.fileDetails.map(f => f.name);
        console.log('Files dropped successfully:', files);
    }
});

filemanager.appendTo('#filemanager');

パターン 5：ローカライズと RTL 対応

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    locale: 'ar-AE',                    // Arabic (e.g., ar-AE, fr-FR, de-DE)
    enableRtl: true,                    // Right-to-Left rendering
    enablePersistence: true,            // Remember user settings
    cssClass: 'rtl-theme'              // Apply RTL-specific styles
});

// To change language at runtime
function changeLanguage(languageCode) {
    // Destroy current instance
    filemanager.destroy();
    
    // Create new instance with different locale
    const newFileManager = new FileManager({
        locale: languageCode,
        enableRtl: true,
        ajaxSettings: {
            url: 'https://api.example.com/api/FileManager/FileOperations'
        }
    });
    
    newFileManager.appendTo('#filemanager');
}

filemanager.appendTo('#filemanager');

パターン 6：アクセス制御と権限

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations',
        beforeSend: (args) => {
            // Add user token for authorization
            args.headers = {
                'Authorization': 'Bearer ' + getUserToken()
            };
        }
    },
    toolbarSettings: {
        items: ['NewFolder', 'Upload', 'Download', 'Delete', 'Refresh']
    },
    menuClick: (args) => {
        // Check permissions before allowing delete
        if (args.item.text === 'Delete' && !userHasPermission('delete')) {
            alert('You do not have permission to delete files');
            args.cancel = true;
        }
    }
});

filemanager.appendTo('#filemanager');

パターン 7：包括的なファイルシステムのデータ構造

複数のファイルタイプ、ネストされたフォルダー、オプションのプロパティを含む、実際のユースケースに即した完全な例です。

import { FileManager, Toolbar, NavigationPane, DetailsView, LargeIconsView, ContextMenu } from '@syncfusion/ej2-filemanager';

FileManager.Inject(Toolbar, NavigationPane, DetailsView, LargeIconsView, ContextMenu);

// Complete file system data with 19 items showing various scenarios
const fileSystemData = [
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T18:16:38.4384894+05:30"),
        filterPath: "",
        hasChild: true,
        id: '0',
        isFile: false,
        name: "Files",
        parentId: null,
        size: 1779448,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\",
        hasChild: false,
        id: '1',
        isFile: false,
        name: "Documents",
        parentId: '0',
        size: 680786,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\",
        hasChild: false,
        id: "2",
        isFile: false,
        name: "Downloads",
        parentId: "0",
        size: 6172,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\",
        hasChild: false,
        id: "3",
        isFile: false,
        name: "Music",
        parentId: "0",
        size: 20,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\",
        hasChild: true,
        id: "4",
        isFile: false,
        name: "Pictures",
        parentId: "0",
        size: 228465,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\",
        hasChild: false,
        id: "5",
        isFile: false,
        name: "Videos",
        parentId: "0",
        size: 20,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Documents\\",
        hasChild: false,
        id: "6",
        isFile: true,
        name: "EJ2_File_Manager",
        parentId: "1",
        size: 12403,
        type: "docx"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Documents\\",
        hasChild: false,
        id: "7",
        isFile: true,
        name: "EJ2_File_Manager",
        parentId: "1",
        size: 90099,
        type: "pdf"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Documents\\",
        hasChild: false,
        id: "8",
        isFile: true,
        name: "File_Manager_PPT",
        parentId: "1",
        size: 578010,
        type: "pptx"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Documents\\",
        hasChild: false,
        id: "9",
        isFile: true,
        name: "File_Manager",
        parentId: "1",
        size: 274,
        type: "txt"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Downloads\\",
        hasChild: false,
        id: "10",
        isFile: true,
        name: "Sample_Work_Sheet",
        parentId: "2",
        size: 6172,
        type: "xlsx"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Music\\",
        hasChild: false,
        id: "11",
        isFile: true,
        name: "Music",
        parentId: "3",
        size: 10,
        type: "mp3"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Music\\",
        hasChild: false,
        id: "12",
        isFile: true,
        name: "Sample_Music",
        parentId: "3",
        size: 10,
        type: "mp3"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Videos\\",
        hasChild: false,
        id: "13",
        isFile: true,
        name: "Demo_Video",
        parentId: "5",
        size: 10,
        type: "mp4"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Videos\\",
        hasChild: false,
        id: "14",
        isFile: true,
        name: "Sample_Video",
        parentId: "5",
        size: 10,
        type: "mp4"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Pictures\\",
        hasChild: true,
        id: '15',
        isFile: false,
        name: "Employees",
        parentId: '4',
        size: 237568,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Pictures\\Employees\\",
        hasChild: false,
        id: '16',
        isFile: true,
        name: "Albert",
        parentId: '15',
        size: 53248,
        type: "png",
        imageUrl: "https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Pictures\\Employees\\",
        hasChild: false,
        id: '17',
        isFile: true,
        name: "Nancy",
        parentId: '15',
        size: 65536,
        type: "png",
        imageUrl: "https://ej2.syncfusion.com/demos/src/avatar/images/pic02.png"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Pictures\\Employees\\",
        hasChild: false,
        id: '18',
        isFile: true,
        name: "Michael",
        parentId: '15',
        size: 69632,
        type: "png",
        imageUrl: "https://ej2.syncfusion.com/demos/src/avatar/images/pic03.png"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        filterPath: "\\Pictures\\Employees\\",
        hasChild: false,
        id: '19',
        isFile: true,
        name: "Robert",
        parentId: '15',
        size: 48951,
        type: "png",
        imageUrl: "https://ej2.syncfusion.com/demos/src/avatar/images/pic04.png"
    }
];

const filemanager = new FileManager({
    fileSystemData: fileSystemData,
    height: '100%',
    width: '100%',
    view: 'Details'
});

filemanager.appendTo('#filemanager');

---

高度な統合

カスタムファイルプロバイダーの統合

class CustomFileProvider {
    async readDirectory(path: string): Promise<any[]> {
        const response = await fetch(`/api/files?path=${path}`);
        return response.json();
    }
    
    async uploadFile(file: File, path: string): Promise<void> {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('path', path);
        await fetch('/api/upload', { method: 'POST', body: formData });
    }
}

const provider = new CustomFileProvider();

const filemanager = new FileManager({
    ajaxSettings: {
        url: '/api/filemanager/operations'
    }
});

filemanager.appendTo('#filemanager');

状態の永続化

const filemanager = new FileManager({
    enablePersistence: true,  // Automatically saves:
                              // - Current view (LargeIcons/Details)
                              // - Current path
                              // - Selected items
    
    // Optional: Manual state management
    beforeUnload: () => {
        const state = {
            path: filemanager.path,
            view: filemanager.view,
            selected: filemanager.getSelectedFiles()
        };
        localStorage.setItem('fm-state', JSON.stringify(state));
    }
});

filemanager.appendTo('#filemanager');

大規模なリストの仮想スクロール

const filemanager = new FileManager({
    ajaxSettings: {
        url: 'https://api.example.com/api/FileManager/FileOperations'
    },
    enableVirtualization: true,         // Enable virtual scrolling
    view: 'Details',                    // Works best with Details view
    height: '500px'                     // Fixed height required
});

filemanager.appendTo('#filemanager');

---

ベストプラクティス

1. AJAX 設定を必ず構成する

   • 正しいサーバーエンドポイントを設定します
   • 認証トークンを含めます
   • CORS を適切に処理します

2. エラー処理を実装する

   • failure イベントを使用してエラーを捕捉します
   • ユーザーにわかりやすいエラーメッセージを表示します
   • デバッグ用にエラーをログに記録します

3. パフォーマンスを最適化する

   • 大規模なリストでは仮想化を有効にします
   • ディレクトリにはページネーションを使用します
   • ファイルのアップロードを圧縮します

4. セキュリティに関する考慮事項

   • HTML サニタイザーを有効にします
   • クライアントとサーバーでファイルタイプを検証します
   • サーバー側のアクセス制御を実装します
   • 機密性の高い操作では HTTPS を使用します

5. UX を最適化する

   • 適切なファイルサイズの上限を設定します
   • 明確なアップロード進捗を表示します
   • 利便性を高めるため、ドラッグ＆ドロップを有効にします
   • キーボードショートカットに対応します

6. ローカライズに対応する

   • 適切なロケールを設定します
   • 右から左に記述する言語の RTL に対応します
   • カスタム項目の翻訳を用意します

7. テストシナリオ

   • 大容量ファイルでテストします
   • さまざまなファイルタイプでテストします
   • 権限に関するシナリオをテストします
   • 複数のブラウザーでテストします

---

API 互換性マトリクス

機能	LargeIcons	Details	Toolbar	Navigation	Download	Upload
表示の切り替え	✓	✓	✓	-	-	-
ファイルの選択	✓	✓	✓	-	✓	-
ドラッグ＆ドロップ	✓	✓	-	-	-	✓
コンテキストメニュー	✓	✓	-	-	✓	-
並べ替え	-	✓	✓	-	-	-
検索	✓	✓	✓	-	-	-
サムネイル	✓	-	-	✓	-	-
仮想化	-	✓	-	✓	-	-

---

まとめ

この包括的なスキルでは、以下を網羅しています。

✅ API を 100% 網羅：すべてのプロパティ、メソッド、イベントを解説
✅ 設定オブジェクト：すべての設定を例とともに解説
✅ イベント処理：イベントのライフサイクル全体を例とともに解説
✅ UI モジュール：適切なモジュールのインジェクションと使用方法
✅ 一般的なパターン：実際のユースケースのシナリオ
✅ ベストプラクティス：本番環境向けのガイドライン
✅ TypeScript 対応：完全な型安全性
✅ 例：すべての機能の動作するコード

トピックごとの詳細については、上記のナビゲーションガイドの各セクションを参照してください。各リファレンスドキュメントでは、詳しい説明と追加の例を紹介しています。