syncfusion-react-file-manager

# Syncfusion React File Manager A comprehensive guide to implementing the Syncfusion React File Manager component for building file system interfaces with rich features like drag-drop, multi-view support, custom operations, and full accessibility. ## Quick Navigation **🚀 Just Getting Started?** → Read [Getting Started](references/getting-started.md) for installation and basic setup **🛠️ Need to Build File Operations?** → Check [File Operations (CRUD)](references/file-operations.md) for create, read, update, delete patterns **📊 Working with Local Data?** → See [Flat Data Structure](references/flat-data.md) for in-memory files and event-driven operations **✅ Need Multiple File Selection?** → Learn [Multiple Selection & Range Selection](references/multiple-selection.md) for Ctrl+Click, Shift+Click, drag selection **⚡ Handling Large File Lists?** → Use [Virtualization](references/virtualization.md) for smooth scrolling with 1000+ files **🎨 Want to Customize the UI?** → See [Customization & Styling](references/customization.md) for theming and layout options **⚙️ Looking for Advanced Features?** → Explore [Advanced Features](references/advanced-features.md) for performance, custom providers, and API integration **♿ Need Accessibility or Multi-Language?** → Visit [Accessibility & Localization](references/accessibility-localization.md) for WCAG and i18n **🔐 Need User Access Control?** → Learn [Access Control](references/access-control.md) for role-based permissions and security **📤 Passing Custom Headers to Server?** → See [Pass Custom Value to Server](references/pass-custom-value-to-server.md) for setRequestHeader and authentication **🎯 Need Advanced Customization?** → Check [Adding Custom Item to Context Menu](references/adding-custom-item-to-context-menu.md) and [Adding Custom Item to Toolbar](references/adding-custom-item-to-toolbar.md) **🔧 Want to Enable/Disable Toolbar Items?** → See [Enable/Disable Toolbar Item](references/enable-disable-toolbar-item.md) for programmatic control **🖼️ Customizing Thumbnails & Icons?** → Learn [Customize Custom Thumbnail](references/customize-custom-thumbnail.md) for icon templates **📁 Customizing Navigation Pane?** → See [Customize Navigation Pane](references/customize-navigation-items.md) for tree view customization **✨ Pre-selecting Items?** → Learn [Preselect Items](references/preselect-the-items.md) for default selections **📦 File Manager Inside Dialog/Tabs?** → See [Nested Items](references/nested-items.md) for embedding in other components ## When to Use This Skill Use this skill when you need to: - Create a file browser interface for your application - Implement file upload and download functionality - Build file management features (create, delete, rename, refresh) - Support multiple view options (details and large icons) - Add drag-and-drop capability to file management - Customize context menus, toolbars, and styling - Integrate accessibility features (keyboard navigation, ARIA) - Support internationalization and RTL languages - Connect to local or remote file systems ## Component Overview The **File Manager** is a graphical user interface component for managing file systems. It enables users to: - **File Operations:** Read, create, delete, rename, upload, download, and refresh files - **Multiple Views:** Switch between details view (sorted list) and large icons view (thumbnails) - **Navigation:** Breadcrumb trails and navigation pane with tree view for hierarchy exploration - **Context Menu:** Right-click menus with customizable options - **Drag-and-Drop:** Drag files between folders with configurable drop zones - **Accessibility:** Full WCAG compliance with keyboard navigation and screen reader support - **Localization:** Multi-language support with RTL direction for right-to-left languages - **Customization:** Extensive API for styling, theming, and behavior customization ## Documentation and Navigation Guide ### Core Features #### Getting Started & Installation 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Installation and package setup - Basic file manager implementation - CSS imports and theme configuration - Initial configuration and setup - Connection to file service (AjaxSettings) #### File Operations (CRUD) 📄 **Read:** [references/file-operations.md](references/file-operations.md) - Create folders and files - Read and browse file systems - Update/rename operations - Delete files and folders - Upload and download functionality - Multi-file selection and bulk operations - File provider patterns and custom implementations #### Views & Navigation 📄 **Read:** [references/views-and-navigation.md](references/views-and-navigation.md) - Details view with columns - Large icon view with thumbnails - View switching and configuration - Breadcrumb navigation control - Navigation pane (tree view sidebar) - Toolbar features and layout ### Data Management #### Flat Data Structure 📄 **Read:** [references/flat-data.md](references/flat-data.md) - Use local JSON data instead of server calls - FileData interface and properties - Permission management per item - Event-driven file operations (create, delete, rename, search) - State management with React hooks - Backend synchronization patterns - Large dataset performance optimization #### Multiple Selection & Range Selection 📄 **Read:** [references/multiple-selection.md](references/multiple-selection.md) - Enable/disable multi-select capability - Range selection by mouse drag - Checkbox selection support - Selection state management - Selected items API and events - Pre-selecting items on load - Keyboard shortcuts (Ctrl+A, Shift+Click) #### Preselect Items 📄 **Read:** [references/preselect-the-items.md](references/preselect-the-items.md) - Programmatically select items on load - Preselect based on file type, size, or date - Context-aware preselection - Selection methods (selectAll, clearSelection) - Get selected items programmatically ### Performance & Optimization #### Virtualization & Performance 📄 **Read:** [references/virtualization.md](references/virtualization.md) - Enable virtual scrolling for large datasets - Dynamic loading of files and folders - Viewport-based rendering optimization - Module injection and setup - Performance limitations and workarounds - Best practices for handling 1000+ items ### User Interactions #### Drag-and-Drop Features 📄 **Read:** [references/drag-and-drop.md](references/drag-and-drop.md) - Enable/disable drag-drop functionality - Drop area configuration - Event handling (fileDragStart, fileDragStop, fileDropped) - Cross-folder drag-drop - Custom drag-drop behavior #### Customization & Styling 📄 **Read:** [references/customization.md](references/customization.md) - Context menu customization - Toolbar customization - Details view column customization - Navigation pane customization - Tooltip customization - Show/hide file extensions and hidden files - Thumbnail configuration for large icons view - CSS class and theme customization ### Advanced Customization #### Adding Custom Item to Context Menu 📄 **Read:** [references/adding-custom-item-to-context-menu.md](references/adding-custom-item-to-context-menu.md) - Add custom menu items to context menu - Add icons to menu items - Handle menu click events - Conditional menu items based on file properties - Dynamic menu customization #### Adding Custom Item to Toolbar 📄 **Read:** [references/adding-custom-item-to-toolbar.md](references/adding-custom-item-to-toolbar.md) - Modify default toolbar items - Add custom toolbar items - Custom templates for toolbar - Toolbar click handling - Custom buttons, checkboxes, and dropdowns #### Enable/Disable Toolbar Item 📄 **Read:** [references/enable-disable-toolbar-item.md](references/enable-disable-toolbar-item.md) - Enable/disable toolbar items programmatically - Enable/disable based on selection - Role-based toolbar control - Disable during operations - Permission-based toolbar control #### Customize Custom Thumbnail 📄 **Read:** [references/customize-custom-thumbnail.md](references/customize-custom-thumbnail.md) - Hide/show thumbnails - Custom templates for large icon view - File type-based icons - Size-based color coding - Date-based icon indicators #### Customize Navigation Pane 📄 **Read:** [references/customize-navigation-items.md](references/customize-navigation-items.md) - Control navigation pane visibility and width - Custom templates for navigation nodes - Add file counts and metadata - Color-coded folders - Icon-based navigation styling - Responsive navigation pane #### Nested Items 📄 **Read:** [references/nested-items.md](references/nested-items.md) - Embed File Manager inside Dialog - Embed File Manager inside Tab - Embed File Manager inside Splitter - File selector with File Manager - Multi-panel layouts with File Manager ### Security & Integration #### Access Control 📄 **Read:** [references/access-control.md](references/access-control.md) - Define access permissions for folders/files - Permission types (Allow/Deny) - Role-based access control - Access rules for different user roles - Backend permission validation #### Pass Custom Value to Server 📄 **Read:** [references/pass-custom-value-to-server.md](references/pass-custom-value-to-server.md) - Setting custom HTTP headers with setRequestHeader - User authentication headers - User identification headers - Tracking file operations - Department-based access - Download operation customization - Image loading customization - Complete server integration patterns ### Accessibility & Localization #### Accessibility & Localization 📄 **Read:** [references/accessibility-localization.md](references/accessibility-localization.md) - WCAG 2.1 compliance - Keyboard navigation (arrow keys, enter, delete) - ARIA attributes and roles - Screen reader support - Internationalization (i18n) - Right-to-left (RTL) support - Date and number formatting for different locales ### Advanced Features #### Advanced Features 📄 **Read:** [references/advanced-features.md](references/advanced-features.md) - Custom file system provider implementation - API integration patterns - Performance optimization techniques - Error handling and edge cases - Event system and hooks - Advanced search and filtering - Custom sorting and comparison - Nested components (File Manager in Dialog/Tabs) ## Quick Start Example Install the Tailwind3 theme package along with the File Manager: ```bash npm install @syncfusion/ej2-react-filemanager npm install @syncfusion/ej2-tailwind3-theme ``` Add the theme import to **src/App.css**: ```css /* src/App.css */ @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css"; ``` Import `App.css` and the component in **src/App.tsx**: ```tsx import React from 'react'; import { FileManagerComponent, Inject, DetailsView, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager'; import './App.css'; function App() { const hostUrl = "url"; return ( <div> <FileManagerComponent id="file" ajaxSettings={{ url: hostUrl + "api/FileManager/FileOperations", getImageUrl: hostUrl + "api/FileManager/GetImage", uploadUrl: hostUrl + "api/FileManager/Upload", downloadUrl: hostUrl + "api/FileManager/Download" }} view="Details" height="375px" > <Inject services={[DetailsView, NavigationPane, Toolbar]} /> </FileManagerComponent> </div> ); } export default App; ``` ## Methods Reference The File Manager provides programmatic methods to control operations: ### Selection & View Control | Method | Parameters | Purpose | |--------|-----------|---------| | `selectAll()` | - | Select all files and folders in current path | | `clearSelection()` | - | Deselect all items | | `getSelectedFiles()` | - | Get array of selected file objects | ### File Operations | Method | Parameters | Purpose | |--------|-----------|---------| | `createFolder(name?)` | name: string (optional) | Create new folder; opens dialog if name not provided | | `renameFile(id?, name?)` | id: string, name: string | Rename file/folder; opens dialog if params not provided | | `deleteFiles(ids?)` | ids: string[] | Delete files/folders; opens confirmation if not provided | | `openFile(id)` | id: string | Open file or navigate to folder | | `downloadFiles(ids?)` | ids: string[] (optional) | Download selected files; downloads selection if not provided | | `uploadFiles()` | - | Open file upload dialog | ### Navigation & Refresh | Method | Parameters | Purpose | |--------|-----------|---------| | `refreshFiles()` | - | Refresh current folder contents | | `refreshLayout()` | - | Refresh component layout | | `traverseBackward()` | - | Navigate to parent directory | | `filterFiles(filterData?)` | filterData: Object | Apply custom filter to displayed files | ### Toolbar & Menu Control | Method | Parameters | Purpose | |--------|-----------|---------| | `disableToolbarItems(items)` | items: string[] | Disable specific toolbar buttons | | `enableToolbarItems(items)` | items: string[] | Enable specific toolbar buttons | | `getToolbarItemIndex(item)` | item: string | Get toolbar item position | | `disableMenuItems(items)` | items: string[] | Disable context menu items | | `enableMenuItems(items)` | items: string[] | Enable context menu items | | `getMenuItemIndex(item)` | item: string | Get context menu item position | ### Dialog Control | Method | Parameters | Purpose | |--------|-----------|---------| | `closeDialog()` | - | Close any open dialog | ### Component Lifecycle | Method | Parameters | Purpose | |--------|-----------|---------| | `destroy()` | - | Clean up component resources | ## Events Reference File Manager provides comprehensive event hooks for customization: ### File Selection Events | Event | Args | Triggered When |