ASP.NET Core FileManager Overview

The Telerik UI for ASP.NET Core FileManager is an Explorer-like component enabling you to manage file and folders.

It enables you to organize and manage files and folders and provides you with a rich API for customization. You can show additional information about the selected file in a template-customizable Preview Pane, which you can show or hide via a switch button. The widget is built entirely by Kendo UI for jQuery components: Grid, ListView, TreeView, Toolbar, 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.

Download Free 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.

• Demo page for the FileManager HtmlHelper

• Demo page for the FileManager TagHelper

Initializing the FileManager

The following example demonstrates the initialization of the FileManager with remote binding. The file structure is served as JSON though the FileManager DataSource object.

As of the 2022 R3 release, the Selectable mechanism is altered. The Change event will now be fired only when Selection/Deselection is performed.

   @(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);
            }
        }

Referencing Existing Instances

To refer to an existing FileManager instance, use the jQuery.data() method. Once a reference is established, use the FileManager client-side API to control its behavior.

    var filemanager = $("#filemanager").data("kendoFileManager");

Functionality and Features

• Data binding
• ContextMenu
• Drag and Drop
• Views
• Navigation
• PreviewPane
• Search
• Sort
• Toolbar Commands
• Accessibility
• Globalization

Visit the Client API section for full description of the configurations methods and events of the Kendo UI for jQuery FileManager component.

See Also

• Basic Usage of the FileManager (Demo)

• FileManager in Razor Pages

• Binding Overview of the FileManager

• Globalization in Telerik UI for ASP.NET Core