# Syncfusion Javascript File Manager

> Build file management interfaces with Syncfusion JavaScript FileManager component. Use this when creating file browsers, implementing file operations, enabling upload/download functionality, customizing toolbars and context menus, configuring drag-and-drop, and implementing data binding for file systems. Covers virtualization, access control, localization, and enterprise-grade file operations.

- Skill: `syncfusion/syncfusion-javascript-file-manager` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-javascript-file-manager`
- Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-javascript-file-manager/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: syncfusion (https://skillmd.com/u/syncfusion)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/syncfusion/syncfusion-javascript-file-manager

---


# Implementing Syncfusion TypeScript FileManager - Complete Reference

The Syncfusion FileManager component is an enterprise-grade, web-based file management system for browsing, managing, and organizing files and folders. It provides a comprehensive set of file operations, customization options, and advanced features including drag-and-drop, virtualization, multi-language support, RTL rendering, and role-based access control.

## Table of Contents

1. [When to Use This Skill](#when-to-use-this-skill)
2. [Quick Start](#quick-start)
3. [Complete Navigation Guide](#complete-navigation-guide)
4. [Core Properties Reference](#core-properties-reference)
5. [Configuration Objects](#configuration-objects)
6. [Methods Reference](#methods-reference)
7. [Events Reference](#events-reference)
8. [UI Modules and Injection](#ui-modules-and-injection)
9. [Common Patterns and Scenarios](#common-patterns-and-scenarios)
10. [Advanced Integration](#advanced-integration)
11. [Best Practices](#best-practices)
12. [API Compatibility Matrix](#api-compatibility-matrix)

---

## When to Use This Skill

**Use this skill when:**
- Creating enterprise-grade file browser or document management interface
- Implementing complete file upload/download functionality with validation
- Customizing toolbars, context menus, and views for specific workflows
- Building multi-select file selection interfaces with range selection
- Implementing advanced drag-and-drop file handling with custom validation
- Integrating custom file system providers (Physical, Azure, S3, etc.)
- Applying localization, RTL support, and multi-language interfaces
- Implementing access control and role-based permissions
- Optimizing large file lists with virtualization
- Performing custom sorting, filtering, and searching
- Building nested or flat data structures for files
- Persisting component state across sessions
- Customizing thumbnails and file previews
- Building directory upload functionality

---

## Quick Start

### Minimal Setup

```typescript
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 Template

First, install the Fluent 2 theme package:

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

Then reference the theme CSS in your `index.css` file (the `index.css` for FileManager auto-loads all required dependency styles):

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

Then create a basic HTML container:

```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>
```

---

## Complete Navigation Guide

### Getting Started & Basics
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- **Topics:** Installation, setup, CSS imports, basic initialization, rendering, configuration

### File Operations & API Integration
📄 **Read:** [references/file-operations.md](references/file-operations.md)
- **Topics:** Upload/download, CRUD operations, directory upload, search functionality

📄 **Read:** [references/file-operations-detailed.md](references/file-operations-detailed.md)
- **Topics:** Complete request/response parameters, all 11 operations, error codes, TypeScript types

### Styling, Customization & UI
📄 **Read:** [references/styling-and-ui.md](references/styling-and-ui.md)
- **Topics:** CSS customization, toolbar customization, context menus, navigation pane templates

### Views & Navigation
📄 **Read:** [references/navigation-and-views.md](references/navigation-and-views.md)
- **Topics:** View modes (Details, Large Icons), breadcrumbs, navigation pane, virtualization

### Advanced Features
📄 **Read:** [references/advanced-features.md](references/advanced-features.md)
- **Topics:** Drag-and-drop, multi-selection, range selection, localization, RTL, access control

### Configuration & Data Binding
📄 **Read:** [references/advanced-configuration.md](references/advanced-configuration.md)
- **Topics:** Custom providers, data structures (nested/flat), sorting, validation, access control

📄 **Read:** [references/data-binding.md](references/data-binding.md)
- **Topics:** AJAX settings, custom providers, server communication, request/response handling

### File System Providers
📄 **Read:** [references/file-system-providers-detailed.md](references/file-system-providers-detailed.md)
- **Topics:** 10 complete providers with setup, configurations, and examples

### Localization
📄 **Read:** [references/localization-and-internationalization.md](references/localization-and-internationalization.md)
- **Topics:** Multi-language support, locales, RTL rendering, custom translations

---

## Core Properties Reference

