Syncfusion Blazor File Manager

Implementing Syncfusion Blazor FileManager

When to Use This Skill

Use this skill when you need to:

• Create a file management interface - Build web applications for browsing, uploading, downloading, and managing files
• Set up cloud storage integration - Connect to Azure Blob Storage, Amazon S3, Google Drive, SharePoint, or Firebase
• Implement file operations - Enable users to create, delete, rename, copy, move, search files and folders
• Handle large file sets - Display thousands of files with virtualization and pagination
• Customize the UI - Tailor toolbar, context menu, views, and navigation to your needs
• Add drag-and-drop functionality - Allow users to drag and drop files for upload or organization
• Build accessible file systems - Provide WCAG-compliant file management with keyboard navigation
• Handle complex workflows - Implement custom sorting, filtering, previewing, and multi-provider scenarios

Component Overview

The Syncfusion Blazor FileManager is a comprehensive component for file and folder management. It provides:

• Multiple file operations: Read, Create, Delete, Rename, Search, Copy, Move, Upload, Download, Get Details, GetSelectedFiles
• Flexible data binding: AJAX settings, list objects, or injected services
• Rich events system: 20+ events including PageChanging/PageChanged for pagination
• Multiple UI customizations: Toolbar, context menu, view modes (Details, LargeIcons), NavigationPaneTemplate
• File preview capabilities: ShowThumbnail property for image and file previews
• Cloud provider support: Physical files, Azure, AWS S3, Google Drive, SharePoint, Firebase, SQL, FTP
• Advanced features: Virtualization, pagination with events, drag-and-drop, custom filtering, sorting, accessibility
• Layout management: RefreshLayoutAsync for dynamic resizing and nested component scenarios
• High performance: Handles large file sets with virtualization and lazy loading

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation for Web App, Server App, WASM App, and MAUI App
• NuGet package setup and service registration
• Basic component initialization and AJAX configuration
• File provider setup and wwwroot configuration
• First file manager instance in 5 minutes

File Operations

📄 Read: references/file-operations.md

• 11 core operations: Read, Create, Delete, Rename, Search, Details, Copy, Move, Upload, Download, GetImage
• Request/response data structures and parameters
• Operation examples with code from documentation
• Public methods: DownloadFilesAsync(selectedItems), GetSelectedFiles()
• File preview capabilities with ShowThumbnail property
• Sorting functionality with SortBy and SortOrder properties

Data Binding Patterns

📄 Read: references/data-binding.md

• AjaxSettings for remote data binding
• List objects with local data and OnRead event
• Injected service pattern for complex scenarios
• FileManagerDirectoryContent structure
• When to use each binding method

Events and Callbacks

📄 Read: references/events-and-callbacks.md

• 20+ file manager events with complete signatures
• Event lifecycle and timing
• Common event handler patterns
• BeforeDownload, BeforeImageLoad, OnFileOpen events
• ItemsDeleting, ItemsDeleted, FolderCreating, FolderCreated events
• Searching, Searched, ItemRenaming, ItemRenamed events

Customization and UI

📄 Read: references/customization.md

• Toolbar customization and item configuration
• Context menu customization
• View modes: Details View, LargeIcons View
• Navigation items customization with NavigationPaneTemplate
• Custom navigation pane templates with icons and metadata
• Styling and CSS customization
• Appearance and theme configuration

File Providers and Storage

📄 Read: references/file-providers.md

• Physical file provider (local file system)
• Azure Blob Storage configuration
• Amazon S3 cloud provider
• Google Drive integration
• SharePoint Online provider
• Firebase Real-time Database
• SQL Database provider
• FTP (File Transfer Protocol) provider

Upload and Download

📄 Read: references/upload-download.md

• File upload configuration and events
• Directory upload (folder upload)
• File download with single and ZIP support
• Large file handling
• Upload progress tracking
• Download prevention and validation
• BeforeDownload event for custom logic

Advanced Features

📄 Read: references/advanced-features.md

• Virtualization for large file sets
• Pagination configuration with PageChanging and PageChanged events
• Drag and drop functionality
• Restrict drag-and-drop upload
• Custom filtering and search
• Nested items handling with RefreshLayoutAsync method
• Component integration in dialogs and containers
• Accessibility features (WCAG compliance)
• Keyboard navigation support
• Multiple file selection

Quick Start Example

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Server-side setup (Program.cs):

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();
builder.Services.AddControllers();

app.UseRouting();
app.MapControllers();

HTML setup (App.razor):

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
</body>

Common Patterns

Pattern 1: Local Data with OnRead Event

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" OnRead="OnReadAsync"></FileManagerEvents>
</SfFileManager>

@code {
    private async Task OnReadAsync(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        // Load data from your service
        var response = await YourService.GetFilesAsync(args.Path);
        args.Response = response;
    }
}

Pattern 2: Cloud Storage with Azure Provider

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/AzureProvider/FileOperations"
                             UploadUrl="/api/AzureProvider/Upload"
                             DownloadUrl="/api/AzureProvider/Download"
                             GetImageUrl="/api/AzureProvider/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Pattern 3: Programmatic Download

@ref="FileManager"

<SfButton OnClick="DownloadFiles">Download Selected</SfButton>
<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent">
    <!-- configuration -->
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;
    
    public async Task DownloadFiles()
    {
        await FileManager.DownloadFilesAsync(FileManager.SelectedItems);
    }
}

Pattern 4: Custom Event Handling

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       ItemsDeleting="OnItemsDeleting"
                       BeforeDownload="OnBeforeDownload">
    </FileManagerEvents>
</SfFileManager>

@code {
    public async Task OnItemsDeleting(ItemsDeleteEventArgs<FileManagerDirectoryContent> args)
    {
        // Validate before delete
        if (args.Files.Count > 10)
        {
            args.Cancel = true;
        }
    }

    public void OnBeforeDownload(BeforeDownloadEventArgs<FileManagerDirectoryContent> args)
    {
        // Custom download logic
    }
}

Key Properties

Common Use Cases

1. Internal Document Management

• Setup with physical file provider
• Use toolbar for CRUD operations
• Enable search and filtering
• Add event handlers for audit logging

2. Cloud-Based Team Collaboration

• Connect to Azure or AWS S3
• Enable drag-and-drop upload
• Add custom toolbar for sharing
• Implement access control via events

3. Media Library

• Enable image preview with GetImageUrl
• Use LargeIcons view for thumbnails
• Implement pagination for performance
• Add custom filtering by file type

4. Backup and Archive System

• Connect to multiple storage providers
• Enable download with compression
• Use virtualization for large datasets
• Add custom sorting and filtering

5. Public File Sharing Portal

• Restrict operations via event handlers
• Disable delete and rename
• Enable download and preview only
• Customize navigation and UI

Next Steps

1. Choose your setup: Start with Getting Started for your platform 2. Pick your data source: Read Data Binding Patterns to choose AJAX, local, or service 3. Configure file operations: Check File Operations for available actions 4. Handle events: Review Events and Callbacks for required handlers 5. Customize UI: See Customization for toolbar and themes 6. Choose storage: Select provider in File Providers

Advanced Features in Blazor FileManager

Table of Contents

• Overview
• Virtualization
• Pagination
• Drag and Drop
• Custom Filtering
• Nested Items
• Search Functionality
• Accessibility
• Multiple File Selection

Overview

The FileManager provides advanced features for handling complex scenarios:

• Virtualization - Efficiently display thousands of items
• Pagination - Load items page-by-page
• Drag & Drop - Intuitive file organization with events
• Custom Filtering - Advanced search capabilities
• Accessibility - WCAG compliance
• Multi-selection - Bulk operations

Virtualization

Best for: Large datasets (1000+ items)

From virtualization.md:

Virtualization enables dynamic loading of files without degrading performance. The component loads items based on viewport size.

Enable Virtualization

<SfFileManager TValue="FileManagerDirectoryContent" 
               View="ViewType.Details" 
               EnableVirtualization="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Virtualization in LargeIcons View

<SfFileManager TValue="FileManagerDirectoryContent" 
               View="ViewType.LargeIcons" 
               EnableVirtualization="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Virtualization Limitations

From `virtualization.md` (lines 40-60):

• SelectAllAsync() method doesn't select all items with virtualization
• CTRL+A keyboard shortcut only selects visible items
• Selected items are not maintained while scrolling

Best Practice

Use virtualization for:

• Browsing/exploring large file sets
• Performance-critical scenarios
• Mobile and low-bandwidth applications

Avoid for:

• Operations requiring all items selected
• Complex multi-item workflows

Pagination

Best for: Large datasets with navigation control

From pagination.md:

Pagination Properties

Enable Pagination

<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25"></FileManagerPageSettings>
</SfFileManager>

Configure Page Size

<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="50"></FileManagerPageSettings>
</SfFileManager>

Set Initial Page

<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25" CurrentPage="2"></FileManagerPageSettings>
</SfFileManager>

Customize Numeric Page Buttons

<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25" NumericItemsCount="5"></FileManagerPageSettings>
</SfFileManager>

Page Sizes Dropdown

Allow users to change page size dynamically:

<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25" PageSizes="@(new List<int>(){10, 25, 50})"></FileManagerPageSettings>
</SfFileManager>

Programmatic Page Navigation

Use GoToPageAsync() method to navigate to specific pages:

<SfButton OnClick="GoToPage2">Go to Page 2</SfButton>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25"></FileManagerPageSettings>
</SfFileManager>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;

    private async Task GoToPage2()
    {
        await FileManager.GoToPageAsync(2);
    }
}

Custom Pager Template

<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25">
        <Template>
            <button @onclick="NavigateToPage">Go To Specific Page</button>
        </Template>
    </FileManagerPageSettings>
</SfFileManager>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;

    private async Task NavigateToPage()
    {
        await FileManager.GoToPageAsync(3);
    }
}

Pagination Events

PageChanging Event

