Overview of Syncfusion Blazor File Manager Component

Introduction to Syncfusion Blazor File Manager

The Blazor File Manager is a powerful, Explorer-like UI component for browsing, organizing, and managing files and folders directly within web applications. It offers a comprehensive set of enterprise-grade capabilities-including a configurable toolbar, navigation pane, breadcrumb, context menu, dual view modes, and complete file operations-paired with a pluggable file-system-provider model that connects to physical disks, cloud storage, and databases. Designed for usability, security, and scalability, it enables developers to build document-management systems, cloud file explorers, and content portals without extensive custom UI work.

Common use cases

The Blazor File Manager is ideal for a wide range of business scenarios:

Use Case Description Key Features
Document Management Systems Provide users with an Explorer-like interface to browse, organize, and version documents across teams File Operations, Navigation Pane, Details View
Cloud File Explorers Browse and manage files stored in Amazon S3, Azure Blob, or Google Drive directly from the browser Cloud File Providers, Thumbnail Preview, Search
Image & Media Galleries Visualize and preview images and videos with large-icon thumbnails before download Large Icons View, Image Preview, Drag-and-Drop
Content Portals (CMS) Allow content authors to upload, rename, and arrange assets within a structured folder tree Upload, Context Menu, Toolbar, Sorting
Database-Backed File Stores Store file metadata and binaries in SQL and serve them through a standardized provider pattern SQL Database Provider, Custom File Provider
Collaborative Workspaces Let multiple users move, copy, and share files with access-controlled, permission-aware operations Access Control (provider-specific), Drag-and-Drop, Multiple Selection

File system provider model

The Blazor File Manager decouples UI from storage through a file system provider model. The component sends standardized file action requests (read, create, rename, delete, search, copy, move, upload, download, get details, get image) to a backend controller implementing a provider, and renders the responses uniformly. This lets you choose or build the right storage strategy for any application architecture.

Built-in Providers

Storage Compatibility

The File Manager integrates with virtually any storage target through the provider pattern:

Storage Description Best For
Physical Disk Direct local filesystem access On-premises apps, simple deployments
Azure Blob Storage Durable, massively scalable cloud object storage Enterprise cloud apps, large unstructured data
Amazon S3 Pay-as-you-go, highly available object storage Cloud-native apps, cross-region storage
FTP Server Legacy remote file access Existing FTP infrastructure
SharePoint Enterprise document library integration Intranet content, Microsoft 365 workflows
SQL Database Transactional, queryable file metadata Apps needing relational metadata, audit
Google Drive Personal/Google Workspace cloud storage Google-centric integrations
Firebase Realtime DB Real-time metadata sync Collaborative, multi-user apps
Custom Provider Any proprietary storage or service Specialized or legacy back ends

Docker & Service Deployment

Cloud and database providers include dedicated Docker support for containerized deployments:

Provider Docker Guide
Amazon S3 Amazon S3 Provider Docker Support
Azure Blob Azure Provider Docker Support

Data binding

The Blazor File Manager supports two ways to load files and folders:

  • AjaxSettings - Bind the component to a RESTful JSON service by configuring FileManagerAjaxSettings with the Url, UploadUrl, DownloadUrl, and GetImageUrl endpoints. The component automatically sends file-action requests and parses JSON responses.
  • List Objects (IEnumerable) - Bind to a list of objects and supply responses within the corresponding File Manager events, bypassing the AJAX service entirely. Useful for in-memory or client-side scenarios.

When using AjaxSettings, the File Manager loads data from its AJAX URLs. When using list objects, the File Manager loads data via the responses you provide in the events.

File operations

The Blazor File Manager provides comprehensive file and folder manipulation capabilities that let users browse, create, organize, and remove items directly within the interface. Every operation is a standardized file action sent to the configured provider and reflected in the UI after a successful server response.

Operation Purpose Outcome
read Read files/folders from the current path to display content for browsing Foundation for all navigation
create Create a new folder in the current path Quick folder organization
delete Remove the selected file or folder from the file server Cleanup and lifecycle management
rename Rename the selected file or folder Clear, organized naming
search Search items matching a search string in the current and child directories Fast item location
details Retrieve details of the selected item(s) Metadata visibility (size, dates, type)
copy Copy the selected file or folder to a target path Duplication without re-upload
move Cut and move the selected file or folder to a target path Reorganize without duplication
upload Upload files to the current path Add new content from client
download Download files from the server (multiple files as ZIP) Offline access, sharing

