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.

Jump to install

Repository: syncfusion/javascript-ui-controls-skills
Last source activity: July 21, 2026 at 05:08
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-file-manager

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

11 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

File Explorer

11 files

SKILL.md

Source instructions · Read-only preview

name	syncfusion-javascript-file-manager
description	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.
metadata	{"author":"Syncfusion Inc","version":"34.1.29","category":"File Management"}

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

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.([, ]);
filemanager.([]);
 menuIndex = filemanager.();


filemanager.();


 { , , ,  }  ;
.(, , );


filemanager.(,  {
    .(, args);
});
filemanager.(, 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) => {
        .();
    },
    
    :  {
        .(, args.);
    },
    
    :  {
        .();
    },
    
    :  {
        .(, args.);
    },
    
    :  {
        .();
    }
});

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);
         (args..) {
            args. = ;  
            
        }
    }
});

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.);
         (args.. === ) {
            
        }
    },
    
    :  {
        .();
    }
});

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
    :  {
        .(, args.);
    }
});

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 */ }
 () { .(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.);
    }
});

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.();

Pattern 4: Drag-and-Drop with Custom Handling

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

filemanager.();

Pattern 5: Localization and RTL Support

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

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

filemanager.appendTo('#filemanager');

Pattern 6: Access Control and Permissions

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

filemanager.appendTo('#filemanager');

Pattern 7: Comprehensive File System Data Structure

Complete real-world example with multiple file types, nested folders, and optional properties:

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

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

// Complete file system data with 19 items showing various scenarios
const fileSystemData = [
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T18:16:38.4384894+05:30"),
        filterPath: "",
        hasChild: true,
        id: '0',
        isFile: false,
        name: "Files",
        parentId: null,
        size: 1779448,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    }
];

 filemanager =  ({
    : fileSystemData,
    : ,
    : ,
    : 
});

filemanager.();

Advanced Integration

Custom File Provider Integration

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

const provider = new CustomFileProvider();

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

filemanager.appendTo('#filemanager');

State Persistence

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

filemanager.appendTo('#filemanager');

Virtual Scrolling for Large Lists

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

filemanager.appendTo('#filemanager');

Best Practices

Always Configure AJAX Settings
- Set correct server endpoints
- Include authentication tokens
- Handle CORS properly
Implement Error Handling
- Use failure event to catch errors
- Provide user-friendly error messages
- Log errors for debugging
Optimize Performance
- Enable virtualization for large lists
- Use pagination for directories
- Compress file uploads
Security Considerations
- Enable HTML sanitizer
- Validate file types on client and server
- Implement server-side access control
- Use HTTPS for sensitive operations
UX Optimization
- Set reasonable file size limits
- Provide clear upload progress
- Enable drag-and-drop for convenience
- Support keyboard shortcuts
Localization Support
- Set appropriate locale
- Support RTL for right-to-left languages
- Provide translations for custom items
Testing Scenarios
- Test with large files
- Test with various file types
- Test permission scenarios
- Test across browsers

API Compatibility Matrix

Feature	LargeIcons	Details	Toolbar	Navigation	Download	Upload
View switching	✓	✓	✓	-	-	-
File selection	✓	✓	✓	-	✓	-
Drag-drop	✓	✓	-	-	-	✓
Context menu	✓	✓	-	-	✓	-
Sorting	-	✓	✓	-	-	-
Search	✓	✓	✓	-	-	-
Thumbnails	✓	-	-	✓	-	-
Virtualization	-	✓	-	✓	-	-

Summary

This comprehensive Skill covers:

✅ 100% API Coverage: All properties, methods, and events documented
✅ Configuration Objects: All settings explained with examples
✅ Event Handling: Complete event lifecycle with examples
✅ UI Modules: Proper module injection and usage
✅ Common Patterns: Real-world usage scenarios
✅ Best Practices: Production-ready guidelines
✅ TypeScript Support: Full type safety
✅ Examples: Working code for every feature

For detailed topic coverage, refer to the navigation guide sections above. Each reference document provides in-depth explanations and additional examples.

name	syncfusion-javascript-file-manager
description	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.
metadata	{"author":"Syncfusion Inc","version":"34.1.29","category":"File Management"}

Implementing Syncfusion TypeScript FileManager - Complete Reference

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

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.([, ]);
filemanager.([]);
 menuIndex = filemanager.();


filemanager.();


 { , , ,  }  ;
.(, , );


filemanager.(,  {
    .(, args);
});
filemanager.(, 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) => {
        .();
    },
    
    :  {
        .(, args.);
    },
    
    :  {
        .();
    },
    
    :  {
        .(, args.);
    },
    
    :  {
        .();
    }
});

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);
         (args..) {
            args. = ;  
            
        }
    }
});

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.);
         (args.. === ) {
            
        }
    },
    
    :  {
        .();
    }
});

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
    :  {
        .(, args.);
    }
});

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 */ }
 () { .(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.);
    }
});

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.();

Pattern 4: Drag-and-Drop with Custom Handling

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

