Log in
Back in 2012, the folks at Code Project interviewed me as part of their ongoing series profiling developers — their backgrounds, projects, interests, and pet peeves. At the time I was a PM on the ASP.NET team at Microsoft, freshly off of a stint running MSDN Magazine. A decade-plus later, they reached out again to do a follow-up — same questions, very different answers, as a lot has changed.
Sadly one of the things that changed between the start and completion of the interview was that Code Project ceased operation.
|
Sr. Content Developer at Microsoft, working remotely in PA, TechBash conference organizer, former Microsoft MVP, Husband, Dad and Geek.
|
Pennsylvania, USA
TL;DR: Build an AI-powered Blazor File Manager that goes beyond storage and delivers real intelligence inside your app. Instantly convert PDFs, Word files, and text documents into clear summaries, while AI automatically organizes files into meaningful categories. This eliminates manual effort and simplifies navigation. The result is a faster, cleaner, and more intuitive .NET experience where file management feels effortless.
Turn your Blazor File Manager into a smart AI assistant
What if your file manager didn’t just store files but actually understood them?
Imagine instantly summarizing documents, auto-organizing messy folders, and saving hours of manual work, all powered by AI inside your Blazor app.
In this guide, you’ll discover how to supercharge the Syncfusion® Blazor File Manager with AI-driven content summaries and intelligent file organization.
Game-changing features you’ll build
AI-powered content summary
- Extracts text from
.txt,.docx, and.pdffiles. - Sends it to AI for summarization.
- Displays results instantly in a clean dialog UI.
Result: Users get clear insights without opening files.
AI-powered file organization
- Scans files in a folder.
- Uses AI to categorize them intelligently.
- Automatically creates folders and moves files.
Result: Your messy directories become perfectly structured in seconds.
The real benefit of AI-powered file handling
This isn’t just about adding an AI service to the File Manager. It’s about transforming your application into a:
- Time-saving productivity tool,
- Smart document assistant, and
- Next-generation user experience.
Instead of users working with files… files start working for them.
What you need before you start
Before building your AI-powered file manager, ensure you have:
- Visual Studio 2022 with ASP.NET and a web development environment.
- .NET 8 or .NET 9 SDK
- An OpenAI / Azure OpenAI Account to use the AI models.
Create a Blazor app and configure AI services
Let’s get started by creating a Blazor Web app and configuring the AI services in it.
Step 1: Create a Blazor Web app
Follow the .NET Blazor tutorial or the Syncfusion Blazor documentation to create a Blazor Web app.
Step 2: Install Syncfusion File Manager and AI packages
Then, install the following dependencies using the NuGet Package Manager:
These packages help you efficiently build the Blazor File Manager UI and leverage its smart features.
Step 3: Import the namespaces
Open the _Imports.razor file and import the Syncfusion.Blazor namespace for the required components.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.FileManagerStep 4: Configure the Program.cs file
Register the Syncfusion Blazor service and the AI service in the Program.cs file. If your app uses WebAssembly or Auto (Server and WebAssembly) interactive render mode, register the Syncfusion Blazor service in both the Program.cs files.
Then, register the API key as a singleton, and then update both Syncfusion and Azure AI services.
Here’s the complete code block:
using FileManagerAI.Services;
using Microsoft.Extensions.AI;
using OpenAI;
using SmartComponents.LocalEmbeddings;
using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using SyncfusionAISamples.Components;
using SyncfusionAISamples.Service;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();
#region AI Integration
builder.Services.AddScoped<FileManagerService>();
//For PDF viewer
builder.Services.AddMemoryCache();
builder.Services.AddSignalR(o =>
{
o.MaximumReceiveMessageSize = 1024000000000;
o.EnableDetailedErrors = true;
});
// Local Embeddings
builder.Services.AddSingleton<LocalEmbedder>();
// Open AI Service
string apiKey = "Api Key";
string deploymentName = "model-name";
OpenAIClient openAIClient = new OpenAIClient(apiKey);
IChatClient openAiChatClient =
openAIClient.GetChatClient(deploymentName).AsIChatClient();
builder.Services.AddChatClient(openAiChatClient);
builder.Services.AddSingleton<SyncfusionAIService>();
builder.Services.AddSingleton<AzureAIService>();
#endregion
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios,
// see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.MapStaticAssets();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
app.Run();Step 5: Add the stylesheet and script resources
Syncfusion theme stylesheets and scripts come from NuGet through Static Web Assets. Add the stylesheet reference in the <head> section and the script reference at the end of the <body>.
- Use
_Layout.cshtmlfor the Blazor Server file. - Use
App.razorfor the Blazor WebAssembly file.
Try this in your code:
<head>
....
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
....
<body>
....
<script src="_content/Syncfusion.Blazor.FileManager/scripts/sf-filemanager.min.js" type="text/javascript"></script>
</body>AI-powered content summarization in Blazor File Manager
We are done with the initial setup! Let’s add the AI-powered smart summarization and organization options in the Blazor File Manager.
Step 1: Add the Blazor File Manager
Let’s add the Blazor File Manager component to the desired .razor file, and name it as SmartFileManager.razor. Also, make sure you set a render mode at the top, such as Interactive Auto.
Here’s how it looks in Blazor:
<SfFileManager TValue="FileManagerDirectoryContent" ID="@FileManagerId" @ref="FileManager" Height="500px" >
<FileManagerSearchSettings AllowSearchOnTyping=false></FileManagerSearchSettings>
<FileManagerToolbarSettings ToolbarItems="@Items"></FileManagerToolbarSettings>
<FileManagerContextMenuSettings File="@FileItems" Folder="@FolderItems"></FileManagerContextMenuSettings>
<FileManagerEvents TValue="FileManagerDirectoryContent" OnRead="OnReadAsync" MenuOpened="MenuOpened" OnMenuClick="OnMenuClick" FileSelected="FileSelected" ToolbarItemClicked="ToolbarItemClicked"></FileManagerEvents>
</SfFileManager>Step 2: Define toolbar items and initial logic
In the SmartFileManager.razor.cs file, add the logic to define toolbar items with Organize and Quick Summary options. Then, initialize the File Manager by getting the required files in the OnReadAsync method.
Below is the code you need:
public List<ToolBarItemModel> Items = new List<ToolBarItemModel>()
{
new ToolBarItemModel() { Name = "NewFolder" },
new ToolBarItemModel() { Name = "Cut" },
new ToolBarItemModel() { Name = "Copy" },
new ToolBarItemModel() { Name = "Paste" },
new ToolBarItemModel() { Name = "Delete" },
new ToolBarItemModel() { Name = "Download" },
new ToolBarItemModel() { Name = "Rename" },
new ToolBarItemModel() { Name = "SortBy" },
new ToolBarItemModel() { Name = "Refresh" },
new ToolBarItemModel()
{
Name = "Organize",
Text = "Organize",
TooltipText = "Organize",
PrefixIcon = "e-icons e-folder",
Visible = true
},
new ToolBarItemModel()
{
Name = "Quick Summary",
Text = "Quick Summary",
TooltipText = "Get a quick summary of the selected file using AI",
PrefixIcon = "e-icons e-print-layout",
Visible = false
},
new ToolBarItemModel() { Name = "Selection" },
new ToolBarItemModel() { Name = "View" },
new ToolBarItemModel() { Name = "Details" },
};
public string[] FileItems = new string[]
{
"Quick Summary", "Cut", "Copy", "|", "Delete", "Rename", "|", "Details"
};
public string[] FolderItems = new string[]
{
"Organize", "|", "Open", "|", "Cut", "Copy", "Paste", "|", "Delete", "Rename", "|", "Details"
};
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
_ = Task.Run(() => FileManagerService.EmbedInitialFiles());
}
public async Task OnReadAsync(ReadEventArgs<FileManagerDirectoryContent> args)
{
if (!Directory.Exists(Path.Combine(FileManagerService.DemoBaseDirectory, FileManagerId)))
{
FileManagerService.RootFolder(FileManagerId);
}
args.Response = await FileManagerService.GetFiles(
args.Path,
false,
args.Folder.ToArray()
);
}Here’s the output:
Step 3: Configure the dialog component for summarization
Now, install the Syncfusion.Blazor.Popups dependency to render the Blazor Dialog component that displays AI-powered summarized content.
Implementation example:
@using Syncfusion.Blazor.Popups
<SfDialog ID="Summary" Width="600" Height="90%" ZIndex="1000" EnableResize="true" AllowDragging="true" IsModal=true ShowCloseIcon="true" @bind-Visible="@IsDialogVisible" Target=@("#"+FileManagerId)>
<DialogTemplates>
<Header>@DialogTitle</Header>
<Content>
<div class="Summary-Dialog">
@if (!isContentGenerating)
{
@((MarkupString)DialogContent)
}
else
{
<SfSkeleton CssClass="skeletonRectangle" Shape=SkeletonType.Rectangle Width="100%" Height="20px"></SfSkeleton>
<SfSkeleton CssClass="skeletonRectangle" Shape=SkeletonType.Rectangle Width="80%" Height="20px"></SfSkeleton>
<SfSkeleton CssClass="skeletonRectangle" Shape=SkeletonType.Rectangle Width="70%" Height="20px"></SfSkeleton>
<SfSkeleton CssClass="skeletonRectangle" Shape=SkeletonType.Rectangle Width="50%" Height="20px"></SfSkeleton>
}
</div>
</Content>
</DialogTemplates>
<DialogEvents OnOverlayModalClick="DialogOverlay" OnClose="OnClose" />
</SfDialog>Step 4: Summarize the content
The Blazor File Manager can summarize the content of supported file types, such as .txt, .docx, and .pdf, using an AI service. You can access this feature via a toolbar item.
To better understand this, let’s look at the workflow and the code.
File type check
In the SmartFileManager.razor.cs file, the FileSelected event checks whether the selected file has an allowed extension (.txt, .docx, .pdf). It also checks that only one file is selected at a time. If both conditions are true, the Quick Summary toolbar item becomes visible.
Here’s how that looks in code:
private void FileSelected(FileSelectEventArgs<FileManagerDirectoryContent> args)
{
if (AllowedFileTypes.Contains(args.FileDetails.Type) &&
FileManager?.SelectedItems.Length == 1)
{
Items.Where(item => item.Name == "Quick Summary")
.FirstOrDefault()
.Visible = true;
}
. . . . .
}AI service integration
When the user clicks the Quick Summary (handled by ToolbarItemClicked or OnMenuClick) option, the SummarizeAsync method is called.
Code snippet to achieve this:
private async Task ToolbarItemClicked(ToolbarClickEventArgs<FileManagerDirectoryContent> args)
{
if (args.Item.Text == "Quick Summary")
{
if (args.FileDetails[0].Permission == null)
{
try
{
await SummarizeAsync(
args.FileDetails[0].IsFile,
args.FileDetails[0].Type,
args.FileDetails[0].FilterPath,
args.FileDetails[0].Name
);
}
catch (Exception)
{
throw;
}
}
}
}Text extraction
The SummarizeAsync method first determines the file path and then uses the ExtractTextFromFile method to get the content. This helper method calls specific extraction logic for .txt, .docx (using Syncfusion.DocIO), and .pdf (using Syncfusion.Pdf).
Here’s the process and the corresponding code snippet:
private string ExtractTextFromFile(string filePath)
{
string text = string.Empty;
string extension = Path.GetExtension(filePath).ToLower();
if (extension == ".txt")
{
text = File.ReadAllText(filePath);
}
else if (extension == ".docx")
{
text = ExtractTextFromWord(filePath);
}
else if (extension == ".pdf")
{
text = ExtractTextFromPdf(filePath);
}
return text;
}
private string ExtractTextFromWord(string filePath)
{
StringBuilder textBuilder = new StringBuilder();
using (FileStream sourceStreamPath = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
{
using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Docx))
{
string cleanedText = Regex.Replace(document.GetText(), @"[\r\n]+", "");
cleanedText = Regex.Replace(cleanedText, @"\s{2,}", "");
textBuilder.Append(cleanedText);
}
}
return textBuilder.ToString();
}
private string ExtractTextFromPdf(string filePath)
{
List<string> extractedText = new List<string>();
FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read);
using (PdfLoadedDocument loadedDocument = new PdfLoadedDocument(fileStream))
{
PdfLoadedPageCollection loadedPages = loadedDocument.Pages;
using (MemoryStream annotationStream = new MemoryStream())
{
loadedDocument.ExportAnnotations(annotationStream, AnnotationDataFormat.Json);
string annotations = ConvertToString(annotationStream);
if (!String.IsNullOrEmpty(annotations))
{
extractedText.Add("Annotations: " + annotations);
}
}
using (MemoryStream formStream = new MemoryStream())
{
if (loadedDocument.Form != null)
{
loadedDocument.Form.ExportData(formStream, DataFormat.Json, "form");
string formFields = ConvertToString(formStream);
if (!String.IsNullOrEmpty(formFields))
{
extractedText.Add("Form fields: " + formFields);
}
}
}
for (int i = 0; i < loadedPages.Count; i++)
{
string text = $"... Page {i + 1} ...\n";
text += loadedPages[i].ExtractText();
extractedText.Add(text);
}
}
return String.Join(" ", extractedText.Take(10));
}AI prompting
Next, sent the extracted text to an AI service (e.g., OpenAI via openAIService.GetCompletionAsync) with a prompt that instructs the AI to provide a summary with highlighted topics in an HTML ordered list.
Code snippet for quick integration:
public async Task SummarizeAsync(bool isFile, string type, string filterPath, string name)
{
if (!isFile || string.IsNullOrEmpty(filterPath) || string.IsNullOrEmpty(name))
{
this.DialogContent = "Invalid file or path.";
this.IsDialogVisible = false;
this.isContentGenerating = false;
StateHasChanged();
return;
}
this.IsDialogVisible = true;
this.isContentGenerating = true;
string root = FileManagerService.DemoDirectoryName + "\\" + FileManagerId + "\\" + "Files";
string filePath = $"wwwroot\\{root}{filterPath}{name}";
string fileContent = ExtractTextFromFile(filePath);
if (string.IsNullOrEmpty(fileContent) || selectedOption != "Open AI")
{
this.DialogContent = "Please provide a proper file content to summarize.";
this.isContentGenerating = false;
StateHasChanged();
return;
}
string promptQuery = "You are a helpful assistant. Your task is to analyze the provided text and generate a short summary. Provide the summary with highlighted topics in ordered list HTML format and it should be ready for execution :\n\n Do not provide codeblock prefixes or introductory texts such as ``` or html, etc.";
string query = promptQuery + fileContent;
string finalSummary = await openAIService.GetCompletionAsync(query, false);
this.DialogContent = !string.IsNullOrEmpty(finalSummary) ? finalSummary : "Please provide a proper file content to summarize.";
this.isContentGenerating = false;
StateHasChanged();
}Displaying summary
The AI’s response is displayed in a dialog box as shown below.
AI-powered intelligent file organization in Blazor File Manager
Let’s add the functionality to intelligently organize or categorize files in the Blazor File Manager. This makes management and navigation simpler. To achieve this, we’ll use AI to group files based on their type and name.
Now, let’s see the logic and implementation details.
Step 1: Trigger categorization from the toolbar
Define an Organize toolbar item to trigger the categorization process. Handle the ToolbarItemClicked or OnMenuClick to call the FileManagerService.OrganizeFiles. This method sends the file details to the AI.
Here’s how that looks in code:
private async Task ToolbarItemClicked(ToolbarClickEventArgs<FileManagerDirectoryContent> args)
{
……..
else if (args.Item.Text == "Organize")
{
VisibleProperty = true;
string path = FileManager?.Path + FileManager?.SelectedItems[0] + "/";
bool showHiddenItems = args.FileDetails[0].ShowHiddenItems;
await FileManagerService.OrganizeFiles(path, showHiddenItems, args.FileDetails.ToArray());
VisibleProperty = false;
await FileManager.OpenFileAsync(args.FileDetails[0].Name);
}
}Step 2: Organize files in FileManagerService.cs
In the FileManagerService.cs file, the OrganizeFiles method collects files, constructs a prompt for the AI to categorize them, and then moves the files into newly created or existing category-specific folders.
Implementation example:
public async Task OrganizeFiles(string path, bool showHiddenItems, params FileManagerDirectoryContent[] data)
{
try
{
if (path == null)
{
path = string.Empty;
}
String fullPath = (contentRootPath + path);
DirectoryInfo directory = new DirectoryInfo(fullPath);
string[] extensions = this.allowedExtension;
string rootPath = string.IsNullOrEmpty(this.hostPath) ? this.contentRootPath : new DirectoryInfo(this.hostPath).FullName;
string parentPath = string.IsNullOrEmpty(this.hostPath) ? directory.Parent.FullName : new DirectoryInfo(this.hostPath + (path != "/" ? path : "")).Parent.FullName;
if (Path.GetFullPath(fullPath) != GetFilePath(fullPath))
{
throw new UnauthorizedAccessException("Access denied for Directory-traversal");
}
List<FileManagerDirectoryContent> foundedFiles = new List<FileManagerDirectoryContent>();
foundedFiles = ReadFiles(directory, extensions, showHiddenItems, data).Cast<FileManagerDirectoryContent>().ToList();
if (foundedFiles.Count == 0)
{
return;
}
var categorizedFiles = await CategorizeFilesAsync(foundedFiles);
foreach (var category in categorizedFiles)
{
if (categorizedFiles.Count > 1 && category.Value.Count != 0)
{
string newDirectoryPath = Path.Combine(contentRootPath + path, category.Key);
if (!Directory.Exists(newDirectoryPath))
{
Directory.CreateDirectory(newDirectoryPath);
}
foreach (var item in category.Value)
{
var dest = Path.Combine(newDirectoryPath, item.Name);
var source = Path.Combine(contentRootPath + path, item.Name);
File.Copy(source, dest);
File.Delete(source);
}
}
}
}
catch (Exception e)
{
ErrorDetails er = new ErrorDetails();
er.Message = e.Message.ToString();
er.Code = er.Message.Contains("is not accessible. You need permission") ? "401" : "417";
if ((er.Code == "401") && !string.IsNullOrEmpty(accessMessage)) { er.Message = accessMessage; }
}
}After executing the above code examples, we’ll get the final output that resembles the following GIF image.
References
For more details, refer to the AI-powered smart file operations using the Blazor File Manager demos on the web and GitHub.
Frequently Asked Questions
Can developers customize AI behavior?
Yes, developers can modify summarization prompts, adjust categorization logic, and integrate different AI models or services.
Is my data secure?
Use Azure OpenAI for enterprise-grade security. Do not send sensitive data unless proper safeguards are in place.
Does AI modify file content during summarization?
No. The AI only reads and analyzes content, ensuring original files remain unchanged.
Is the file organization process automatic or user-triggered?
The file organization process is user-triggered via the Organize toolbar option, allowing full user control over when files are rearranged.
Can I use local AI models instead of cloud-based APIs?
Yes. Integration supports local embedding models. For the highest-quality summaries and categorization, cloud AI services are recommended.
Let AI take over your file management
Thanks for reading! What started as a standard file management setup with the Syncfusion Blazor File Manager has now evolved into a smart, AI-enhanced experience.
With real-time content summaries and automatic file organization, your app can now deliver a smoother, faster, and more meaningful workflow. Users no longer need to open every file or manually sort folders; everything is understood, structured, and ready to use. What was once simple storage has become a streamlined, productivity-first system.
The latest version of Blazor File Manager is now available for existing users on the license and downloads page. New to Syncfusion? You can start a 30-day free trial to explore all the features..
Need help or want to go further? Connect with us anytime through the support forum, support portal, or feedback portal. We are always here to help you build better experiences.
Take the leap from file storage to file intelligence, start building smarter today!
Pennsylvania, USA
Let's start with a calculator. You punch in 847 × 293 and get 248,171. Quick question: who did that math? You, or the calculator? Now picture a typewriter. You sit down, hammer out a letter, and pull the page out of the roller. Who wrote those words? You, or the typewriter? Open a Word document. You type out a report and the grammar checker quietly fixes your comma splices and flags a passive sentence. Who authored that document? You, or Microsoft? Now use ChatGPT to draft a short s
Pennsylvania, USA
Pennsylvania, USA
Big reading list today, and many of the items are articles with some important insights.
[blog] Gemini Managed Agents: Developer Guide. I tried this out last week and plan to spend more time with it. I’m impressed by how rich this service is for executing custom agents.
[article] The role of MCP in context engineering. You can overuse it, or underuse it. But MCP has legit value and it’s different value than what skills or CLIs do.
[article] Amid heavy AI use, workers say their skills are atrophying. This is the risk. If you use AI to do your job, instead of making you better at your job, you’re going to feel unsettled.
[blog] A Practical Guide to Evaluating Multi-Turn Agent Trajectories. You can’t just look at success/fail for your agent. Especially if they’re long-running. Karl offers good advice about what to look for.
[article] Tech CEOs are apparently suffering from AI psychosis. Don’t let one demo or hands-on effort delude you into thinking AI can do everything for everyone. Really understand what it can (and can’t!) do.
[article] Choosing to Stay Human. Notable writeup by Ethan that talks about what happens when we offload the wrong work to AI.
[blog] Build new features using built-in AI in Chrome. It’s fairly easy to build apps that take advantage of Chrome’s built-in AI model.
[article] Who Authorized That? The Delegation Problem in Multi-Agent AI. Is authorization adapting as fast as it needs to? Probably not. This article explains the problem and what solutions are emerging.
[blog] Securing AI agents with MCP Authorization. Here’s one improvement on authorization to key data and tools.
[article] How the AC/DC framework helps teams govern AI coding agents. The Agent Centric Development Cycle framework explains how agent development works at scale. Supposedly. Some valid points here!
[blog] Building an AI-Native CI/CD Experience with sem-ai. These seemed like fresh thoughts on what’s needed for modern CI/CD.
[blog] Getting Started with Antigravity 2.0. Most comprehensive post I’ve seen yet! Romin explains so many of the parts of this updated agentic coding tool.
[article] Managers Are Struggling to Keep Up with the AI Productivity Boom. An “always-on review environment.” I feel that. Best article I read today.
[article] Google made agentic AI governance a product. Enterprises still have to catch up. Great to see some journalists notice the deeper investments we’ve been making. Hard for others to replicate!
[blog] Running agents in production with Google’s Gemini Managed Agents. Cool post from Weights & Balances on a real use case for our Managed Agents service.
Want to get this update sent to you every day? Subscribe to my RSS feed or subscribe via email below:
Pennsylvania, USA
Find out what you might have missed and go deeper on all the big announcements from Google I/O 2026 using NotebookLM.
Pennsylvania, USA
Next Page of Stories