How do I install the Syncfusion Javascript File Manager skill?

Run npx skillmds@latest add syncfusion/syncfusion-javascript-file-manager in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Syncfusion Javascript File Manager skill do?

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. It is listed under Web & Frontend on SkillMD.

Is Syncfusion Javascript File Manager safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Syncfusion Javascript File Manager?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Syncfusion Javascript File Manager free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Syncfusion Javascript File Manager?

syncfusion (@syncfusion) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Syncfusion Javascript File Manager by syncfusion

Name: Syncfusion Javascript File Manager
Author: syncfusion

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
Quick Start
Complete Navigation Guide
Core Properties Reference
Configuration Objects
Methods Reference
Events Reference
UI Modules and Injection
Common Patterns and Scenarios
Advanced Integration
Best Practices
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

Topics: Installation, setup, CSS imports, basic initialization, rendering, configuration

File Operations & API Integration

📄 Read: references/file-operations.md

Topics: Upload/download, CRUD operations, directory upload, search functionality

📄 Read: 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

Topics: CSS customization, toolbar customization, context menus, navigation pane templates

Views & Navigation

📄 Read: references/navigation-and-views.md

Topics: View modes (Details, Large Icons), breadcrumbs, navigation pane, virtualization

Advanced Features

📄 Read: references/advanced-features.md

Topics: Drag-and-drop, multi-selection, range selection, localization, RTL, access control

Configuration & Data Binding

📄 Read: references/advanced-configuration.md

Topics: Custom providers, data structures (nested/flat), sorting, validation, access control

📄 Read: references/data-binding.md

Topics: AJAX settings, custom providers, server communication, request/response handling

File System Providers

📄 Read: references/file-system-providers-detailed.md

Topics: 10 complete providers with setup, configurations, and examples

Localization

📄 Read: 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)
```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

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

filemanager.appendTo('#filemanager');

Pattern 2: Custom Context Menu with Validation

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

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)

Syncfusion Javascript File Manager

File contents