Triggered before the page changes. Use this to validate or prevent page navigation.

From pagination.md:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<div style="margin-bottom: 15px;">
    <SfButton OnClick="GoToPage2">Go to Page 2</SfButton>
    <span style="margin-left: 15px;">Current Page: @CurrentPage</span>
</div>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25"></FileManagerPageSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       PageChanging="OnPageChanging">
    </FileManagerEvents>
</SfFileManager>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;
    private int CurrentPage = 1;

    private async Task GoToPage2()
    {
        await FileManager.GoToPageAsync(2);
    }

    public async Task OnPageChanging(PageChangingEventArgs  args)
    {
        Console.WriteLine($"PageChanging: Moving from {args.CurrentPageIndex} to {args.NextPageIndex}");
        
        // Can cancel page change if validation fails
        if (args.NextPageIndex > 10)
        {
            args.Cancel = true;
            Console.WriteLine("Cannot navigate beyond page 10");
        }
    }
}

PageChanged Event

Triggered after the page changes successfully. Use this to perform actions after pagination.

From pagination.md:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<div style="margin-bottom: 15px;">
    <SfButton OnClick="GoToPage3">Go to Page 3</SfButton>
    <span style="margin-left: 15px;">Page Status: @PageStatus</span>
</div>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25"></FileManagerPageSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       PageChanged="OnPageChanged">
    </FileManagerEvents>
</SfFileManager>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;
    private string PageStatus = "Page 1";

    private async Task GoToPage3()
    {
        await FileManager.GoToPageAsync(3);
    }

    public async Task OnPageChanged(PageChangedEventArgs args)
    {
        CurrentPage = args.NextPageIndex;
        PageStatus = $"Page {args.NextPageIndex} loaded";
        
        Console.WriteLine($"PageChanged: Now on page {args.NextPageIndex}");
        Console.WriteLine($"Previous page was: {args.CurrentPageIndex}");
    }
}

Combined Pagination Events

Handle both events to implement comprehensive page navigation:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<div style="margin-bottom: 15px;">
    <SfButton OnClick="GoToPage2">Page 2</SfButton>
    <SfButton OnClick="GoToPage5">Page 5</SfButton>
    <span style="margin-left: 15px;">@PaginationMessage</span>
</div>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" AllowPaging="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerPageSettings PageSize="25"></FileManagerPageSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       PageChanging="OnPageChanging"
                       PageChanged="OnPageChanged">
    </FileManagerEvents>
</SfFileManager>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;
    private int CurrentPage = 1;
    private string PaginationMessage = "Current: Page 1";
    private bool IsNavigating = false;

    private async Task GoToPage2() => await FileManager.GoToPageAsync(2);
    private async Task GoToPage5() => await FileManager.GoToPageAsync(5);

    public async Task OnPageChanging(PageChangingEventArgs  args)
    {
        IsNavigating = true;
        PaginationMessage = $"Loading page {args.NextPageIndex}...";
        
        // Validate page range
        if (args.NextPageIndex > 20)
        {
            args.Cancel = true;
            PaginationMessage = "Maximum 20 pages available";
        }
    }

    public async Task OnPageChanged(PageChangedEventArgs args)
    {
        IsNavigating = false;
        CurrentPage = args.NextPageIndex;
        PaginationMessage = $"Current: Page {args.NextPageIndex}";
        
        // Perform post-navigation actions
        Console.WriteLine($"Successfully navigated to page {args.NextPageIndex}");
        
        // Example: Log analytics, update UI state, etc.
        await LogPageNavigation(args.CurrentPageIndex, args.NextPageIndex);
    }

    private async Task LogPageNavigation(int from, int to)
    {
        // Example logging
        Console.WriteLine($"User navigated from page {from} to page {to}");
    }
}

Drag and Drop

Best for: Intuitive file organization and movement

From drag-and-drop.md:

Enable Drag and Drop

Drag and drop is enabled by default for:

• Moving files between folders
• Uploading files from desktop
• Organizing items

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Control Drag and Drop

Use AllowDragAndDrop property on SfFileManager (not upload settings):

<SfFileManager TValue="FileManagerDirectoryContent" AllowDragAndDrop="false">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Disable Drag and Drop

To disable drag-drop operations entirely:

<SfFileManager TValue="FileManagerDirectoryContent" AllowDragAndDrop="false">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Drag and Drop Events

From drag-and-drop.md:

OnFileDragStart Event

Triggered when user starts dragging a file:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       OnFileDragStart="OnDragStart">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public void OnDragStart(FileDragEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Started dragging {args.FileDetails.Count} items");
    }
}

OnFileDragStop Event

Triggered when user stops dragging:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       OnFileDragStop="OnDragStop">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public void OnDragStop(FileDragEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine("Stopped dragging");
    }
}

FileDropped Event

Triggered when files are dropped:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       FileDropped="OnFileDropped">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public void OnFileDropped(FileDragEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Dropped {args.FileDetails.Count} files at {args.DropPath}");
        
        // Can validate and cancel drop
        if (args.DropPath.Contains("ReadOnly"))
        {
            args.Cancel = true;
        }
    }
}

Drag and Drop Move Operation

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       ItemsMoving="OnItemsMoving"
                       ItemsMoved="OnItemsMoved">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public async Task OnItemsMoving(ItemsMoveEventArgs<FileManagerDirectoryContent> args)
    {
        // Validate move operation
        if (args.TargetPath.Contains("ReadOnly"))
        {
            args.Cancel = true;
            Console.WriteLine("Cannot move to read-only folder");
        }
    }

    public async Task OnItemsMoved(ItemsMoveEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Moved {args.FileDetails.Count} items");
    }
}

Custom Filtering

Best for: Advanced search and filtering scenarios

From perform-custom-filtering.md:

Implement Custom Filtering

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Inputs

<SfTextBox Placeholder="Filter by name" @bind-Value="@FilterText" 
           ValueChanged="@OnFilterChanged">
</SfTextBox>

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       OnRead="OnRead">
    </FileManagerEvents>
</SfFileManager>

@code {
    private string FilterText = "";
    private List<FileManagerDirectoryContent> AllData = new();

    private async Task OnFilterChanged(string value)
    {
        FilterText = value;
    }

    private async Task OnRead(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        var allItems = await FetchAllItems(args.Path);
        
        // Apply filter
        var filtered = allItems.Where(x => 
            x.Name.Contains(FilterText, StringComparison.OrdinalIgnoreCase)
        ).ToList();

        FileManagerResponse<FileManagerDirectoryContent> response = 
            new FileManagerResponse<FileManagerDirectoryContent>()
        {
            CWD = allItems.FirstOrDefault(),
            Files = filtered
        };
        
        args.Response = response;
    }
}

Filter by File Type

@code {
    private string SelectedFileType = "";

    private async Task OnRead(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        var allItems = await FetchAllItems(args.Path);
        
        // Filter by file type
        var filtered = !string.IsNullOrEmpty(SelectedFileType) 
            ? allItems.Where(x => x.Type == SelectedFileType).ToList()
            : allItems;

        FileManagerResponse<FileManagerDirectoryContent> response = 
            new FileManagerResponse<FileManagerDirectoryContent>()
        {
            CWD = allItems.FirstOrDefault(),
            Files = filtered
        };
        
        args.Response = response;
    }
}

Filter by Size Range

@code {
    private long MinSize = 0;
    private long MaxSize = long.MaxValue;

    private async Task OnRead(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        var allItems = await FetchAllItems(args.Path);
        
        // Filter by size
        var filtered = allItems.Where(x => 
            x.Size >= MinSize && x.Size <= MaxSize
        ).ToList();

        FileManagerResponse<FileManagerDirectoryContent> response = 
            new FileManagerResponse<FileManagerDirectoryContent>()
        {
            CWD = allItems.FirstOrDefault(),
            Files = filtered
        };
        
        args.Response = response;
    }
}

Nested Items

Best for: Hierarchical file structures

From nested-items.md:

Nested Item Structure

The FileManager supports hierarchical navigation:

var rootFolder = new FileManagerDirectoryContent
{
    Id = "1",
    ParentId = null,
    Name = "Root",
    HasChild = true,
    IsFile = false
};

var subfolder = new FileManagerDirectoryContent
{
    Id = "2",
    ParentId = "1",
    Name = "SubFolder",
    HasChild = true,
    IsFile = false
};

var file = new FileManagerDirectoryContent
{
    Id = "3",
    ParentId = "2",
    Name = "document.pdf",
    HasChild = false,
    IsFile = true
};

Navigation Example

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       OnRead="OnRead">
    </FileManagerEvents>
</SfFileManager>

@code {
    private List<FileManagerDirectoryContent> AllItems = new();

    private async Task OnRead(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        // Filter items by parent ID to show nested structure
        var parentId = args.Folder?.FirstOrDefault()?.Id;
        
        var items = AllItems.Where(x => 
            (string.IsNullOrEmpty(parentId) && string.IsNullOrEmpty(x.ParentId)) ||
            x.ParentId == parentId
        ).ToList();

        FileManagerResponse<FileManagerDirectoryContent> response = 
            new FileManagerResponse<FileManagerDirectoryContent>()
        {
            Files = items
        };
        
        args.Response = response;
    }
}

RefreshLayoutAsync

Purpose: Refresh the FileManager layout when inside a container (e.g., Dialog) that changes size

Signature:

From nested-items.md:

public async Task RefreshLayoutAsync()

Use Case: When FileManager is placed inside a Dialog component and the dialog is opened, the layout needs to be recalculated.

Example: FileManager Inside Dialog

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="@ShowDialog">Open File Manager</SfButton>

