syncfusion-angular-file-manager

What this skill does

# Implementing the Syncfusion Angular File Manager Component

The File Manager is a powerful graphical user interface component for managing file systems. It enables users to perform essential file operations—accessing, editing, sorting, uploading, downloading, and organizing files and folders—with an intuitive interface and comprehensive navigation functionality.

## When to Use This Skill

Use the File Manager component when you need to:
- **Browse and navigate** files and folders in a file system
- **Perform file operations** (create, delete, rename, upload, download)
- **Display files** in different view modes (details view, large icons view)
- **Implement drag-and-drop** file management
- **Handle large file sets** efficiently with virtualization
- **Customize** toolbar, context menu, and file display
- **Support** multi-selection, sorting, and localization

## Component Overview & Key Features

### Core Capabilities
- **File Operations**: Read, create, delete, rename, upload, download files
- **Navigation**: Breadcrumb navigation, navigation pane, folder hierarchy
- **View Options**: Details view (sorted list) and Large Icons view (thumbnail display)
- **User Interaction**: Multi-selection, drag-and-drop, right-click context menu
- **Performance**: UI virtualization for large file sets, state persistence
- **Customization**: Toolbar/context menu customization, CSS theming, custom icons
- **Accessibility**: RTL support, localization, ARIA attributes

### Architecture
- Server-based file operations via `ajaxSettings`
- Or client-side data binding with `fileSystemData` (flat or nested JSON)
- Feature modules: Navigation Pane, Toolbar, Details View, Virtualization
- Event-driven architecture for custom workflows

## Documentation and Navigation Guide

### API Reference (Start Here for API Details)
📄 **Read:** [references/api-reference-complete.md](references/api-reference-complete.md)
- Complete component properties with descriptions
- FileData interface for client-side binding
- Configuration models and best practices
- Service providers and utility functions

### Methods and Events Reference
📄 **Read:** [references/methods-and-events.md](references/methods-and-events.md)
- Complete list of all component methods with examples
- All component events with event arguments
- Event parameter interfaces and descriptions
- Practical examples for each method and event

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Prerequisites (Angular 4+, TypeScript 2.6+)
- Angular project setup and CLI commands
- Package installation (Ivy vs ngcc compatibility)
- CSS theme imports and styling
- Basic component initialization
- ajaxSettings configuration (file operations, download, upload, preview URLs)
- Initial view and component rendering

### File Operations
📄 **Read:** [references/file-operations.md](references/file-operations.md)
- Core operations: read, create, delete, rename, upload, download, copy, move
- File system provider configuration
- Server integration patterns
- Custom file providers (Google Drive, Amazon S3, Azure)
- Directory upload support
- Error handling and validation
- Request/response patterns

### Request and Response Parameters
📄 **Read:** [references/request-response-parameters-reference.md](references/request-response-parameters-reference.md)
- Complete response parameters for ALL 11 operations
- Request structure and parameters for each operation
- Response format and structure specifications
- FileManagerDirectoryContent interface definition
- DetailsObject and error response formats
- Request/response examples for every operation
- Error codes and error handling patterns
- Common data structures and interfaces
- Best practices for backend implementation

### Upload Customizations
📄 **Read:** [references/upload-customizations.md](references/upload-customizations.md)
- Directory upload configuration (directoryUpload property)
- Sequential upload setup (sequentialUpload property)
- Chunk upload for large files (chunkSize configuration)
- Auto-upload behavior control
- File size validation (minFileSize, maxFileSize)
- File type restrictions (allowedExtensions)
- Upload events (beforeSend, onSuccess, onFailure)
- Backend implementation examples (ASP.NET Core)
- 3 practical examples covering image-only, document, and complete upload configs

### Views and Layout
📄 **Read:** [references/views-and-layout.md](references/views-and-layout.md)
- Details view (sorted file list with columns)
- Large Icons view (thumbnail display)
- Switching views dynamically or at initialization
- Initial view configuration
- CSS class customization for styling
- View-specific settings and configurations

### Navigation Features
📄 **Read:** [references/navigation-features.md](references/navigation-features.md)
- Breadcrumb navigation (folder hierarchy tracking)
- Navigation pane configuration (left sidebar with folder tree)
- Path specification and dynamic navigation
- Folder hierarchy traversal
- Showing/hiding navigation elements

### Data Structures
📄 **Read:** [references/data-structures.md](references/data-structures.md)
- Flat JSON data binding (no backend required)
- Nested items (folder hierarchies in local data)
- fileData interface and properties (name, size, date, isFile, hasChild, etc.)
- Parent-child relationships via parentId
- Flat vs nested approaches and trade-offs
- Server-based vs client-side data

### Nested Items Integration
📄 **Read:** [references/nested-items-integration.md](references/nested-items-integration.md)
- Dialog nesting with file selection pattern
- Tab nesting (multiple File Managers per tab)
- Splitter nesting (side-by-side layout)
- Accordion nesting (categorized file access)
- Managing multiple nested File Manager state
- Height calculation strategies
- Dimension management best practices
- 2 practical examples: file upload dialog, tabbed file management

### Drag and Drop
📄 **Read:** [references/drag-and-drop.md](references/drag-and-drop.md)
- Enabling drag-and-drop functionality
- Drop target configuration
- File move operations via dragging
- Drag event handling (fileDragStart, fileDragging, fileDragStop, fileDropped)
- Constraints and drop restrictions
- Visual feedback during drag operations

### Virtualization
📄 **Read:** [references/virtualization.md](references/virtualization.md)
- What is UI virtualization and performance benefits
- Module injection (VirtualizationService)
- Enabling virtualization (enableVirtualization property)
- Handling large file sets (100s-1000s of files)
- Memory optimization and scrolling performance
- Virtual scrolling in details and large icons views

### Sorting and Filtering
📄 **Read:** [references/sorting-and-filtering.md](references/sorting-and-filtering.md)
- Custom sorting via sortComparer function
- Natural sorting (like Windows Explorer)
- Sort orders (ascending/descending)
- Multi-column sorting in details view
- Column-specific sortComparer definitions
- Imported sortComparer utility or custom implementations

### Toolbar Customization
📄 **Read:** [references/toolbar-customization.md](references/toolbar-customization.md)
- Toolbar configuration and items
- Default toolbar items (NewFolder, Upload, View, Refresh, Cut, Copy, Paste, Delete, Download, Rename)
- Adding custom toolbar items with templates
- Modifying toolbar item properties
- Toolbar icons (Syncfusion, Font Awesome, custom SVG)
- Template-based toolbar items (checkboxes, dropdowns)
- Toolbar click events and event handling
- Conditional toolbar items based on selection

### Context Menu Customization
📄 **Read:** [references/context-menu-customization.md](references/context-menu-customization.md)
- Default context menu items (Open, Cut, Copy, Paste, Delete, Rename, Download)
- Adding custom context menu items
- Context menu configuration for files, folders, and layout
- Menu events (menuOpen, menuClose, menuClick)
- Dynamic menu modification and conditional