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.

[When to Use This Skill](#when-to-use-this-skill)
[Quick Start](#quick-start)
[Complete Navigation Guide](#complete-navigation-guide)
[Core Properties Reference](#core-properties-reference)
[Configuration Objects](#configuration-objects)
[Methods Reference](#methods-reference)
[Events Reference](#events-reference)
[UI Modules and Injection](#ui-modules-and-injection)
[Common Patterns and Scenarios](#common-patterns-and-scenarios)
[Advanced Integration](#advanced-integration)
[Best Practices](#best-practices)
[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

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:

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):

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

Then create a basic HTML container:

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

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

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

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

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

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

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

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

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

// 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)

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

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 }


### Complete Event Handler Examples

#### Example 1: File Operations with Event Handling

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

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

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

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

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

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

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

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

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); } });