<SfDialog Width="800px" Height="600px" ShowCloseIcon="true" AllowDragging="true" 
          Visible="@IsDialogVisible" OnOpen="@OnDialogOpened">
    <DialogTemplates>
        <Header>File Manager</Header>
        <Content>
            <SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent">
                <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                                         UploadUrl="/api/FileManager/Upload"
                                         DownloadUrl="/api/FileManager/Download"
                                         GetImageUrl="/api/FileManager/GetImage">
                </FileManagerAjaxSettings>
            </SfFileManager>
        </Content>
        <FooterTemplate>
            <SfButton OnClick="@HideDialog">Close</SfButton>
        </FooterTemplate>
    </DialogTemplates>
</SfDialog>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;
    private SfDialog Dialog;
    private bool IsDialogVisible = false;

    private void ShowDialog()
    {
        IsDialogVisible = true;
    }

    private void HideDialog()
    {
        IsDialogVisible = false;
    }

    private async Task OnDialogOpened()
    {
        // Refresh FileManager layout when dialog is opened
        if (FileManager != null)
        {
            await FileManager.RefreshLayoutAsync();
        }
    }
}

Example: Dynamic Resizing

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div>
    <SfButton OnClick="@ShowDialog">Open File Manager</SfButton>
    <SfButton OnClick="@ToggleDialogSize">Resize Dialog</SfButton>
</div>

<SfDialog @ref="Dialog" 
          Width="@DialogWidth" 
          Height="@DialogHeight" 
          ShowCloseIcon="true" 
          AllowDragging="true"
          AllowResizing="true"
          OnResizeStop="@OnDialogResized">
    <DialogTemplates>
        <Header>File Manager in Dialog</Header>
        <Content>
            <SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent">
                <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                                         UploadUrl="/api/FileManager/Upload"
                                         DownloadUrl="/api/FileManager/Download"
                                         GetImageUrl="/api/FileManager/GetImage">
                </FileManagerAjaxSettings>
            </SfFileManager>
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    private SfFileManager<FileManagerDirectoryContent> FileManager;
    private SfDialog Dialog;
    private string DialogWidth = "800px";
    private string DialogHeight = "600px";
    private bool IsDialogVisible = false;

    private void ShowDialog()
    {
        IsDialogVisible = true;
    }

    private void ToggleDialogSize()
    {
        DialogWidth = DialogWidth == "800px" ? "1000px" : "800px";
        DialogHeight = DialogHeight == "600px" ? "700px" : "600px";
    }

    private async Task OnDialogResized()
    {
        // Refresh layout when dialog is resized
        if (FileManager != null)
        {
            await FileManager.RefreshLayoutAsync();
        }
    }
}

Search Functionality

Best for: Finding files across directories

Implement Search

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       Searching="OnSearching">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public async Task OnSearching(SearchEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Searching for: {args.SearchText}");
        // Implement search logic
    }
}

Search with Wildcards

// From file-operations.md
case "search":
    return this.operation.ToCamelCase(this.operation.Search(
        args.Path, 
        args.SearchString,      // "*pattern*" format
        args.ShowHiddenItems, 
        args.CaseSensitive
    ));

Accessibility

Best for: WCAG compliance, inclusive design

From accessibility.md:

Keyboard Navigation

The FileManager supports:

• Tab - Navigate between elements
• Enter - Open selected file/folder
• Delete - Delete selected items
• Ctrl+A - Select all items (visible items with virtualization)
• Ctrl+C - Copy items
• Ctrl+X - Cut items
• Ctrl+V - Paste items
• F2 - Rename selected item
• Shift+Click - Range selection

ARIA Attributes

<SfFileManager TValue="FileManagerDirectoryContent" 
               AriaLabel="File Manager Application">
    <!-- Configuration -->
</SfFileManager>

Screen Reader Support

The FileManager provides:

• Proper heading levels
• ARIA labels for all controls
• Item descriptions
• Status messages

High Contrast Support

<!-- In App.razor, choose high contrast theme -->
<link href="_content/Syncfusion.Blazor.Themes/highcontrast.css" rel="stylesheet" />

Multiple File Selection

Best for: Bulk operations

Enable Multi-Selection

Multi-selection is enabled by default. Users can:

• Click + Ctrl - Select multiple items
• Click + Shift - Select range (with EnableRangeSelection)
• Toolbar "SelectAll" - Select all visible items

<SfFileManager TValue="FileManagerDirectoryContent" AllowMultiSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Enable Range Selection

From multiple-file-selection.md:

<SfFileManager TValue="FileManagerDirectoryContent" 
               AllowMultiSelection="true"
               EnableRangeSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Programmatic Multi-Selection

<SfButton OnClick="SelectMultiple">Select Multiple Files</SfButton>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent"
               AllowMultiSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent>? FileManager;

    public async Task SelectMultiple()
    {
        // FileManager.SelectedItems contains all selected items
        var selectedCount = FileManager?.SelectedItems.Count ?? 0;
        Console.WriteLine($"Selected {selectedCount} items");
    }
}

Bulk Operations

@code {
    public async Task DeleteSelected()
    {
        if (FileManager?.SelectedItems.Count > 0)
        {
            // Perform operation on all selected items
            var selectedNames = FileManager.SelectedItems
                .Select(x => x.Name)
                .ToArray();
            
            Console.WriteLine($"Deleting: {string.Join(", ", selectedNames)}");
        }
    }

    public async Task DownloadSelected()
    {
        if (FileManager?.SelectedItems.Count > 0)
        {
            await FileManager.DownloadFilesAsync(FileManager.SelectedItems);
        }
    }
}

Virtualization with Selection Limitation

From `virtualization.md` (lines 40-60):

When virtualization is enabled:

• Cannot use SelectAllAsync() to select all items
• CTRL+A only selects visible items
• Selected state not preserved during scrolling

Complete Advanced Features Example

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<div style="margin-bottom: 20px;">
    <SfButton OnClick="SelectMultiple">Select All Visible</SfButton>
    <SfButton OnClick="DownloadSelected">Download Selected</SfButton>
    <span style="margin-left: 20px;">Selected: @(FileManager?.SelectedItems.Count ?? 0)</span>
</div>

<SfFileManager @ref="FileManager" 
               TValue="FileManagerDirectoryContent" 
               View="ViewType.Details"
               AllowMultiSelection="true"
               EnableRangeSelection="true"
               AllowDragAndDrop="true"
               EnableVirtualization="false"
               EnablePagination="true"
               PageSize="50">
    
    <FileManagerDetailsViewSettings>
        <FileManagerColumns>
            <FileManagerColumn Field="Name" HeaderText="Name" Width="200"></FileManagerColumn>
            <FileManagerColumn Field="Size" HeaderText="Size" Width="100"></FileManagerColumn>
            <FileManagerColumn Field="DateModified" HeaderText="Modified" Width="150"></FileManagerColumn>
        </FileManagerColumns>
    </FileManagerDetailsViewSettings>

    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       ItemsMoving="OnItemsMoving"
                       OnSearching="OnSearching"
                       FileDropped="OnFileDropped">
    </FileManagerEvents>
    
    <FileManagerUploadSettings DirectoryUpload="true">
    </FileManagerUploadSettings>

    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent>? FileManager;

    public async Task SelectMultiple()
    {
        Console.WriteLine($"Selected: {FileManager?.SelectedItems.Count}");
    }

    public async Task DownloadSelected()
    {
        if (FileManager?.SelectedItems.Count > 0)
        {
            await FileManager.DownloadFilesAsync(FileManager.SelectedItems);
        }
    }

    public async Task OnItemsMoving(ItemsMoveEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Moving to {args.TargetPath}");
    }

    public async Task OnSearching(SearchEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Searching for: {args.SearchText}");
    }

    public void OnFileDropped(FileDragEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Dropped at {args.DropPath}");
    }
}

Next Steps

• See File Operations for search operation details
• Check Events and Callbacks for event patterns
• Review Upload and Download for bulk file operations

Customization and UI in Blazor FileManager

Table of Contents

• Overview
• Toolbar Customization
• Toolbar Events
• Context Menu
• Context Menu Events
• View Modes
• Multiple Selection
• Navigation Customization
• Styling and Appearance

Overview

The FileManager provides extensive customization options for:

• Toolbar - Customize buttons, visibility, and custom items
• Context Menu - Customize right-click menu items
• Views - Switch between Details and LargeIcons view
• Multi-selection - Enable range selection for bulk operations
• Navigation - Customize breadcrumb and sidebar navigation
• Styling - Apply custom CSS and themes

Toolbar Customization

Toolbar Visibility

From toolbar.md:

Control toolbar visibility using the Visible property:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerToolbarSettings Visible="true">
    </FileManagerToolbarSettings>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

To hide the toolbar:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerToolbarSettings Visible="false">
    </FileManagerToolbarSettings>
    <!-- Other configuration -->
</SfFileManager>

Toolbar Items

The toolbar shows different buttons based on selection state:

Built-in Toolbar Items

• NewFolder - Creates a new folder
• Upload - Enables file upload
• Delete - Deletes selected items
• Download - Downloads selected items
• Rename - Renames selected item
• SortBy - Sort by Name, Size, Date Modified, Date Created
• Refresh - Refreshes the file list
• View - Toggle between Details and LargeIcons
• Details - Shows file details panel
• Selection - Select all/none
• Cut - Cut selected items
• Copy - Copy selected items
• Paste - Paste items

Configure Toolbar Items

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerToolbarSettings ToolbarItems="@Items">
    </FileManagerToolbarSettings>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    private List<ToolBarItemModel> Items = new List<ToolBarItemModel>()
    {
        new ToolBarItemModel() { Name = "NewFolder" },
        new ToolBarItemModel() { Name = "Upload" },
        new ToolBarItemModel() { Name = "Delete" },
        new ToolBarItemModel() { Name = "Download" },
        new ToolBarItemModel() { Name = "Rename" },
        new ToolBarItemModel() { Name = "SortBy" },
        new ToolBarItemModel() { Name = "Refresh" }
    };
}

Custom Toolbar Items

