Name: Implementing Syncfusion TypeScript FileManager - Complete Reference
Author: syncfusion

Implementing Syncfusion TypeScript FileManager - Complete Reference | Skills Pool

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

<!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>
    
    <!-- CSS Themes (choose one: fluent2, bootstrap5, material, tailwind, highcontrast, etc.) -->
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-grids/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-filemanager/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-icons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/latest/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet" />
    
    <!-- Alternative Themes: bootstrap5.css, bootstrap4.css, bootstrap.css, 
         material.css, material-dark.css, tailwind.css, highcontrast.css, fluent.css -->
</head>
<body>
    <div id="filemanager"></div>
    <script src="index.js"></script>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


---

## 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"
};

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

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

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

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

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
}

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

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

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
}

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

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

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
}

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
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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`

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

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

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

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

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

filemanager.appendTo('#filemanager');

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

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

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

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

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

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

filemanager.appendTo('#filemanager');

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

const provider = new CustomFileProvider();

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

filemanager.appendTo('#filemanager');

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

filemanager.appendTo('#filemanager');

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

filemanager.appendTo('#filemanager');

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

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

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

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

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

Implementing Syncfusion TypeScript FileManager - Complete Reference

Table of Contents

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

Pattern 5: Localization and RTL Support

Pattern 6: Access Control and Permissions

Pattern 7: Comprehensive File System Data Structure