The CreateFolder, Remove, and Rename actions are reflected in the File Manager UI only after a successful server response.

Each request and response carries standardized content fields (name, dateCreated, dateModified, filterPath, hasChild, isFile, size, type) plus an error object (code, message, fileExists) and an optional details block. Refer to File Operations for the full request/response schema of each action and the corresponding controller code.

Views

The File Manager provides two built-in view modes for browsing files and folders, switchable at runtime through the toolbar, context menu, or the View API.

View Description Best For Advantage
Large Icons View Thumbnail-driven layout with large previews, default starting view Visual recognition, images, media Fast visual scanning
Details View Sorted tabular list with columns (Name, Date Modified, Type, Size) Organized information, large directories Column sorting, custom columns

Customizing Views

  • Large Icons View - Customize rendering entirely via the LargeIconsTemplate property to add file-type icons, background images, formatted dates, and dropdown menus per item.
  • Details View - Add custom columns via FileManagerColumn under FileManagerDetailsViewSettings. Customize column Width, MinWidth, Format, HeaderText, HeaderTemplate, and per-cell Template.

User interface & interaction

The File Manager UI is composed of several coordinated sections, fully configurable to match application workflows and design systems.

UI Sections

Section Purpose Customization
Toolbar Direct access to file operations at the top of the component Items, visibility, custom items via templates
Context Menu Right-click access to file, folder, and layout actions Per-target items, enable/disable, hide, custom items
Navigation Pane Folder hierarchy tree for easy navigation Visibility, min/max width, NavigationPaneTemplate
Breadcrumb Parent-folder navigation with overflow dropdown Auto-resizing, auto-collapses parent folders
Large Icons View Browse using large thumbnails LargeIconsTemplate
Details View Browse using a sortable grid Custom columns, column templates

Toolbar

Built-in toolbar items include NewFolder, SortBy, Upload, Cut, Copy, Paste, Delete, Download, Rename, Refresh, View, and Details. Configure the collection through FileManagerToolbarSettings, hide the toolbar via Visible="false", and add custom items with FileManagerCustomToolbarItem using templates (e.g., a dropdown for folder vs. file upload).

Context Menu

The context menu displays different items depending on the target-Layout (empty area), Folder, or File-configured through FileManagerContextMenuSettings (File, Folder, Layout arrays). Customize items, enable/disable, show/hide, and inject custom items with icons via the MenuOpened and OnMenuClick events.

Multiple Selection

Feature Purpose Advantage
AllowMultiSelection Enable selecting multiple files via Ctrl/Shift-click (enabled by default) Bulk operations
Checkbox Selection Per-item checkboxes with select-all Clear bulk selection
Range Selection Drag-select a range of files like File Explorer Fast group selection
GetSelectedFiles Retrieve selected items programmatically Custom actions on selection

Use the FileSelection event to prevent selection of specific items (set args.Cancel = true), and FileSelected to react after selection changes.

Drag and Drop

Enable with AllowDragAndDrop to move files and folders within the file system. Three events provide full control over the lifecycle:

Event Triggers Use Case
OnFileDragStart Dragging starts Validate, cancel, or customize drag
OnFileDragStop Item about to be dropped Target validation
FileDropped Item dropped Post-drop actions

See Restrict Drag and Drop Upload for permission-based restrictions.

Upload

The Blazor File Manager provides rich upload configuration through FileManagerUploadSettings, covering file size, type restrictions, chunked uploads, and upload mode.

Feature Property Purpose Advantage
Directory Upload DirectoryUpload Upload entire folders (supported by Physical, Azure, and Amazon S3 providers) Bulk folder ingestion
Sequential Upload SequentialUpload Upload files one after another Reduced traffic, fewer failures
Chunk Upload ChunkSize Split large files into chunks with pause/resume Reliable large-file upload
Auto Upload AutoUpload Auto-upload on queue add (default true) Manual queue control when false
Auto Close AutoClose Auto-close upload dialog after completion Cleaner UX
Allowed Extensions AllowedExtensions Restrict uploads to specific extensions Security, type safety
Max File Size MaxFileSize Cap the maximum upload size Resource protection
Upload Mode UploadMode FormSubmit (default) or HttpClient HttpClient allows header/auth control via OnSend

When DirectoryUpload is set to true, only folders can be uploaded. When it is set to false, only individual files can be uploaded. Simultaneous uploading of files and folders is not supported.

