ASP.NET Core FileManager Overview
The Telerik UI for ASP.NET Core FileManager is an Explorer-like component that enables you to manage files and folders and provides you with a rich API for customization.
The component allows you to show additional information about the selected file in a Preview Pane that you can customize through templates and that you can show or hide through a switch button. The component is built entirely with Kendo UI for jQuery components: Grid, ListView, TreeView, Toolbar, and Breadcrumb.
The FileManager is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI FileManager TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI FileManager widget. To add the component to your ASP.NET Core app, you can use either.
Initializing the FileManager
The following example demonstrates the initialization of the FileManager with remote binding. The file structure is served as JSON through the FileManager DataSource object.
As of the 2022 R3 release, the
Selectablemechanism has a new behavior. TheChangeevent fires only when performing selection or deselection.
@(Html.Kendo().FileManager()
.Name("filemanager")
.DataSource(ds =>
{
ds.Read(operation => operation
.Type(HttpVerbs.Post)
.Action("Read", "FileManagerData")
);
ds.Destroy(operation => operation
.Type(HttpVerbs.Post)
.Action("Destroy", "FileManagerData")
);
ds.Create(operation => operation
.Type(HttpVerbs.Post)
.Action("Create", "FileManagerData")
);
ds.Update(operation => operation
.Type(HttpVerbs.Post)
.Action("Update", "FileManagerData")
);
})
.UploadUrl("Upload", "FileManagerData")
)
@addTagHelper *, Kendo.Mvc
<kendo-filemanager name="filemanager11" upload-url="@Url.Action("Upload", "FileManagerData")">
<filemanager-datasource>
<transport>
<read url="@Url.Action("Read", "FileManagerData")" />
<create url="@Url.Action("Destroy", "FileManagerData")" />
<destroy url="@Url.Action("Create", "FileManagerData")" />
<update url="@Url.Action("Update", "FileManagerData")" />
</transport>
</filemanager-datasource>
</kendo-filemanager>
// GET: /FileManager/
private const string contentFolderRoot = "~/Content/";
private const string prettyName = "Folders/";
private static readonly string[] foldersToCopy = new[] { "~/Content/shared/filemanager" };
/// <summary>
/// Gets the base paths from which content will be served.
/// </summary>
public override string ContentPath
{
get
{
return CreateUserFolder();
}
}
/// <summary>
/// Gets the valid file extensions by which served files will be filtered.
/// </summary>
public override string Filter
{
get
{
return "*.*";
}
}
private string CreateUserFolder()
{
var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", prettyName);
var path = Server.MapPath(virtualPath);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
foreach (var sourceFolder in foldersToCopy)
{
CopyFolder(Server.MapPath(sourceFolder), path);
}
}
return virtualPath;
}
private void CopyFolder(string source, string destination)
{
if (!Directory.Exists(destination))
{
Directory.CreateDirectory(destination);
}
foreach (var file in Directory.EnumerateFiles(source))
{
var dest = Path.Combine(destination, Path.GetFileName(file));
System.IO.File.Copy(file, dest);
}
foreach (var folder in Directory.EnumerateDirectories(source))
{
var dest = Path.Combine(destination, Path.GetFileName(folder));
CopyFolder(folder, dest);
}
}
Functionality and Features
| Feature | Description |
|---|---|
| Data binding | You can bind the FileManager to remote data. |
| ContextMenu | The FileManager enables you to easily execute FileManager commands on the selected file or folder. |
| Drag and Drop | The FileManager allows you to drag and drop files from the different FileManager views (GridView, ListView). |
| Views | The FileManager provides the Grid and List built-in views for content visualization. |
| Navigation | The FileManager exposes the ability to drill down to the specific file you need to manipulate. |
| PreviewPane | The Preview Pane in the FileManager enables you to show additional information about the selected files or folders in the view. |
| Search | The FileManager comes with a search panel out-of-the-box and allows you to quickly find the needed files. |
| Sort | FileManager provides a built-in sort functionality, which allows you to sort the files and folders. |
| Toolbar Commands | You can incorporate a ToolBar component that contains a variety of built-in commands. |
| Accessibility | The FileManager is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |
| Globalization | The FileManager supports globalization by combining the translation of component messages (localization) and their adaptation to specific cultures. |