filemanager.();

Pattern 5: Localization and RTL Support

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

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

filemanager.appendTo('#filemanager');

Pattern 6: Access Control and Permissions

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

filemanager.appendTo('#filemanager');

Pattern 7: Comprehensive File System Data Structure

Complete real-world example with multiple file types, nested folders, and optional properties:

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

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

// Complete file system data with 19 items showing various scenarios
const fileSystemData = [
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T18:16:38.4384894+05:30"),
        filterPath: "",
        hasChild: true,
        id: '0',
        isFile: false,
        name: "Files",
        parentId: null,
        size: 1779448,
        type: "folder"
    },
    {
        dateCreated: new Date("2023-11-15T19:02:02.3419426+05:30"),
        dateModified: new Date("2024-01-08T16:55:20.9464164+05:30"),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    },
    {
        :  (),
        :  (),
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : 
    }
];

 filemanager =  ({
    : fileSystemData,
    : ,
    : ,
    : 
});

filemanager.();

Advanced Integration

Custom File Provider Integration

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

const provider = new CustomFileProvider();

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

filemanager.appendTo('#filemanager');

State Persistence

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

filemanager.appendTo('#filemanager');

Virtual Scrolling for Large Lists

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

filemanager.appendTo('#filemanager');

Best Practices

Always Configure AJAX Settings
- Set correct server endpoints
- Include authentication tokens
- Handle CORS properly
Implement Error Handling
- Use failure event to catch errors
- Provide user-friendly error messages
- Log errors for debugging
Optimize Performance
- Enable virtualization for large lists
- Use pagination for directories
- Compress file uploads
Security Considerations
- Enable HTML sanitizer
- Validate file types on client and server
- Implement server-side access control
- Use HTTPS for sensitive operations
UX Optimization
- Set reasonable file size limits
- Provide clear upload progress
- Enable drag-and-drop for convenience
- Support keyboard shortcuts
Localization Support
- Set appropriate locale
- Support RTL for right-to-left languages
- Provide translations for custom items
Testing Scenarios
- Test with large files
- Test with various file types
- Test permission scenarios
- Test across browsers

API Compatibility Matrix

Feature	LargeIcons	Details	Toolbar	Navigation	Download	Upload
View switching	✓	✓	✓	-	-	-
File selection	✓	✓	✓	-	✓	-
Drag-drop	✓	✓	-	-	-	✓
Context menu	✓	✓	-	-	✓	-
Sorting	-	✓	✓	-	-	-
Search	✓	✓	✓	-	-	-
Thumbnails	✓	-	-	✓	-	-
Virtualization	-	✓	-	✓	-	-

Summary

This comprehensive Skill covers:

For detailed topic coverage, refer to the navigation guide sections above. Each reference document provides in-depth explanations and additional examples.

size

type

syncfusion-javascript-file-manager

Source facts

Install options

Review the source files

More from this repository

Implementing Syncfusion TypeScript FileManager - Complete Reference

Table of Contents

When to Use This Skill

Quick Start

Minimal Setup

HTML Template

Complete Navigation Guide

Getting Started & Basics

File Operations & API Integration

Styling, Customization & UI

Views & Navigation

Advanced Features

Configuration & Data Binding

File System Providers

Localization

Core Properties Reference

Complete Properties List

Property Examples

Configuration Objects

1. AjaxSettings

2. UploadSettings

3. ToolbarSettings

4. ContextMenuSettings

5. NavigationPaneSettings

6. DetailsViewSettings

7. SearchSettings

Methods Reference

Complete Methods List - All 27+ Methods

File Operation Methods

Selection Methods

Navigation and View Methods

Toolbar and Menu Management

Dialog Management

Component Lifecycle

Event Management

Module Injection

Method Usage Examples

Event Argument Structures

BeforeSendEventArgs

FileSelectEventArgs

FileSelectionEventArgs

DeleteEventArgs

RenameEventArgs

FolderCreateEventArgs

MoveEventArgs

FileDragEventArgs

FileLoadEventArgs

FileOpenEventArgs

MenuOpenEventArgs

MenuClickEventArgs

MenuCloseEventArgs

ToolbarCreateEventArgs

ToolbarClickEventArgs

BeforePopupOpenCloseEventArgs

PopupOpenCloseEventArgs

SearchEventArgs

UploadListCreateArgs

SuccessEventArgs

FailureEventArgs

Complete Event Handler Examples

Example 1: File Operations with Event Handling

Example 2: Selection and Access Events

Example 3: Drag and Drop Events

Example 4: UI Interaction Events

Example 5: Dialog Events

Example 6: Download, Upload, and Search Events

Example 7: Complete Status Handling

UI Modules and Injection

Available Modules

Module Injection Examples

Common Patterns and Scenarios

Pattern 1: File Upload with Progress and Validation

Pattern 2: Custom Context Menu with Validation

Pattern 3: Multi-Select with Bulk Operations

Pattern 4: Drag-and-Drop with Custom Handling