### Complete Properties List

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `ajaxSettings` | `AjaxSettingsModel` | {} | AJAX configuration for server communication |
| `allowDragAndDrop` | `boolean` | false | Enable drag-and-drop operations |
| `allowMultiSelection` | `boolean` | true | Enable multiple file selection |
| `contextMenuSettings` | `ContextMenuSettingsModel` | {...} | Context menu configuration |
| `cssClass` | `string` | "" | CSS class for custom styling |
| `detailsViewSettings` | `DetailsViewSettingsModel` | {...} | Details view grid configuration |
| `enableHtmlSanitizer` | `boolean` | true | Sanitize HTML to prevent XSS |
| `enablePersistence` | `boolean` | false | Persist view, path, and selection state |
| `enableRangeSelection` | `boolean` | false | Enable Shift+Click range selection |
| `enableRtl` | `boolean` | false | Render in RTL direction |
| `enableVirtualization` | `boolean` | false | Enable virtualization for large lists |
| `fileSystemData` | `FileData[]` | [] | Local file system data array. Each item must have: `dateCreated`, `dateModified`, `filterPath`, `hasChild`, `id`, `isFile`, `name`, `parentId`, `size`, `type` |
| `height` | `string \| number` | "400px" | Component height |
| `largeIconsTemplate` | `string \| Function` | null | Custom template for large icons view |
| `locale` | `string` | "en-US" | Localization language code |
| `navigationPaneSettings` | `NavigationPaneSettingsModel` | {...} | Navigation pane configuration |
| `navigationPaneTemplate` | `string \| Function` | null | Custom template for navigation pane |
| `path` | `string` | "/" | Current file path to display |
| `popupTarget` | `HTMLElement \| string` | null | Dialog popup target element |
| `rootAliasName` | `string` | null | Root folder display name |
| `searchSettings` | `SearchSettingsModel` | {...} | Search configuration |
| `selectedItems` | `string[]` | [] | Pre-selected files/folders |
| `showFileExtension` | `boolean` | true | Show file extensions in listings |
| `showHiddenItems` | `boolean` | false | Include hidden files in listing |
| `showItemCheckBoxes` | `boolean` | true | Display checkboxes on hover |
| `showThumbnail` | `boolean` | true | Display file thumbnails |
| `sortBy` | `string` | "name" | Sorting field name |
| `sortComparer` | `SortComparer \| string` | null | Custom sorting function |
| `sortOrder` | `SortOrder` | "Ascending" | Sort direction (Ascending, Descending, None) |
| `toolbarItems` | `ToolbarItemModel[]` | [] | Custom toolbar items array |
| `toolbarSettings` | `ToolbarSettingsModel` | {...} | Toolbar configuration |
| `uploadSettings` | `UploadSettingsModel` | {...} | File upload configuration |
| `view` | `ViewType` | "LargeIcons" | Initial view type (LargeIcons or Details) |
| `width` | `string \| number` | "100%" | Component width |

### Property Examples

```typescript
// 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
});
```

---

## Configuration Objects

### 1. AjaxSettings

Configures server endpoints for file operations.

| Property | Type | Description |
|----------|------|-------------|
| `url` | `string` | Server endpoint for file operations (read, create, delete, etc.) |
| `uploadUrl` | `string` | Server endpoint for file upload |
| `downloadUrl` | `string` | Server endpoint for file download |
| `getImageUrl` | `string` | Server endpoint for image/thumbnail retrieval |

```typescript
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

Controls file upload behavior and validation.

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `allowedExtensions` | `string` | "" | Allowed file extensions (comma-separated, e.g., ".jpg,.png,.pdf") |
| `autoClose` | `boolean` | false | Close upload dialog after uploading all files |
| `autoUpload` | `boolean` | true | Automatically upload files after selection |
| `chunkSize` | `number` | 0 | Split large files into chunks (bytes) for sequential upload |
| `directoryUpload` | `boolean` | false | Allow folder/directory upload |
| `maxFileSize` | `number` | 30000000 | Maximum file size in bytes (default: 30MB) |
| `minFileSize` | `number` | 0 | Minimum file size in bytes |
| `sequentialUpload` | `boolean` | false | Upload files one at a time sequentially |

```typescript
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

Customizes the toolbar and available actions.

| Property | Type | Description |
|----------|------|-------------|
| `items` | `ToolBarItems[]` | Array of toolbar items |
| `visible` | `boolean` | Show/hide toolbar |

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

### 4. ContextMenuSettings

Configures context menu items for files, folders, and layout.

| Property | Type | Description |
|----------|------|-------------|
| `file` | `string[]` | Menu items for files |
| `folder` | `string[]` | Menu items for folders |
| `layout` | `string[]` | Menu items for empty area |
| `visible` | `boolean` | Show/hide context menu |

```typescript
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

Customizes the left navigation pane.

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `visible` | `boolean` | true | Show/hide navigation pane |
| `maxWidth` | `string` | "200px" | Maximum width of navigation pane |
| `minWidth` | `string` | "150px" | Minimum width of navigation pane |

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

### 6. DetailsViewSettings

Configures the grid display in Details view.

| Property | Type | Description |
|----------|------|-------------|
| `columns` | `Column[]` | Column definitions for grid |
| `hideColumns` | `string[]` | Hide specific columns |

```typescript
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

Configures search functionality.

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `filterType` | `FilterType` | "StartsWith" | Search matching: "StartsWith", "Contains", "EndsWith" |
| `ignoreCase` | `boolean` | true | Case-insensitive search |

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

---

## Methods Reference