From add-custom-tool-bar.md:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerToolbarSettings ToolbarItems="@Items">
        <FileManagerCustomToolbarItems>
            <FileManagerCustomToolbarItem Name="CustomAction">
                <Template>
                    <SfButton CssClass="e-tbar-btn e-tbtn-txt" OnClick="OnCustomActionClick">
                        <span class="e-tbar-btn-text">Custom Action</span>
                    </SfButton>
                </Template>
            </FileManagerCustomToolbarItem>
        </FileManagerCustomToolbarItems>
    </FileManagerToolbarSettings>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    private List<ToolBarItemModel> Items = new List<ToolBarItemModel>()
    {
        new ToolBarItemModel() { Name = "NewFolder" },
        new ToolBarItemModel() { Name = "Upload" },
        new ToolBarItemModel() { Name = "Delete" },
        new ToolBarItemModel() { Name = "Download" },
        new ToolBarItemModel() { Name = "Refresh" },
        new ToolBarItemModel() { Name = "CustomAction" }
    };

    private void OnCustomActionClick()
    {
        Console.WriteLine("Custom action clicked");
    }
}

Toolbar Events

ToolbarCreated Event

From toolbar.md:

Triggered before the toolbar items are created:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" ToolbarCreated="OnToolbarCreated">
    </FileManagerEvents>
</SfFileManager>

@code {
    public void OnToolbarCreated(ToolbarCreateEventArgs args)
    {
        Console.WriteLine("Toolbar created");
        // Add custom toolbar items or modify existing ones
    }
}

ToolbarItemClicked Event

Triggered when a toolbar item is clicked:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" ToolbarItemClicked="OnToolbarItemClicked">
    </FileManagerEvents>
</SfFileManager>

@code {
    public void OnToolbarItemClicked(ToolbarClickEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Toolbar item clicked: {args.Item.Name}");
    }
}

Context Menu

Context Menu Structure

From context-menu.md:

The FileManager context menu has three configurable sections:

Configure Context Menu

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerContextMenuSettings File="@FileMenuItems" 
                                     Folder="@FolderMenuItems"
                                     Layout="@LayoutMenuItems">
    </FileManagerContextMenuSettings>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public string[] FileMenuItems = new string[] { "Delete", "Download", "Rename", "|", "Details" };
    public string[] FolderMenuItems = new string[] { "Open", "Rename", "Delete", "|", "Details" };
    public string[] LayoutMenuItems = new string[] { "NewFolder", "Upload", "Refresh", "|", "View", "SortBy" };
}

Default Menu Items

Add Custom Context Menu Items

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerContextMenuSettings File="@FileMenuItems" 
                                     Folder="@FolderMenuItems">
    </FileManagerContextMenuSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="OnMenuOpened">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public string[] FileMenuItems = new string[] { "Open", "Delete", "Rename", "Download", "Custom" };
    public string[] FolderMenuItems = new string[] { "Open", "Rename", "Delete", "Custom" };

    public void OnMenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
    {
        // Add icon to custom menu item
        foreach (var item in args.Items)
        {
            if (item.Text == "Custom")
            {
                item.IconCss = "e-icons e-fe-tick";
            }
        }
    }
}

Enable/Disable Context Menu Items

@code {
    public void OnMenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
    {
        bool isFile = args.FileDetails.Any(detail => detail.IsFile);

        foreach (var item in args.Items)
        {
            if (item.Text == "Cut")
            {
                item.Disabled = isFile;  // Disable Cut for files
            }
        }
    }
}

Show/Hide Context Menu Items

@code {
    public void OnMenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
    {
        bool isFile = args.FileDetails.Any(file => file.IsFile);

        foreach (var item in args.Items)
        {
            if (item.Text == "Cut")
            {
                item.Hidden = !isFile;  // Hide Cut for folders
            }
        }
    }
}

Context Menu Events

MenuOpened Event

From context-menu.md:

Triggered before the context menu is displayed:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" MenuOpened="OnMenuOpened">
    </FileManagerEvents>
</SfFileManager>

@code {
    public void OnMenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Menu opened for items: {args.FileDetails.Count}");
    }
}

OnMenuClick Event

Triggered when a context menu item is clicked:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" OnMenuClick="OnMenuClick">
    </FileManagerEvents>
</SfFileManager>

@code {
    public void OnMenuClick(MenuClickEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Menu item clicked: {args.Item.Text}");
    }
}

View Modes

Available View Types

From views.md:

Note: FileManager only has Details and LargeIcons view types. GridView is not available.

Setting View Mode

<SfFileManager TValue="FileManagerDirectoryContent" View="ViewType.Details">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Details View with Custom Columns

From views.md:

<SfFileManager TValue="FileManagerDirectoryContent" View="ViewType.Details">
    <FileManagerDetailsViewSettings>
        <FileManagerColumns>
            <FileManagerColumn Field="Name" HeaderText="Name" Width="200"></FileManagerColumn>
            <FileManagerColumn Field="Size" HeaderText="Size" Width="100"></FileManagerColumn>
            <FileManagerColumn Field="DateModified" 
                              HeaderText="Modified" 
                              Format="MM/dd/yyyy h:mm tt"
                              Width="150">
            </FileManagerColumn>
        </FileManagerColumns>
    </FileManagerDetailsViewSettings>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Custom Column Template

<FileManagerDetailsViewSettings>
    <FileManagerColumns>
        <FileManagerColumn Field="Name" HeaderText="Filename" Width="250">
            <Template>
                @{
                    var data = (context as FileManagerDirectoryContent);
                    <div>
                        <span class="e-list-icon e-fe-file"></span>
                        <span>@data?.Name</span>
                    </div>
                }
            </Template>
        </FileManagerColumn>
        <FileManagerColumn Field="Size" HeaderText="File Size" Width="120">
            <Template>
                @{
                    var data = (context as FileManagerDirectoryContent);
                    <div>@FormatBytes(data?.Size ?? 0)</div>
                }
            </Template>
        </FileManagerColumn>
    </FileManagerColumns>
</FileManagerDetailsViewSettings>

@code {
    private string FormatBytes(long bytes)
    {
        string[] sizes = { "B", "KB", "MB", "GB" };
        double len = bytes;
        int order = 0;
        while (len >= 1024 && order < sizes.Length - 1)
        {
            order++;
            len = len / 1024;
        }
        return $"{len:0.##} {sizes[order]}";
    }
}

LargeIcons View with Custom Template

From views.md:

<SfFileManager TValue="FileManagerDirectoryContent" CssClass="e-fm-template-sample">
    <ChildContent>
        <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                                 UploadUrl="/api/FileManager/Upload"
                                 DownloadUrl="/api/FileManager/Download"
                                 GetImageUrl="/api/FileManager/GetImage">
        </FileManagerAjaxSettings>
    </ChildContent>
    <LargeIconsTemplate Context="item">
        @if (item is not null)
        {
            <div class="custom-icon-card">
                <div class="file-name" title="@item.Name">@item.Name</div>
                <div class="@GetFileTypeCssClass(item)"></div>
                <div class="file-date">@item.DateModified.ToString("MM/dd/yyyy")</div>
            </div>
        }
    </LargeIconsTemplate>
</SfFileManager>

@code {
    private string GetFileTypeCssClass(FileManagerDirectoryContent item)
    {
        if (!item.IsFile)
        {
            return $"e-list-icon e-fe-folder";
        }
        var ext = System.IO.Path.GetExtension(item.Name)?.TrimStart('.') ?? string.Empty;
        var type = ExtensionIconClassMap.GetValueOrDefault(ext, "unknown");
        return $"e-list-icon e-fe-{type}";
    }
    
    private static readonly Dictionary<string, string> ExtensionIconClassMap = 
        new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
    {
        { "jpg", "image" }, { "jpeg", "image" }, { "png", "image" }, { "gif", "image" },
        { "mp3", "music" }, { "wav", "music" }, { "mp4", "video" }, { "avi", "video" },
        { "xlsx", "xlsx" }, { "xls", "xlsx" }, { "pptx", "pptx" }, { "ppt", "pptx" },
        { "zip", "zip" }, { "txt", "txt" }, { "pdf", "pdf" }, { "doc", "doc" }, { "docx", "docx" }
    };
}

Multiple Selection

Enable Multiple Selection

The FileManager has AllowMultiSelection property for bulk operations:

<SfFileManager TValue="FileManagerDirectoryContent" AllowMultiSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Range Selection

From multiple-file-selection.md:

Enable EnableRangeSelection for selecting ranges with Shift+Click:

<SfFileManager TValue="FileManagerDirectoryContent" 
               AllowMultiSelection="true"
               EnableRangeSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

File Selection Events

<SfFileManager TValue="FileManagerDirectoryContent" AllowMultiSelection="true">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       FileSelected="OnFileSelected"
                       FileSelection="OnFileSelection">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public void OnFileSelected(FileSelectEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"File selected: {args.FileDetails.Count} items");
    }

    public void OnFileSelection(FileSelectionEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"File selection changed: {args.FileDetails.Count} items");
        // Can cancel selection or modify it
        args.Cancel = false;
    }
}

Bulk Operations Example

<SfButton OnClick="DeleteSelected">Delete Selected</SfButton>
<SfButton OnClick="DownloadSelected">Download Selected</SfButton>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" AllowMultiSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;

    public async Task DeleteSelected()
    {
        if (FileManager?.SelectedItems.Count > 0)
        {
            Console.WriteLine($"Deleting {FileManager.SelectedItems.Count} items");
        }
    }

    public async Task DownloadSelected()
    {
        if (FileManager?.SelectedItems.Count > 0)
        {
            await FileManager.DownloadFilesAsync(FileManager.SelectedItems);
        }
    }
}

Navigation Customization

Customize Navigation Items

From customize-navigation-items.md:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerNavigationPaneSettings Items="@NavItems">
    </FileManagerNavigationPaneSettings>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    private List<NavigationItemModel> NavItems = new List<NavigationItemModel>()
    {
        new NavigationItemModel() { Text = "Documents", Path = "/Documents/" },
        new NavigationItemModel() { Text = "Pictures", Path = "/Pictures/" },
        new NavigationItemModel() { Text = "Downloads", Path = "/Downloads/" },
        new NavigationItemModel() { Text = "Videos", Path = "/Videos/" }
    };
}