For large-file strategies, see Upload Large Files. For HTTP handler customization, see Customize HTTP Handler.

Performance

The Blazor File Manager is engineered for smooth browsing of directories containing hundreds to hundreds of thousands of items through virtualization, on-demand loading, and an efficient provider response format.

Feature Description Use Case Advantage
Virtualization Dynamically load only viewport-visible items in both Details and Large Icons views Large directories (10K+ items) Smooth scrolling
Pagination Segment files/folders into pages with a pager control Browsable large directories Predictable page sizes
Chunked Upload Upload large files in resumable chunks Large binary uploads Network resilience

Enable virtualization via EnableVirtualization. Enable pagination via AllowPaging with FileManagerPageSettings (PageSize, NumericItemsCount, CurrentPage, PageSizes, and Template).

Virtualization Limitations

  • Programmatic SelectAllAsync is not supported with virtual scrolling.
  • Ctrl+A selects only items currently in the viewport.
  • Selected items are not retained while scrolling or switching views (for performance).

Customization

The File Manager is fully customizable to align with application design systems and specialized workflows.

Feature Purpose Advantage
Styles & Appearance Override CSS classes for navigation pane, thumbnails, and layout Brand-consistent theming
Toolbar Custom Items Add custom toolbar items with templates Specialized actions
Context Menu Custom Items Add custom menu items with icons Target-aware custom actions
Large Icons Template Fully customize large-icon item rendering Rich visual cards
Details View Columns Add/customize columns with templates and formats Tailored tabular display
Navigation Pane Template Customize navigation pane icons and content Custom folder trees

Thumbnails can be customized per file type using CSS selectors (e.g., .e-fe-image, .e-fe-folder, .e-fe-zip, .e-fe-xlsx, and others-see Styles and Appearance for the full list). The .e-navigation selector customizes the navigation pane.

Accessibility & keyboard navigation

The File Manager is fully accessible and compliant with major accessibility standards:

Accessibility Criteria Compatibility
WCAG 2.2 Support AA
Section 508 Support Full
Screen Reader Support Full
Right-To-Left (RTL) Support Full
Color Contrast Full
Mobile Device Support Full
Keyboard Navigation Support Full
Axe-core Validation Full

The component follows WAI-ARIA patterns with ARIA roles, states, and properties including aria-disabled, aria-haspopup, aria-expanded, aria-selected, aria-label, aria-sort, aria-grabbed, aria-multiselectable, and others.

Keyboard Shortcuts

Windows Mac Action
Page Down Page Down Scroll down to next folder/file, select first item
Page Up Page Up Scroll up to previous folder, select first item
Enter Enter Select focused item and navigate into it
Tab Tab Focus first toolbar element, traverse tab order
Esc Esc Close open image preview
Alt+N ⌥+N Open New Folder dialog
F5 F5 Refresh the File Manager
Ctrl+Shift+1 ⌘+⇧+1 Switch to Large Icons View
Ctrl+Shift+2 ⌘+⇧+2 Switch to Details view
Ctrl+A ⌘+A Select all items (viewport-limited under virtualization)

Events

The File Manager exposes a comprehensive event model through FileManagerEvents<TValue>. All events should be wired within a single FileManagerEvents component.

Event Triggers Use Case
FileSelection Before a file/folder is selected Prevent specific selections
FileSelected After a file/folder is (un)selected React to selection changes
OnFileDragStart Drag starts Validate or cancel drag
OnFileDragStop Item about to drop Validate target
FileDropped Item dropped Post-drop actions
ToolbarCreated Before toolbar items are created Customize toolbar
ToolbarItemClicked Toolbar item clicked Intercept toolbar actions
MenuOpened Context menu opens Enable/disable, hide, or icon custom items
OnMenuClick Context menu item clicked Intercept menu actions
OnSend Before upload request sent Add auth headers for HttpClient upload mode

Advanced features

Feature Purpose Use Case Advantage
Custom HTTP Handler Modify request/response handling Specialized back ends Full transport control
Custom Filtering Apply custom filter logic Domain-specific search Tailored item discovery
Nested Items Hierarchical menu structures Grouped custom actions Organized custom UI
File Previewing Customize preview behavior Specialized media workflows Enhanced UX
Localization & Globalization Multi-language support with culture-specific formatting and RTL International apps Inclusive UX

Enterprise Patterns

System requirements

The Blazor File Manager works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Web App, Blazor WebAssembly, Blazor Server, Blazor MAUI
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Support & resources