Skip to main content Home Creators syncfusion react-ui-components-skills syncfusion-react-file-manager
syncfusion-react-file-manager Implement Syncfusion React File Manager component for file system navigation and management. Use when users need file browsing, upload/download, file operations (create, delete, rename), multiple views, drag-drop, customization, or accessibility features. Supports local and remote file systems with comprehensive customization options.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
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.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-file-managerThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-breadcrumb Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-react-file-manager description Implement Syncfusion React File Manager component for file system navigation and management. Use when users need file browsing, upload/download, file operations (create, delete, rename), multiple views, drag-drop, customization, or accessibility features. Supports local and remote file systems with comprehensive customization options. metadata {"author":"Syncfusion Inc","version":"34.1.29"}
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? Getting Started for installation and basic setup
🛠️ Need to Build File Operations? File Operations (CRUD) for create, read, update, delete patterns
📊 Working with Local Data? Flat Data Structure for in-memory files and event-driven operations
✅ Need Multiple File Selection? Multiple Selection & Range Selection for Ctrl+Click, Shift+Click, drag selection
⚡ Handling Large File Lists? Virtualization for smooth scrolling with 1000+ files
🎨 Want to Customize the UI? Customization & Styling for theming and layout options
⚙️ Looking for Advanced Features?
🔐 Need User Access Control? Access Control for role-based permissions and security
📦 File Manager Inside Dialog/Tabs? Nested Items 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 filesMultiple Views: Switch between details view (sorted list) and large icons view (thumbnails)Navigation: Breadcrumb trails and navigation pane with tree view for hierarchy explorationContext Menu: Right-click menus with customizable optionsDrag-and-Drop: Drag files between folders with configurable drop zonesAccessibility: Full WCAG compliance with keyboard navigation and screen reader supportLocalization: Multi-language support with RTL direction for right-to-left languagesCustomization: Extensive API for styling, theming, and behavior customization
Documentation and Navigation Guide
Core Features
Getting Started & Installation
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)
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
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
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
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
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
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
Enable/disable drag-drop functionality
Drop area configuration
Event handling (fileDragStart, fileDragStop, fileDropped)
Cross-folder drag-drop
Custom drag-drop behavior
Customization & Styling
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
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
Modify default toolbar items
Add custom toolbar items
Custom templates for toolbar
Toolbar click handling
Custom buttons, checkboxes, and dropdowns
Enable/Disable Toolbar Item
Enable/disable toolbar items programmatically
Enable/disable based on selection
Role-based toolbar control
Disable during operations
Permission-based toolbar control
Customize Custom Thumbnail
Hide/show thumbnails
Custom templates for large icon view
File type-based icons
Size-based color coding
Date-based icon indicators
Customize Navigation Pane
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
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
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
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
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
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:
npm install @syncfusion/ej2-react-filemanager
npm install @syncfusion/ej2-tailwind3-theme
Add the theme import to 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 :
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 fileSelectionFileSelectionEventArgs File/folder about to be selected (cancelable) fileSelectFileSelectEventArgs File/folder is selected/unselected
File Navigation Events Event Args Triggered When fileOpenFileOpenEventArgs File/folder about to be opened fileLoadFileLoadEventArgs File/folder item is rendered
File Operation Events Event Args Triggered When beforeFolderCreateFolderCreateEventArgs Folder creation requested (cancelable) folderCreateFolderCreateEventArgs Folder successfully created beforeRenameRenameEventArgs Rename operation requested (cancelable) renameRenameEventArgs File/folder successfully renamed beforeDeleteDeleteEventArgs Deletion requested (cancelable) deleteDeleteEventArgs File/folder successfully deleted beforeMoveMoveEventArgs Move/copy operation started moveMoveEventArgs File/folder successfully moved/copied
Drag & Drop Events Event Args Triggered When fileDragStartFileDragEventArgs Drag operation begins fileDraggingFileDragEventArgs Dragging is in progress fileDragStopFileDragEventArgs Drag about to be dropped (cancelable) fileDroppedFileDragEventArgs File/folder successfully dropped
Upload Events Event Args Triggered When uploadListCreateUploadListCreateArgs Upload UI created (pre-upload validation) beforeDownloadBeforeDownloadEventArgs Download requested
Menu & Context Events Event Args Triggered When menuOpenMenuOpenEventArgs Context menu about to open menuCloseMenuCloseEventArgs Context menu closed menuClickMenuClickEventArgs Context menu item clicked
Search & Dialog Events Event Args Triggered When searchSearchEventArgs User types in search box beforePopupOpenBeforePopupOpenCloseEventArgs Dialog about to open popupOpenPopupOpenCloseEventArgs Dialog opened beforePopupCloseBeforePopupOpenCloseEventArgs Dialog about to close popupClosePopupOpenCloseEventArgs Dialog closed
AJAX & Server Events Event Args Triggered When beforeSendBeforeSendEventArgs AJAX request sent (add custom headers) successSuccessEventArgs AJAX request succeeded failureFailureEventArgs AJAX request failed beforeImageLoadBeforeImageLoadEventArgs Image/thumbnail request sent
Lifecycle Events Event Args Triggered When createdObject Component initialization complete destroyedObject Component destroyed
Toolbar Events Event Args Triggered When toolbarCreateToolbarCreateEventArgs Toolbar being created toolbarClickToolbarClickEventArgs Toolbar button clicked
Common Patterns
1. Basic Setup Pattern First, install the Tailwind3 theme package:
npm install @syncfusion/ej2-tailwind3-theme
Add the theme import to src/App.css :
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css" ;
import React from 'react' ;
import { FileManagerComponent , Inject , DetailsView , NavigationPane , Toolbar } from '@syncfusion/ej2-react-filemanager' ;
import './App.css' ;
export default function BasicFileManager (return (
<FileManagerComponent
id ="file"
ajaxSettings ={{
url: "url ",
getImageUrl: "url ",
uploadUrl: "url ",
downloadUrl: "url "
}}
view ="Details"
height ="500px"
>
<Inject services ={[DetailsView, NavigationPane , Toolbar ]} />
</FileManagerComponent >
Install @syncfusion/ej2-react-filemanager and all peer dependencies
Install the theme package: npm install @syncfusion/ej2-tailwind3-theme
Add the theme import in App.css: @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css";
Configure ajaxSettings endpoints
Choose view (Details or LargeIcons)
Inject required services (features to enable)
2. File Service Backend Pattern Expected Endpoint Structure:
ajaxSettings={{
url : "url" ,
getImageUrl : "url" ,
uploadUrl : "url" ,
downloadUrl : "url"
}}
Backend Implementation (ASP.NET Core Example):
[ApiController ]
[Route("api/[controller]" ) ]
public class FileManagerController : ControllerBase
{
[HttpPost("FileOperations" ) ]
public IActionResult FileOperations (
[FromForm] string action,
[FromForm] string path,
[FromForm] string name = null ,
[FromForm] IFormFile uploadFiles = null )switch (action)
{
case "read" :
return Ok(new { files = GetDirectoryContents(path) });
case "create" :
Directory.CreateDirectory(Path.Combine(path, name));
return Ok();
case "delete" :
return Ok();
case "rename" :
return Ok();
case "move" :
return Ok();
default :
return BadRequest("Invalid action" );
}
}
[HttpGet("GetImage" ) ]
public IActionResult GetImage ([FromQuery] string path )var filePath = ResolvePath(path);
return PhysicalFile(filePath, "image/jpeg" );
}
[HttpPost("Upload" ) ]
public IActionResult Upload ([FromForm] IFormFile uploadFiles, [FromForm] string path )var filePath = Path.Combine(path, uploadFiles.FileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
uploadFiles.CopyTo(stream);
}
return Ok();
}
[HttpGet("Download" ) ]
public IActionResult Download ([FromQuery] string path )var file = System.IO.File.ReadAllBytes(path);
var fileName = Path.GetFileName(path);
return File(file , "application/octet-stream" , fileName);
}
}
3. State Management Pattern import React , { useRef, useState } from 'react' ;
export default function FileManagerWithState (const fileManagerRef = useRef (null );
const [selectedFiles, setSelectedFiles] = useState ([]);
const [currentPath, setCurrentPath] = useState ('/' );
const handleFileSelect = (args ) => {
setSelectedFiles (args.fileDetails );
};
const handleCreateFolder = (current ?.createFolder ('NewFolder' );
};
const handleDeleteSelected = (const ids = selectedFiles.map (f =>name );
fileManagerRef.current ?.deleteFiles (ids);
};
return (
<div >
<div className ="toolbar" >
<button onClick ={handleCreateFolder} > Create Folder</button >
<button onClick ={handleDeleteSelected} disabled ={!selectedFiles.length} >
Delete ({selectedFiles.length})
</button >
<span > Path: {currentPath}</span >
</div >
<FileManagerComponent
ref ={fileManagerRef}
fileSelect ={handleFileSelect}
ajaxSettings ={{...}}
height ="400px"
>
<Inject services ={[DetailsView, NavigationPane , Toolbar ]} />
</FileManagerComponent >
</div >
4. Event-Driven Custom Logic Pattern <FileManagerComponent
beforeDelete={(args ) => {
if (args.fileDetails [0 ].name .startsWith ('.' )) {
args.cancel = true ;
alert ('Cannot delete system files' );
}
}}
beforeSend={(args ) => {
args.headers = { ...args.headers , 'Authorization' : `Bearer ${token} ` };
}}
uploadListCreate={(args ) => {
args.fileDetails .forEach (file =>if (file.size > 5000000 ) {
args.cancel = true ;
}
});
}}
success={(args ) => {
console .log ('Operation successful:' , args.action , args.result );
}}
failure={(args ) => {
console .error ('Operation failed:' , args.error );
}}
/>
5. Customization Pattern <FileManagerComponent
toolbarSettings={{
items : ['NewFolder' , 'Upload' , '|' , 'Cut' , 'Copy' , 'Paste' , '|' , 'Delete' , 'Download' ],
visible : true
}}
contextMenuSettings={{
file : ['Open' , '|' , 'Cut' , 'Copy' , '|' , 'Delete' , 'Rename' , '|' , 'Details' ],
folder : ['Open' , '|' , 'Cut' , 'Copy' , 'Paste' , '|' , 'Delete' , 'Rename' ],
layout : ['SortBy' , 'View' , 'Refresh' , '|' , 'NewFolder' , 'Upload' ],
visible : true
}}
detailsViewSettings={{
columns : [
{
field : 'name' ,
headerText : 'Name' ,
minWidth : 120 ,
template : '<span class="custom-name">${name}</span>'
},
{
field : '_fm_modified' ,
headerText : 'Modified' ,
type : 'dateTime' ,
format : 'MMMM dd, yyyy HH:mm' ,
minWidth : 120
},
{
field : 'size' ,
headerText : 'Size' ,
minWidth : 90 ,
template : '<span>${size}</span>'
}
]
}}
navigationPaneSettings={{
maxWidth : '650px' ,
minWidth : '240px' ,
visible : true ,
sortOrder : 'None'
}}
/>
6. Performance Optimization Pattern <FileManagerComponent
enableVirtualization={true }
enablePersistence={true }
searchSettings={{
allowSearchOnTyping : true ,
filterType : 'contains' ,
ignoreCase : true
}}
uploadSettings={{
autoUpload : true ,
minFileSize : 0 ,
maxFileSize : 30000000 ,
allowedExtensions : '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx' ,
autoClose : false ,
directoryUpload : false ,
sequentialUpload : false
}}
sortBy="name"
sortOrder="Ascending"
/>
Key Props
Core Configuration Prop Type Default Purpose ajaxSettingsObject See below Configure backend endpoints for file operations pathstring "/" Current folder path viewstring "LargeIcons" View type: "Details" or "LargeIcons" widthstring "100%" Component width heightstring "400px" Component height
Display & Behavior Prop Type Default Purpose showFileExtensionboolean true Display file extensions showHiddenItemsboolean false Display hidden files/folders showThumbnailboolean true Show thumbnails in large icons view showItemCheckBoxesboolean true Display checkboxes on hover sortBystring "name" Sort field: "name", "dateModified", "size" sortOrderstring "Ascending" Sort direction: "Ascending", "Descending", or "None" enableRtlboolean false Right-to-left layout support localestring "en-US" Localization language code
Selection & Navigation Prop Type Default Purpose allowMultiSelectionboolean true Allow selecting multiple files enableRangeSelectionboolean false Select multiple items by dragging mouse selectedItemsstring[] [] Initially selected file names allowDragAndDropboolean false Enable drag-drop operations
Performance & Features Prop Type Default Purpose enableVirtualizationboolean false Virtual scrolling for large datasets enablePersistenceboolean false Persist view, path, and selection state enableHtmlSanitizerboolean true Sanitize HTML to prevent XSS attacks cssClassstring "" Custom CSS class for styling rootAliasNamestring null Display name for root folder popupTargetHTMLElement null Dialog popup target element
Data & Settings Objects Prop Type Purpose fileSystemDataObject[] Flat data structure for local files contextMenuSettingsObject Customize context menu items toolbarSettingsObject Configure toolbar items and layout detailsViewSettingsObject Customize columns and column widths navigationPaneSettingsObject Configure sidebar behavior and appearance searchSettingsObject Configure search filtering options uploadSettingsObject Configure upload behavior sortComparerFunction Custom sorting function largeIconsTemplatestring | Function Custom template for large icons view navigationPaneTemplatestring | Function Custom template for navigation pane
AJAX Settings Configuration ajaxSettings={{
url : "url" ,
getImageUrl : "url" ,
uploadUrl : "url" ,
downloadUrl : "url" ,
}}
Backend Endpoint Expectations:
url - Receives POST requests with action parameter:
read: List files in pathcreate: Create new folderdelete: Delete file/folderrename: Rename file/foldermove: Move/copy file (copy or cut)search: Search filesupload: Handle file uploadsdownload: Prepare download
getImageUrl - GET request with path parameter for thumbnail image URL
uploadUrl - POST multipart form data with file upload
downloadUrl - Initiate file download stream
Common Use Cases
Case 1: Document Management System Implement a document browser with upload, download, and folder organization:
Use Details view for metadata display
Configure context menu for document operations
Add search functionality
Implement access control on backend
Case 2: Media File Browser Build a gallery with image/video thumbnails:
Use Large Icons view for thumbnail display
Configure getImageUrl for preview generation
Implement lazy loading for performance
Add drag-drop for organization
Case 3: Admin File Manager Create an internal file management tool:
Customize toolbar with admin-specific actions
Implement advanced context menu options
Add logging and audit trails
Configure permissions on backend
Case 4: Localized File Manager Support multiple languages and RTL:
Set locale to user's language
Enable enableRtl for RTL languages
Customize context menu labels per language
Format dates and sizes per locale
Next Steps