Styling and Appearance

Theme Configuration

From styles.md:

Available themes:

• bootstrap5
• bootstrap4
• material
• material3
• fabric
• fluent
• fluent2
• tailwind
• highcontrast

Set Theme in HTML

<!-- Add to App.razor <head> section -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Custom CSS Styling

<SfFileManager TValue="FileManagerDirectoryContent" CssClass="custom-filemanager">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

<style>
    .custom-filemanager .e-toolbar {
        background-color: #f5f5f5;
    }
    
    .custom-filemanager .e-list-item.e-active {
        background-color: #007bff;
        color: white;
    }
</style>

Complete Customization Example

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<div style="height: 600px;">
    <SfFileManager TValue="FileManagerDirectoryContent" 
                   View="ViewType.Details"
                   AllowMultiSelection="true"
                   EnableRangeSelection="true"
                   CssClass="custom-filemanager">
        
        <FileManagerToolbarSettings Visible="true" ToolbarItems="@ToolbarItems">
        </FileManagerToolbarSettings>
        
        <FileManagerDetailsViewSettings>
            <FileManagerColumns>
                <FileManagerColumn Field="Name" HeaderText="Name" Width="250"></FileManagerColumn>
                <FileManagerColumn Field="Size" HeaderText="Size" Width="100"></FileManagerColumn>
                <FileManagerColumn Field="DateModified" Format="MM/dd/yyyy" HeaderText="Modified"></FileManagerColumn>
            </FileManagerColumns>
        </FileManagerDetailsViewSettings>

        <FileManagerContextMenuSettings File="@FileMenuItems" Folder="@FolderMenuItems">
        </FileManagerContextMenuSettings>

        <FileManagerEvents TValue="FileManagerDirectoryContent" 
                          ToolbarCreated="OnToolbarCreated"
                          ToolbarItemClicked="OnToolbarItemClicked"
                          MenuOpened="OnMenuOpened"
                          OnMenuClick="OnMenuClick"
                          FileSelected="OnFileSelected">
        </FileManagerEvents>

        <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                                 UploadUrl="/api/FileManager/Upload"
                                 DownloadUrl="/api/FileManager/Download"
                                 GetImageUrl="/api/FileManager/GetImage">
        </FileManagerAjaxSettings>
    </SfFileManager>
</div>

@code {
    private List<ToolBarItemModel> ToolbarItems = new List<ToolBarItemModel>()
    {
        new ToolBarItemModel() { Name = "NewFolder" },
        new ToolBarItemModel() { Name = "Upload" },
        new ToolBarItemModel() { Name = "Delete" },
        new ToolBarItemModel() { Name = "Refresh" }
    };

    private string[] FileMenuItems = new string[] { "Open", "Delete", "Rename", "Download" };
    private string[] FolderMenuItems = new string[] { "Open", "Rename", "Delete" };

    private void OnToolbarCreated(ToolbarCreateEventArgs args)
    {
        Console.WriteLine("Toolbar created");
    }

    private void OnToolbarItemClicked(ToolbarClickEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Toolbar item clicked: {args.Item.Name}");
    }

    private void OnMenuOpened(MenuOpenEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine("Context menu opened");
    }

    private void OnMenuClick(MenuClickEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Menu item clicked: {args.Item.Text}");
    }

    private void OnFileSelected(FileSelectEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Files selected: {args.FileDetails.Count}");
    }
}

Navigation Pane Template

The navigation pane displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node using the NavigationPaneTemplate property. This allows you to modify folder appearance, add custom icons, or display additional metadata.

Customize Navigation Pane

From customize-navigation-items.md:

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <ChildContent>
        <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                                 UploadUrl="/api/FileManager/Upload"
                                 DownloadUrl="/api/FileManager/Download"
                                 GetImageUrl="/api/FileManager/GetImage">
        </FileManagerAjaxSettings>
    </ChildContent>
    <NavigationPaneTemplate>
        <div class="e-nav-pane-node" style="display: inline-flex; align-items: center;">
            @if (context is FileManagerDirectoryContent item)
            {
                <span class="folder-icon" style="margin-right: 8px;">📁</span>
                <span class="folder-name" style="margin-left:8px;">@item.Name</span>
            }
        </div>
    </NavigationPaneTemplate>
</SfFileManager>

Advanced Navigation Pane with Custom Icons and Metadata

<SfFileManager TValue="FileManagerDirectoryContent">
    <ChildContent>
        <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                                 UploadUrl="/api/FileManager/Upload"
                                 DownloadUrl="/api/FileManager/Download"
                                 GetImageUrl="/api/FileManager/GetImage">
        </FileManagerAjaxSettings>
    </ChildContent>
    <NavigationPaneTemplate>
        <div class="custom-nav-item" style="padding: 5px; border-radius: 4px;">
            @if (context is FileManagerDirectoryContent item)
            {
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div style="display: flex; align-items: center;">
                        @if (item.HasChild)
                        {
                            <span style="margin-right: 8px;">📂</span>
                        }
                        else
                        {
                            <span style="margin-right: 8px;">📁</span>
                        }
                        <span>@item.Name</span>
                    </div>
                    <span style="font-size: 12px; color: #999;">@(item.DateModified?.ToString("MM/dd/yyyy") ?? "")</span>
                </div>
            }
        </div>
    </NavigationPaneTemplate>
</SfFileManager>

Next Steps

• See Advanced Features for additional customization options
• Check File Providers for provider-specific customizations
• Review Events and Callbacks for event-driven customization

Data Binding in Blazor FileManager

Table of Contents

• Overview
• Data Binding Methods
• AJAX Settings
• List Objects with Events
• Injected Service Pattern
• FileManagerDirectoryContent
• Comparison and Selection

Overview

The Blazor FileManager supports multiple data binding methods to load file and folder data. Each method serves different scenarios:

• AjaxSettings - For remote REST APIs
• List Objects - For local data with event handlers
• Injected Service - For dependency-injected services with complex logic

From `data-binding.md` (lines 1-50):

The FileManager uses the SfFileManager component with generic type TValue (typically FileManagerDirectoryContent) to load and manage file data from various sources.

Data Binding Methods

Method 1: AjaxSettings (Remote REST API)

Best for: External APIs, cloud services, distributed systems

Advantages:

• Simple configuration
• Decoupled from Blazor component
• Scales well for large datasets
• Works with any backend service

Example:

From data-binding.md (lines 75-95):

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/SampleData/FileOperations">
    </FileManagerAjaxSettings>
</SfFileManager>

With Upload/Download:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/SampleData/FileOperations"
                             UploadUrl="/api/SampleData/Upload"
                             DownloadUrl="/api/SampleData/Download"
                             GetImageUrl="/api/SampleData/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Method 2: List Objects with Events

Best for: Local data, server-side rendering, integrated services

Advantages:

• Full control over data
• Event-driven architecture
• Easy debugging
• No separate API needed

Basic Pattern:

From data-binding.md (lines 120-180):

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" OnRead="OnReadAsync"></FileManagerEvents>
</SfFileManager>

@code
{
    List<FileManagerDirectoryContent> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = GetData();
    }

    private async Task OnReadAsync(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        string path = args.Path;
        List<FileManagerDirectoryContent> fileDetails = args.Folder;
        FileManagerResponse<FileManagerDirectoryContent> response = new FileManagerResponse<FileManagerDirectoryContent>();
        
        if (path == "/")
        {
            string ParentId = Data
                .Where(x => string.IsNullOrEmpty(x.ParentId))
                .Select(x => x.Id).First();
            response.CWD = Data
                .Where(x => string.IsNullOrEmpty(x.ParentId)).First();
            response.Files = Data
                .Where(x => x.ParentId == ParentId).ToList();
        }
        else
        {
            var childItem = fileDetails.Count > 0 && fileDetails[0] != null ? fileDetails[0] : Data
                .Where(x => x.FilterPath == path).First();
            response.CWD = childItem;
            response.Files = Data
                .Where(x => x.ParentId == childItem.Id).ToList();
        }
        
        await Task.Yield();
        args.Response = response;
    }

    private List<FileManagerDirectoryContent> GetData()
    {
        List<FileManagerDirectoryContent> data = new List<FileManagerDirectoryContent>();
        data.Add(new FileManagerDirectoryContent()
        {
            CaseSensitive = false,
            DateCreated = new DateTime(2022, 1, 2),
            DateModified = new DateTime(2022, 2, 3),
            FilterPath = "",
            FilterId = "",
            HasChild = true,
            Id = "0",
            IsFile = false,
            Name = "Files",
            ParentId = null,
            ShowHiddenItems = false,
            Size = 1779448,
            Type = "folder"
        });
        // Add more items...
        return data;
    }
}

Method 3: Injected Service

Best for: Complex scenarios, shared business logic, testability

Advantages:

• Dependency injection
• Reusable service
• Easy to test
• Separates concerns

Service Setup:

From data-binding.md (lines 250-350):

