syncfusion-javascript-file-manager

# Implementing Syncfusion TypeScript FileManager - Complete Reference The Syncfusion FileManager component is an enterprise-grade, web-based file management system for browsing, managing, and organizing files and folders. It provides a comprehensive set of file operations, customization options, and advanced features including drag-and-drop, virtualization, multi-language support, RTL rendering, and role-based access control. ## Table of Contents 1. [When to Use This Skill](#when-to-use-this-skill) 2. [Quick Start](#quick-start) 3. [Complete Navigation Guide](#complete-navigation-guide) 4. [Core Properties Reference](#core-properties-reference) 5. [Configuration Objects](#configuration-objects) 6. [Methods Reference](#methods-reference) 7. [Events Reference](#events-reference) 8. [UI Modules and Injection](#ui-modules-and-injection) 9. [Common Patterns and Scenarios](#common-patterns-and-scenarios) 10. [Advanced Integration](#advanced-integration) 11. [Best Practices](#best-practices) 12. [API Compatibility Matrix](#api-compatibility-matrix) --- ## When to Use This Skill **Use this skill when:** - Creating enterprise-grade file browser or document management interface - Implementing complete file upload/download functionality with validation - Customizing toolbars, context menus, and views for specific workflows - Building multi-select file selection interfaces with range selection - Implementing advanced drag-and-drop file handling with custom validation - Integrating custom file system providers (Physical, Azure, S3, etc.) - Applying localization, RTL support, and multi-language interfaces - Implementing access control and role-based permissions - Optimizing large file lists with virtualization - Performing custom sorting, filtering, and searching - Building nested or flat data structures for files - Persisting component state across sessions - Customizing thumbnails and file previews - Building directory upload functionality --- ## Quick Start ### Minimal Setup ```typescript import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager'; // Step 1: Inject required modules FileManager.Inject(Toolbar, NavigationPane, DetailsView); // Step 2: Initialize FileManager with AJAX configuration const filemanager = new FileManager({ ajaxSettings: { url: 'https://your-api.com/api/FileManager/FileOperations', getImageUrl: 'https://your-api.com/api/FileManager/GetImage', uploadUrl: 'https://your-api.com/api/FileManager/Upload', downloadUrl: 'https://your-api.com/api/FileManager/Download' }, height: '100%', width: '100%' }); // Step 3: Render to DOM element filemanager.appendTo('#filemanager'); ``` ### HTML Template First, install the Fluent 2 theme package: ```bash npm install @syncfusion/ej2-fluent2-theme --save ``` Then reference the theme CSS in your `index.css` file (the `index.css` for FileManager auto-loads all required dependency styles): ```css @import "../node_modules/@syncfusion/ej2-fluent2-theme/styles/file-manager/index.css"; ``` Then create a basic HTML container: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Syncfusion FileManager</title> <link href="index.css" rel="stylesheet" /> </head> <body> <div id="filemanager"></div> <script src="index.js"></script> </body> </html> ``` --- ## Complete Navigation Guide ### Getting Started & Basics 📄 **Read:** [references/getting-started.md](references/getting-started.md) - **Topics:** Installation, setup, CSS imports, basic initialization, rendering, configuration ### File Operations & API Integration 📄 **Read:** [references/file-operations.md](references/file-operations.md) - **Topics:** Upload/download, CRUD operations, directory upload, search functionality 📄 **Read:** [references/file-operations-detailed.md](references/file-operations-detailed.md) - **Topics:** Complete request/response parameters, all 11 operations, error codes, TypeScript types ### Styling, Customization & UI 📄 **Read:** [references/styling-and-ui.md](references/styling-and-ui.md) - **Topics:** CSS customization, toolbar customization, context menus, navigation pane templates ### Views & Navigation 📄 **Read:** [references/navigation-and-views.md](references/navigation-and-views.md) - **Topics:** View modes (Details, Large Icons), breadcrumbs, navigation pane, virtualization ### Advanced Features 📄 **Read:** [references/advanced-features.md](references/advanced-features.md) - **Topics:** Drag-and-drop, multi-selection, range selection, localization, RTL, access control ### Configuration & Data Binding 📄 **Read:** [references/advanced-configuration.md](references/advanced-configuration.md) - **Topics:** Custom providers, data structures (nested/flat), sorting, validation, access control 📄 **Read:** [references/data-binding.md](references/data-binding.md) - **Topics:** AJAX settings, custom providers, server communication, request/response handling ### File System Providers 📄 **Read:** [references/file-system-providers-detailed.md](references/file-system-providers-detailed.md) - **Topics:** 10 complete providers with setup, configurations, and examples ### Localization 📄 **Read:** [references/localization-and-internationalization.md](references/localization-and-internationalization.md) - **Topics:** Multi-language support, locales, RTL rendering, custom translations --- ## Core Properties Reference ### Complete Properties List | Property | Type | Default | Description | |----------|------|---------|-------------| | `ajaxSettings` | `AjaxSettingsModel` | {} | AJAX configuration for server communication | | `allowDragAndDrop` | `boolean` | false | Enable drag-and-drop operations | | `allowMultiSelection` | `boolean` | true | Enable multiple file selection | | `contextMenuSettings` | `ContextMenuSettingsModel` | {...} | Context menu configuration | | `cssClass` | `string` | "" | CSS class for custom styling | | `detailsViewSettings` | `DetailsViewSettingsModel` | {...} | Details view grid configuration | | `enableHtmlSanitizer` | `boolean` | true | Sanitize HTML to prevent XSS | | `enablePersistence` | `boolean` | false | Persist view, path, and selection state | | `enableRangeSelection` | `boolean` | false | Enable Shift+Click range selection | | `enableRtl` | `boolean` | false | Render in RTL direction | | `enableVirtualization` | `boolean` | false | Enable virtualization for large lists | | `fileSystemData` | `FileData[]` | [] | Local file system data array. Each item must have: `dateCreated`, `dateModified`, `filterPath`, `hasChild`, `id`, `isFile`, `name`, `parentId`, `size`, `type` | | `height` | `string \| number` | "400px" | Component height | | `largeIconsTemplate` | `string \| Function` | null | Custom template for large icons view | | `locale` | `string` | "en-US" | Localization language code | | `navigationPaneSettings` | `NavigationPaneSettingsModel` | {...} | Navigation pane configuration | | `navigationPaneTemplate` | `string \| Function` | null | Custom template for navigation pane | | `path` | `string` | "/" | Current file path to display | | `popupTarget` | `HTMLElement \| string` | null | Dialog popup target element | | `rootAliasName` | `string` | null | Root folder display name | | `searchSettings` | `SearchSettingsModel` | {...} | Search configuration | | `selectedItems` | `string[]` | [] | Pre-selected files/folders | | `showFileExtension` | `boolean` | true | Show file extensions in listings | | `showHiddenItems` | `boolean` | false | Include hidden files in listing | | `showItemCheckBoxes` | `boolean` | true | Display checkboxes on hover | | `showThumbnail` | `boolean` | true | Display file thumbnails | | `sortBy` | `string` | "name" | Sorting field name | | `sortComparer` | `SortComparer \| string` | null | Custom sorting function | | `sortOrder` | `SortOrder` | "Ascending" | Sort direction (Ascending, Descending, None) | | `toolbarItems` | `ToolbarItemModel[]` | [] | Custom toolbar items array | | `toolbarSettings` | `ToolbarSettingsModel` | {...} | Toolbar configuration | | `uploadSettings` | `UploadSettingsModel` | {...} | File upload configuration | | `view` | `ViewType` | "LargeIcons" | Initial view type (LargeIcons or Details) | | `width` | `string \| number` | "100%" | Component width | ### Property Examples ```typescript // Example 1: Basic configuration const filemanager = new FileManager({ path: '/Documents', view: 'Details', height: '500px', width: '100%', allowMultiSelection: true, showThumbnail: true }); // Example 2: Persistence and RTL const filemanager = new FileManager({ enablePersistence: true, // Saves view, path, selection enableRtl: true, locale: 'ar-AE', cssClass: 'custom-fm-theme' }); // Example 3: Range selection and drag-drop const filemanager = new FileManager({ allowDragAndDrop: true, enableRangeSelection: true, allowMultiSelection: true, enableHtmlSanitizer: true }); ``` --- ## Configuration Objects ### 1. AjaxSettings Configures server endpoints for file operations. | Property | Type | Description | |----------|------|-------------| | `url` | `string` | Server endpoint for file operations (read, create, delete, etc.) | | `uploadUrl` | `string` | Server endpoint for file upload | | `downloadUrl` | `string` | Server endpoint for file download | | `getImageUrl` | `string` | Server endpoint for image/thumbnail retrieval | ```typescript const filemanager = new FileManager({ ajaxSettings: { url: 'https://api.example.com/api/FileManager/FileOperations', uploadUrl: 'https://api.example.com/api/FileManager/Upload', downloadUrl: 'https://api.example.com/api/FileManager/Download', getImageUrl: 'https://api.example.com/api/FileManager/GetImage' } }); ``` ### 2. UploadSettings Controls file upload behavior and validation. | Property | Type | Default | Description | |----------|------|---------|-------------| | `allowedExtensions` | `string` | "" | Allowed file extensions (comma-separated, e.g., ".jpg,.png,.pdf") | | `autoClose` | `boolean` | false | Close upload dialog after uploading all files | | `autoUpload` | `boolean` | true | Automatically upload files after selection | | `chunkSize` | `number` | 0 | Split large files into chunks (bytes) for sequential upload | | `directoryUpload` | `boolean` | false | Allow folder/directory upload | | `maxFileSize` | `number` | 30000000 | Maximum file size in bytes (default: 30MB) | | `minFileSize` | `number` | 0 | Minimum file size in bytes | | `sequentialUpload` | `boolean` | false | Upload files one at a time sequentially | ```typescript const filemanager = new FileManager({ uploadSettings: { allowedExtensions: '.jpg,.png,.pdf,.docx', // Comma-separated extensions maxFileSize: 52428800, // 50 MB minFileSize: 1024, // 1 KB autoUpload: true, // Auto-upload on selection autoClose: false, // Keep dialog open after upload directoryUpload: true, // Allow folder upload sequentialUpload: false, // Upload multiple files at once chunkSize: 0 // No chunking (0 = disabled) } }); ``` ### 3. ToolbarSettings Customizes the toolbar and available actions. | Property | Type | Description | |----------|------|-------------| | `items` | `ToolBarItems[]` | Array of toolbar items | | `visible` | `boolean` | Show/hide toolbar | ```typescript const filemanager = new FileManager({ toolbarSettings: { items: [ 'NewFolder', 'Refresh', 'Upload', 'Delete', 'Download',