### Complete Methods List - All 27+ Methods

#### File Operation Methods

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `openFile` | `(id: string) => void` | void | Opens a file or folder by ID |
| `deleteFiles` | `(ids?: string[]) => void` | void | Deletes files/folders by IDs or selected items |
| `renameFile` | `(id?: string, name?: string) => void` | void | Renames a file or folder |
| `createFolder` | `(name?: string) => void` | void | Creates a new folder |
| `downloadFiles` | `(ids?: string[]) => void` | void | Downloads files or selected items |
| `uploadFiles` | `() => void` | void | Opens upload dialog |
| `refreshFiles` | `() => void` | void | Refreshes current directory listing |
| `filterFiles` | `(filterData?: Object) => void` | void | Displays custom filtered files |

#### Selection Methods

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `selectAll` | `() => void` | void | Selects all files and folders in current path |
| `clearSelection` | `() => void` | void | Deselects all selected files and folders |
| `getSelectedFiles` | `() => Object[]` | Object[] | Gets details of currently selected files |

#### Navigation and View Methods

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `traverseBackward` | `() => void` | void | Navigates backward (parent directory) |
| `refresh` | `() => void` | void | Refreshes and re-renders entire component |
| `refreshLayout` | `() => void` | void | Refreshes only the layout |

#### Toolbar and Menu Management

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `enableToolbarItems` | `(items: string[]) => void` | void | Enables specified toolbar items |
| `disableToolbarItems` | `(items: string[]) => void` | void | Disables specified toolbar items |
| `getToolbarItemIndex` | `(item: string) => number` | number | Gets index of toolbar item |
| `enableMenuItems` | `(items: string[]) => void` | void | Enables specified context menu items |
| `disableMenuItems` | `(items: string[]) => void` | void | Disables specified context menu items |
| `getMenuItemIndex` | `(item: string) => number` | number | Gets index of menu item |

#### Dialog Management

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `closeDialog` | `() => void` | void | Programmatically closes open dialogs |

#### Component Lifecycle

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `appendTo` | `(selector?: string \| HTMLElement) => void` | void | Appends component to DOM |
| `destroy` | `() => void` | void | Destroys the component |
| `dataBind` | `() => void` | void | Applies pending property changes immediately |
| `getRootElement` | `() => HTMLElement` | HTMLElement | Returns the root DOM element |

#### Event Management

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `addEventListener` | `(eventName: string, handler: Function) => void` | void | Adds event listener |
| `removeEventListener` | `(eventName: string, handler: Function) => void` | void | Removes event listener |

#### Module Injection

| Method | Signature | Returns | Description |
|--------|-----------|---------|-------------|
| `Inject` | `(moduleList: Function[]) => void` | void | Dynamically injects required modules |

### Method Usage Examples

```typescript
// 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"
};
```

### Event Argument Structures

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

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

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

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

#### RenameEventArgs
```typescript
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
```typescript
interface FolderCreateEventArgs {
    cancel: boolean;          // Set to true to cancel creation
    itemData: Object;         // Created folder data
    path: string;             // Parent folder path
}
```

#### MoveEventArgs
```typescript
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
```typescript
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
```typescript
interface FileLoadEventArgs {
    element: HTMLElement;     // Rendered DOM element
    fileDetails: Object;      // File/folder data
    module: string;           // Module name (DetailsView, LargeIconsView)
}
```

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

#### MenuOpenEventArgs
```typescript
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
```typescript
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
```typescript
interface MenuCloseEventArgs {
    cancel: boolean;          // Set to true to keep menu open
    element: HTMLElement;     // Context menu element
}
```

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

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

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

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

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

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

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

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

### Complete Event Handler Examples

#### Example 1: File Operations with Event Handling
```typescript
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');
    }
});
```

#### Example 2: Selection and Access Events
```typescript
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
        }
    }
});
```

#### Example 3: Drag and Drop Events
```typescript
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');
    }
});
```

#### Example 4: UI Interaction Events
```typescript
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');
    }
});
```

#### Example 5: Dialog Events
```typescript
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');
    }
});
```

#### Example 6: Download, Upload, and Search Events
```typescript
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);
    }
});
```

#### Example 7: Complete Status Handling
```typescript
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 Modules and Injection

The FileManager requires specific modules to be injected for different features:

### Available Modules

| Module | Purpose | Import |
|--------|---------|--------|
| `Toolbar` | Display toolbar with actions | `@syncfusion/ej2-filemanager` |
| `NavigationPane` | Left navigation tree | `@syncfusion/ej2-filemanager` |
| `DetailsView` | Grid-based file listing | `@syncfusion/ej2-filemanager` |

### Module Injection Examples

```typescript
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: { /* ... */ }
});
```

---

## Common Patterns and Scenarios

### Pattern 1: File Upload with Progress and Validation

```typescript
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');
```

### Pattern 2: Custom Context Menu with Validation

```typescript
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');
```

### Pattern 3: Multi-Select with Bulk Operations

```typescript
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');
```

#

…(truncated)