using Syncfusion.Blazor.FileManager;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class FileManagerService
{
    List<FileManagerDirectoryContent> Data = new List<FileManagerDirectoryContent>();
    
    public FileManagerService()
    {
        InitializeData();
    }

    public async Task<FileManagerResponse<FileManagerDirectoryContent>> ReadAsync(
        string path, 
        List<FileManagerDirectoryContent> fileDetails)
    {
        FileManagerResponse<FileManagerDirectoryContent> response = 
            new FileManagerResponse<FileManagerDirectoryContent>();
        
        if (path == "/")
        {
            string ParentId = Data
                .Where(x => string.IsNullOrEmpty(x.ParentId))
                .Select(x => x.Id).First();
            response.CWD = Data
                .Where(x => string.IsNullOrEmpty(x.ParentId)).First();
            response.Files = Data
                .Where(x => x.ParentId == ParentId).ToList();
        }
        else
        {
            var id = fileDetails.Count > 0 && fileDetails[0] != null ? 
                fileDetails[0].Id : 
                Data.Where(x => x.FilterPath == path).Select(x => x.ParentId).First();
            
            response.CWD = Data
                .Where(x => x.Id == (fileDetails.Count > 0 && fileDetails[0] != null ? 
                    fileDetails[0].Id : id)).First();
            response.Files = Data
                .Where(x => x.ParentId == (fileDetails.Count > 0 && fileDetails[0] != null ? 
                    fileDetails[0].Id : id)).ToList();
        }
        
        await Task.Yield();
        return await Task.FromResult(response);
    }

    public async Task<FileManagerResponse<FileManagerDirectoryContent>> DeleteAsync(
        string path, 
        string[] names, 
        FileManagerDirectoryContent[] files)
    {
        FileManagerResponse<FileManagerDirectoryContent> response = 
            new FileManagerResponse<FileManagerDirectoryContent>();
        
        // Delete logic...
        
        return await Task.FromResult(response);
    }

    private void InitializeData()
    {
        // Initialize with file data...
    }
}

Component Usage:

From data-binding.md (lines 370-420):

@using Syncfusion.Blazor.FileManager
@inject FileManagerService FileManagerService

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       OnRead="OnReadAsync" 
                       ItemsDeleting="ItemsDeletingAsync" 
                       FolderCreating="FolderCreatingAsync" 
                       Searching="SearchingAsync" 
                       ItemRenaming="ItemRenamingAsync" 
                       ItemsMoving="ItemsMovingAsync" 
                       ItemsUploaded="ItemsUploadedAsync" 
                       BeforeDownload="BeforeDownload" 
                       BeforeImageLoad="BeforeImageLoadAsync">
    </FileManagerEvents>
</SfFileManager>

@code{
    public async Task OnReadAsync(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        args.Response = await FileManagerService.ReadAsync(args.Path, args.Folder.ToList());
    }

    public async Task ItemsDeletingAsync(ItemsDeleteEventArgs<FileManagerDirectoryContent> args)
    {
        string[] names = args.Files.Select(x => x.Name).ToArray();
        args.Response = await FileManagerService.DeleteAsync(args.Path, names, args.Files.ToArray());
    }

    public async Task FolderCreatingAsync(FolderCreateEventArgs<FileManagerDirectoryContent> args)
    {
        args.Response = await FileManagerService.CreateAsync(args.Path, args.FolderName);
    }

    public async Task SearchingAsync(SearchEventArgs<FileManagerDirectoryContent> args)
    {
        args.Response = await FileManagerService.SearchAsync(args.Path, args.SearchText, false, false);
    }

    public async Task ItemRenamingAsync(ItemRenameEventArgs<FileManagerDirectoryContent> args)
    {
        args.Response = await FileManagerService.RenameAsync(args.Path, args.File.Name, args.NewName, false, false, args.File);
    }

    public async Task ItemsMovingAsync(ItemsMoveEventArgs<FileManagerDirectoryContent> args)
    {
        string[] names = args.Files.Select(x => x.Name).ToArray();
        if (args.IsCopy)
        {
            args.Response = await FileManagerService.CopyAsync(args.Path, args.TargetPath, names, args.TargetData, args.Files.ToArray());
        }
        else
        {
            args.Response = await FileManagerService.MoveAsync(args.Path, args.TargetPath, names, args.TargetData, args.Files.ToArray());
        }
    }
}

Register Service in Program.cs:

From data-binding.md (lines 435-445):

using YourNamespace;

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton<FileManagerService>();

AJAX Settings

FileManagerAjaxSettings Properties

From `data-binding.md` (lines 60-75):

Simple AJAX Example

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations">
    </FileManagerAjaxSettings>
</SfFileManager>

Full AJAX Example with All Endpoints

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

List Objects with Events

Event-Based Data Binding

The FileManager provides events for each file operation. By handling these events, you can provide data from any source.

Event Reference

Using Multiple Events

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       OnRead="OnRead"
                       ItemsDeleting="OnDelete"
                       FolderCreating="OnCreate"
                       ItemRenaming="OnRename"
                       Searching="OnSearch">
    </FileManagerEvents>
</SfFileManager>

@code {
    async Task OnRead(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        // Handle read event
    }

    async Task OnDelete(ItemsDeleteEventArgs<FileManagerDirectoryContent> args)
    {
        // Handle delete event
    }

    async Task OnCreate(FolderCreateEventArgs<FileManagerDirectoryContent> args)
    {
        // Handle create event
    }

    async Task OnRename(ItemRenameEventArgs<FileManagerDirectoryContent> args)
    {
        // Handle rename event
    }

    async Task OnSearch(SearchEventArgs<FileManagerDirectoryContent> args)
    {
        // Handle search event
    }
}

FileManagerDirectoryContent

Structure and Properties

From `file-operations.md` (lines 35-60):

public class FileManagerDirectoryContent
{
    // Identity
    public string Id { get; set; }
    public string ParentId { get; set; }
    public string Name { get; set; }
    
    // Paths
    public string FilterPath { get; set; }
    public string FilterId { get; set; }
    
    // Metadata
    public bool IsFile { get; set; }
    public bool HasChild { get; set; }
    public string Type { get; set; }
    
    // Timestamps
    public DateTime DateCreated { get; set; }
    public DateTime DateModified { get; set; }
    
    // Size
    public long Size { get; set; }
    
    // Options
    public bool CaseSensitive { get; set; }
    public bool ShowHiddenItems { get; set; }
}

Creating Data Items

var folder = new FileManagerDirectoryContent()
{
    Id = "1",
    ParentId = null,
    Name = "Root",
    FilterPath = "",
    HasChild = true,
    IsFile = false,
    Type = "folder",
    DateCreated = DateTime.Now,
    DateModified = DateTime.Now,
    Size = 0
};

var file = new FileManagerDirectoryContent()
{
    Id = "2",
    ParentId = "1",
    Name = "document.pdf",
    FilterPath = "/Root/",
    HasChild = false,
    IsFile = true,
    Type = ".pdf",
    DateCreated = DateTime.Now,
    DateModified = DateTime.Now,
    Size = 102400
};

Comparison and Selection

When to Use Each Method

Recommendation

• Small datasets (<1000 items) - List Objects or Injected Service
• Medium datasets (1000-10000 items) - Injected Service with pagination
• Large datasets (>10000 items) - AjaxSettings with server-side filtering
• Cloud storage - AjaxSettings with cloud provider endpoints

Next Steps

• See Events and Callbacks for event handler patterns
• Check File Providers for specific provider setup
• Review Upload and Download for file transfer handling

Events and Callbacks in Blazor FileManager

Table of Contents

• Overview
• Lifecycle Events
• File Operation Events
• UI Interaction Events
• Download and Preview Events
• Event Handling Patterns

Overview

The FileManager provides 20+ events that fire during different operations and user interactions. Events enable you to:

• Validate operations before they execute
• Customize behavior for specific scenarios
• Log or audit file operations
• Cancel operations when needed
• Respond to user interactions

From `file-operations.md` (lines 1050-1100):

All events are bound using the FileManagerEvents component with the TValue generic parameter.

Lifecycle Events

Created

Trigger: When FileManager component is initialized

Arguments: None

Usage:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" Created="OnCreated"></FileManagerEvents>
</SfFileManager>

@code {
    public void OnCreated()
    {
        Console.WriteLine("FileManager created");
        // Initialize custom logic
    }
}

Destroyed

Trigger: When FileManager component is destroyed

Arguments: None

Usage:

@code {
    public void OnDestroyed()
    {
        Console.WriteLine("FileManager destroyed");
        // Cleanup logic
    }
}

File Operation Events

ItemsDeleting

Trigger: Before items are deleted

Arguments:

• Path (string) - Directory path
• Files (List<FileManagerDirectoryContent>) - Items to delete
• Cancel (bool) - Set to true to prevent deletion

Example: Prevent large deletions

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       ItemsDeleting="OnItemsDeleting">
    </FileManagerEvents>
</SfFileManager>

@code {
    public async Task OnItemsDeleting(ItemsDeleteEventArgs<FileManagerDirectoryContent> args)
    {
        if (args.Files.Count > 10)
        {
            args.Cancel = true;
            // Show user warning
        }
    }
}

ItemsDeleted

Trigger: After items are successfully deleted

Arguments: Response object with details

Usage:

@code {
    public async Task OnItemsDeleted(ItemsDeletedEventArgs<FileManagerDirectoryContent> args)
    {
        // Log deletion
        Console.WriteLine($"Deleted {args.Response.Files.Count} items");
    }
}

FolderCreating

Trigger: Before a new folder is created

Arguments:

• Path (string) - Parent directory path
• FolderName (string) - New folder name
• Cancel (bool) - Set to true to prevent creation

Example: Name validation

@code {
    public async Task OnFolderCreating(FolderCreateEventArgs<FileManagerDirectoryContent> args)
    {
        if (args.FolderName.Contains(" "))
        {
            args.Cancel = true;
            // Show error: "Spaces not allowed in folder names"
        }
    }
}

FolderCreated

Trigger: After folder is successfully created

Arguments: Response with new folder details

Usage:

@code {
    public async Task OnFolderCreated(FolderCreatedEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Created folder: {args.Response.Files[0].Name}");
    }
}

ItemRenaming

Trigger: Before item is renamed

Arguments:

• Path (string) - Item directory path
• File (FileManagerDirectoryContent) - File to rename
• NewName (string) - New name
• Cancel (bool) - Set to true to prevent rename

Example: Name pattern validation

@code {
    public async Task OnItemRenaming(ItemRenameEventArgs<FileManagerDirectoryContent> args)
    {
        // Prevent renaming system files
        if (args.File.Name.StartsWith("."))
        {
            args.Cancel = true;
        }
    }
}

ItemRenamed

Trigger: After item is successfully renamed

Arguments: Response with renamed item details

Searching

Trigger: When user searches for files

Arguments:

• Path (string) - Search path
• SearchText (string) - Search query
• CaseSensitive (bool) - Case sensitivity

Usage:

@code {
    public async Task OnSearching(SearchEventArgs<FileManagerDirectoryContent> args)
    {
        // Custom search logic
        Console.WriteLine($"Searching for: {args.SearchText}");
    }
}

Searched

Trigger: After search completes

Arguments: Response with search results

ItemsMoving

Trigger: Before items are copied or moved

Arguments:

• Path (string) - Source path
• TargetPath (string) - Destination path
• IsCopy (bool) - True if copy, false if move
• Files (List<FileManagerDirectoryContent>) - Items being moved
• Cancel (bool) - Set to true to prevent operation

Example: Destination validation

@code {
    public async Task OnItemsMoving(ItemsMoveEventArgs<FileManagerDirectoryContent> args)
    {
        // Prevent moving to read-only location
        if (args.TargetPath.Contains("ReadOnly"))
        {
            args.Cancel = true;
        }
    }
}

ItemsMoved

Trigger: After items are copied or moved successfully

Arguments: Response with operation details

UI Interaction Events

OnFileOpen

Trigger: Before file or folder is opened

Arguments:

• File (FileManagerDirectoryContent) - Item being opened
• Cancel (bool) - Set to true to prevent opening

Example: Prevent opening certain file types

@code {
    public async Task OnFileOpen(FileOpenEventArgs<FileManagerDirectoryContent> args)
    {
        if (args.File.Type == ".exe")
        {
            args.Cancel = true;
        }
    }
}

OnFileLoad

Trigger: Before file is rendered in the view

Arguments:

• File (FileManagerDirectoryContent) - File being rendered
• Module (string) - View type (Details, LargeIcon, etc.)

Usage:

@code {
    public void OnFileLoad(FileLoadEventArgs<FileManagerDirectoryContent> args)
    {
        // Customize file display
        Console.WriteLine($"Loading {args.File.Name} in {args.Module} view");
    }
}

BeforePopupOpen

Trigger: Before dialog box opens

Arguments:

• DialogType (string) - Type of dialog
• Cancel (bool) - Set to true to prevent opening

Example: Prevent delete dialog for certain conditions

@code {
    public void OnBeforePopupOpen(BeforePopupOpenCloseEventArgs args)
    {
        if (args.DialogType == "Delete")
        {
            // Custom validation
        }
    }
}

BeforePopupClose

Trigger: Before dialog box closes

Arguments:

• DialogType (string) - Type of dialog

PopupOpened

Trigger: After dialog opens

Arguments: Dialog details

PopupClosed

Trigger: After dialog closes

Arguments: Dialog details

OnSend

Trigger: Before HTTP request is sent to server

Arguments:

• Request customization options

Usage:

@code {
    public void OnSend(BeforeSendEventArgs args)
    {
        // Add custom headers
        // Modify request parameters
    }
}

OnSuccess

Trigger: After HTTP request succeeds

Arguments:

• Response data
• Status code

Example: Log successful operations

@code {
    public void OnSuccess(SuccessEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Operation successful: {args.Result}");
    }
}

OnError

Trigger: When HTTP request fails

Arguments:

• Error (object) - Error details
• Exception (Exception) - Exception if any

Example: Handle errors gracefully

@code {
    public void OnError(FailureEventArgs args)
    {
        if (args.Error != null)
        {
            Console.WriteLine($"Error: {args.Error.ToString()}");
        }
    }
}

Download and Preview Events

BeforeDownload

Trigger: Before download request is sent

Arguments:

• DownloadData (DownloadData) - Files to download
• Cancel (bool) - Set to true to prevent download

Example: Validate download permissions

From file-operations.md (lines 680-710):

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             DownloadUrl="/api/FileManager/Download">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       BeforeDownload="OnBeforeDownload">
    </FileManagerEvents>
</SfFileManager>

@code {
    public void OnBeforeDownload(BeforeDownloadEventArgs<FileManagerDirectoryContent> args)
    {
        // Prevent downloading certain file types
        foreach (var file in args.DownloadData.DownloadFileDetails)
        {
            if (file.IsFile && file.Type == ".exe")
            {
                args.Cancel = true;
                break;
            }
        }
    }
}

BeforeImageLoad

Trigger: Before image is loaded for preview

Arguments:

• ImageUrl (string) - Image URL
• FileDetails (FileManagerDirectoryContent) - Image file details
• Cancel (bool) - Set to true to prevent loading

Example: Custom image loading

@code {
    public async Task OnBeforeImageLoad(BeforeImageLoadEventArgs<FileManagerDirectoryContent> args)
    {
        // Custom image URL transformation
        if (!args.ImageUrl.StartsWith("https"))
        {
            args.ImageUrl = "url" + args.ImageUrl;
        }
    }
}

Upload Events

ItemsUploading

Trigger: Before files are uploaded

Arguments:

• Files (List<FileInfo>) - Files being uploaded
• Cancel (bool) - Set to true to prevent upload

Example: File validation before upload

@code {
    public async Task OnItemsUploading(ItemsUploadingEventArgs<FileManagerDirectoryContent> args)
    {
        const long maxSize = 10 * 1024 * 1024; // 10 MB
        
        foreach (var file in args.Files)
        {
            if (file.File.Size > maxSize)
            {
                args.Cancel = true;
                break;
            }
        }
    }
}

ItemsUploaded

Trigger: After files are successfully uploaded

Arguments:

• Files (List<FileInfo>) - Uploaded files
• Path (string) - Upload destination

Example: Log uploads

@code {
    public async Task OnItemsUploaded(ItemsUploadedEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"Uploaded {args.Files.Count} files to {args.Path}");
    }
}

UploadListCreated

Trigger: Before each file is rendered in upload dialog

Arguments:

• Upload file details

Usage:

@code {
    public void OnUploadListCreated(UploadListCreateArgs args)
    {
        // Customize upload list display
    }
}

Event Handling Patterns

Pattern 1: Multiple Events in Single Component

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" 
                       Created="OnCreated"
                       ItemsDeleting="OnItemsDeleting"
                       FolderCreating="OnFolderCreating"
                       BeforeDownload="OnBeforeDownload"
                       OnError="OnError">
    </FileManagerEvents>
</SfFileManager>

@code {
    public void OnCreated() { /* ... */ }
    public async Task OnItemsDeleting(ItemsDeleteEventArgs<FileManagerDirectoryContent> args) { /* ... */ }
    public async Task OnFolderCreating(FolderCreateEventArgs<FileManagerDirectoryContent> args) { /* ... */ }
    public void OnBeforeDownload(BeforeDownloadEventArgs<FileManagerDirectoryContent> args) { /* ... */ }
    public void OnError(FailureEventArgs args) { /* ... */ }
}

Pattern 2: Validation and Cancellation

@code {
    public async Task OnItemsDeleting(ItemsDeleteEventArgs<FileManagerDirectoryContent> args)
    {
        // Validate
        if (!CanDelete(args.Files))
        {
            args.Cancel = true;
            return;
        }

        // Log
        LogOperation("Delete", args.Files);
    }

    private bool CanDelete(List<FileManagerDirectoryContent> files)
    {
        return files.All(f => !f.Name.StartsWith("system_"));
    }

    private void LogOperation(string operation, List<FileManagerDirectoryContent> files)
    {
        // Log to database or file
    }
}

Pattern 3: Error Handling

@code {
    public void OnError(FailureEventArgs args)
    {
        if (args.Error != null)
        {
            // Log error
            Console.WriteLine($"FileManager Error: {args.Error}");

            // Show user-friendly message
            ShowErrorNotification("An error occurred. Please try again.");
        }
    }

    private void ShowErrorNotification(string message)
    {
        // Display notification to user
    }
}

Next Steps

• See File Operations for operation details
• Check Upload and Download for upload-specific event handling
• Review Advanced Features for additional event usage patterns

File Operations in Blazor FileManager

Table of Contents

• Overview
• Core File Operations
• Request and Response Format
• Operation Details
• Sorting and Filtering
• Selection Properties and Events
• Public Methods
• Complete Operation Examples

Overview

The FileManager supports 11 core file operations through a unified request-response model. Each operation sends an action name and parameters to the server, which processes the request and returns the result.

From `file-operations.md` (lines 20-50):

All operations follow the same pattern: 1. Client sends request with action, path, and parameters 2. Server processes the operation 3. Server returns response with status and data 4. Client updates UI based on response

Core File Operations

1. Read

Purpose: Read files and folders from a given path

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 55-70):

{
    action: "read",
    path: "/",
    showHiddenItems: false,
    data: []
}

Example Response:

{
    cwd: {
        name: "Download",
        size: 0,
        dateModified: "2019-02-28T03:48:19.8319708+00:00",
        dateCreated: "2019-02-27T17:36:15.812193+00:00",
        hasChild: false,
        isFile: false,
        type: "",
        filterPath: "\\Download\\"
    },
    files: [
        {
            name: "Sample Work Sheet.xlsx",
            size: 6172,
            dateModified: "2019-02-27T17:23:50.9651206+00:00",
            dateCreated: "2019-02-27T17:36:15.8151955+00:00",
            hasChild: false,
            isFile: true,
            type: ".xlsx",
            filterPath: "\\Download\\"
        }
    ],
    error: null
}

2. Create

Purpose: Create a new folder in the specified path

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 105-125):

{
    action: "create",
    data: [{ /* directory details */ }],
    name: "HelloFolder",
    path: "/"
}

3. Delete

Purpose: Delete file or folder from the server

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 190-205):

{
    action: "delete",
    path: "/HelloFolder/",
    names: ["file.txt"],
    data: []
}

4. Rename

Purpose: Rename a file or folder

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 130-155):

{
    action: "rename",
    data: [{ /* item details */ }],
    newname: "seaview.jpg",
    name: "seaviews.jpg",
    path: "/Pictures/Nature/"
}

5. Search

Purpose: Search for files and folders matching a search string

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 220-245):

{
    action: "search",
    path: "/",
    searchString: "*nature*",
    showHiddenItems: false,
    caseSensitive: false,
    data: []
}

6. Details

Purpose: Get detailed information about file(s) or folder(s)

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 280-300):

{
    action: "details",
    path: "/FileContents/",
    names: ["All Files"],
    data: []
}

7. Copy

Purpose: Copy files or folders to target location

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 345-365):

{
    action: "copy",
    path: "/",
    names: ["6.png"],
    renameFiles: ["6.png"],
    targetPath: "/Videos/"
}

8. Move

Purpose: Move (cut/paste) files or folders to target location

Request Parameters:

Response:

Example Request:

From file-operations.md (lines 390-410):

{
    action: "move",
    path: "/",
    names: ["6.png"],
    renameFiles: ["6.png"],
    targetPath: "/Videos/"
}

9. Upload

Purpose: Upload files to specified directory

Request Parameters:

Response: Empty string on success, error object on failure

Example Request:

From file-operations.md (lines 550-600):

{
    uploadFiles: (binary),
    path: /,
    action: Save
}

10. Download

Purpose: Download files (single or multiple as ZIP)

Request Parameters:

Response: File stream

Example Request:

From file-operations.md (lines 625-655):

{
    action: "download",
    path: "/",
    names: ["1.png"],
    data: [{ /* file details */ }]
}

11. GetImage

Purpose: Get image file for preview

Request Parameters:

Response: Image file stream

Example Request:

From file-operations.md (lines 740-760):

{
    action: "GetImage",
    path: "/1.png",
    id: "image_1"
}

Request and Response Format

FileManagerDirectoryContent Structure

From `file-operations.md` (lines 800-850):

Used in both requests and responses to represent files and folders.

ErrorDetails Structure

Operation Details

Complete API Reference Table

Sorting and Filtering

SortBy Property

From `file-operations.md` (lines 460-490):

Controls which field is used for sorting.

public string SortBy { get; set; } // Default: "Name"

Valid values:

• Name (default)
• Size
• DateModified
• DateCreated

SortOrder Property

Controls the sort direction.

public SortOrder SortOrder { get; set; } // Default: Ascending

Valid values:

• None - No sorting
• Ascending - Alphabetically or numerically ascending
• Descending - Alphabetically or numerically descending

Example: Custom Sorting

<SfFileManager TValue="FileManagerDirectoryContent" 
               SortBy="Size" 
               SortOrder="SortOrder.Descending">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

Custom Sort Comparer

From `file-operations.md` (lines 510-550):

For complex sorting logic, implement IComparer<Object>:

<SfFileManager TValue="FileManagerDirectoryContent" SortComparer="new NaturalSortComparer()">
    <FileManagerDetailsViewSettings>
        <FileManagerColumns>
            <FileManagerColumn Field="Name" HeaderText="Name" SortComparer="new NaturalSortComparer()"></FileManagerColumn>
            <FileManagerColumn Field="DateModified" Format="MM/dd/yyyy h:mm tt" HeaderText="Modified"></FileManagerColumn>
            <FileManagerColumn Field="Size" HeaderText="Size"></FileManagerColumn>
        </FileManagerColumns>
    </FileManagerDetailsViewSettings>
</SfFileManager>

@code {
    public class NaturalSortComparer : IComparer<Object>
    {
        public int Compare(Object x, Object y)
        {
            // Implementation for natural sorting (1, 2, 10 instead of 1, 10, 2)
            // ... sorting logic ...
            return comparisonResult;
        }
    }
}

Selection Properties and Events

Selection Properties

Configure Selection

<SfFileManager TValue="FileManagerDirectoryContent" 
               AllowMultiSelection="true"
               EnableRangeSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

FileSelected Event

Triggered when a file or folder is selected:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" FileSelected="OnFileSelected">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public void OnFileSelected(FileSelectEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"File selected: {args.FileDetails.Count} items");
        foreach (var file in args.FileDetails)
        {
            Console.WriteLine($"  - {file.Name} ({file.Size} bytes)");
        }
    }
}

FileSelection Event

Triggered when file selection changes:

<SfFileManager TValue="FileManagerDirectoryContent">
    <FileManagerEvents TValue="FileManagerDirectoryContent" FileSelection="OnFileSelection">
    </FileManagerEvents>
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    public void OnFileSelection(FileSelectionEventArgs<FileManagerDirectoryContent> args)
    {
        Console.WriteLine($"File selection changed: {args.FileDetails.Count} items");
        
        // Can cancel or modify selection
        args.Cancel = false;
    }
}

Get Selected Items

<SfButton OnClick="GetSelection">Get Selected Items</SfButton>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" AllowMultiSelection="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;

    public void GetSelection()
    {
        if (FileManager?.SelectedItems.Count > 0)
        {
            foreach (var item in FileManager.SelectedItems)
            {
                Console.WriteLine($"Selected: {item.Name}");
            }
        }
    }
}

Public Methods

DownloadFilesAsync

Purpose: Download selected files programmatically

Signature:

From file-operations.md (lines 600-620):

public async Task DownloadFilesAsync(IEnumerable<FileManagerDirectoryContent> selectedItems)

Parameters:

• selectedItems - Collection of files to download

Returns: Task (completes when download starts)

Example:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="DownloadSelectedFiles">Download</SfButton>

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;
    
    public async Task DownloadSelectedFiles()
    {
        if (FileManager.SelectedItems.Count > 0)
        {
            await FileManager.DownloadFilesAsync(FileManager.SelectedItems);
        }
    }
}

GetSelectedFiles

Purpose: Retrieve details of currently selected files and folders

Signature:

From multiple-file-selection.md (lines 45-55):

public List<FileManagerDirectoryContent> GetSelectedFiles()

Returns: List of selected FileManagerDirectoryContent items

Example:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="GetCurrentSelection">Get Selected Files</SfButton>
<div>Selected: @SelectedCount files</div>

<SfFileManager @ref="FileManager" AllowMultiSelection="true" TValue="FileManagerDirectoryContent">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" FileSelection="OnFileSelection">
    </FileManagerEvents>
</SfFileManager>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;
    List<FileManagerDirectoryContent> SelectedFiles = new List<FileManagerDirectoryContent>();
    int SelectedCount = 0;

    public void GetCurrentSelection()
    {
        SelectedFiles = FileManager.GetSelectedFiles();
        SelectedCount = SelectedFiles.Count;
        
        // Process selected files
        foreach (var file in SelectedFiles)
        {
            Console.WriteLine($"Selected: {file.Name} ({file.Size} bytes)");
        }
    }

    public void OnFileSelection(FileSelectionEventArgs<FileManagerDirectoryContent> args)
    {
        var selectedDetails = args.FileDetails;
        Console.WriteLine($"File selected: {selectedDetails.Name}");
    }
}

Display File Thumbnails

Purpose: Show thumbnail previews for files in the FileManager

Property: ShowThumbnail

From previewing-files.md:

@using Syncfusion.Blazor.FileManager

<SfFileManager TValue="FileManagerDirectoryContent" ShowThumbnail="true">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
</SfFileManager>

ShowThumbnail with File Preview:

@using Syncfusion.Blazor.FileManager
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.PdfViewerServer

<SfFileManager @ref="FileManager" TValue="FileManagerDirectoryContent" ShowThumbnail="true" AllowMultiSelection="false">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" OnFileOpen="OpenFilePreview">
    </FileManagerEvents>
</SfFileManager>

<SfDialog Width="800px" Height="600px" ShowCloseIcon="true" AllowDragging="true" Visible="@IsDialogVisible">
    <DialogTemplates>
        <Header>Preview: @DialogTitle</Header>
        <Content>
            @if (CurrentFileType == ".pdf")
            {
                <SfPdfViewerServer DocumentPath="@DocumentPath" Height="500px" Width="100%"></SfPdfViewerServer>
            }
            else
            {
                <p>Preview not available for this file type.</p>
            }
        </Content>
    </DialogTemplates>
</SfDialog>

@code {
    SfFileManager<FileManagerDirectoryContent> FileManager;
    bool IsDialogVisible = false;
    string DialogTitle = "";
    string DocumentPath = "";
    string CurrentFileType = "";

    private void OpenFilePreview(FileOpenEventArgs<FileManagerDirectoryContent> args)
    {
        if (args.FileDetails.Type == ".pdf")
        {
            DialogTitle = args.FileDetails.Name;
            CurrentFileType = ".pdf";
            DocumentPath = "wwwroot\\Files" + args.FileDetails.FilterPath + args.FileDetails.Name;
            IsDialogVisible = true;
        }
    }
}

Complete Operation Examples

Example 1: Implementing Read Operation

From getting-started-with-web-app.md (lines 280-300):

case "read":
    // reads the file(s) or folder(s) from the given path
    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));

Example 2: Implementing Delete Operation

From file-operations.md (lines 280-295):

case "delete":
    // deletes the selected file(s) or folder(s) from the given path
    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));

Example 3: Implementing Copy Operation

From file-operations.md (lines 395-410):

case "copy":
    // copies the selected file(s) or folder(s) from a path and pastes into target path
    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, 
        args.Names, args.RenameFiles, args.TargetData));

Example 4: Implementing Move Operation

From file-operations.md (lines 445-460):

case "move":
    // cuts the selected file(s) or folder(s) from a path and pastes into target path
    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, 
        args.Names, args.RenameFiles, args.TargetData));

Next Steps

• See Events and Callbacks for handling operation results
• Check Upload and Download for advanced upload/download scenarios
• Review Advanced Features for search and filtering