Creating a Download Command For The FileManager
Environment
| Product | Progress Telerik UI for ASP.NET Core |
Description
How can I create a Download command in the context menu of the FileManager component for Telerik UI for ASP.NET Core?
Creating a Download Command
As of Telerik UI for ASP.NET Core version R1 2020 SP1, the kendo.ui.filemanager namespace exposes the FileManagerCommand class that you can extend and implement a download command.
Include Font Icons for SpriteCssClass by referencing the following link extracted from unpkg:
<link rel="stylesheet" href="http://unpkg.com/%40progress/kendo-font-icons/dist/index.css" rel="stylesheet" type="text/css" />
Initialize the Telerik UI for ASP.NET Core FileManager and define a Download command for the Context Menu.
@(Html.Kendo().FileManager().Name("filemanager")
...
.ContextMenu(context => context.Items(items =>
{
items.Add("download").Command("DownloadCommand").Text("Download").SpriteCssClass("k-icon k-font-icon k-i-download");
}))
)
Extend the FileManagerCommand class and pass the selected file path to a controller action method.
var filemanagerNS = kendo.ui.filemanager;
filemanagerNS.commands.DownloadCommand = filemanagerNS.FileManagerCommand.extend({
exec: function(){
var that = this,
filemanager = that.filemanager, // get the kendo.ui.FileManager instance
options = that.options, // get the options passed through the tool
target = options.target // options.target is available only when command is executed from the context menu
selectedFiles = filemanager.getSelected(); // get the selected files
window.location = '/FileManager/Download?path=' + selectedFiles[0].path;
}
});
On the server-side, implement a server-side action to return the file for download. The example below extends the File Manager demo for Telerik UI for ASP.NET Core
[HttpGet]
public FileResult Download(string path)
{
var filePath = Path.Combine(HostingEnvironment.WebRootPath, ContentPath, path);
FileInfo file = new FileInfo(filePath);
System.Net.Mime.ContentDisposition cd = new System.Net.Mime.ContentDisposition
{
FileName = file.Name,
Inline = false
};
Response.Headers.Add("Content-Disposition", cd.ToString());
Response.Headers.Add("X-Content-Type-Options", "nosniff");
string contentType;
new FileExtensionContentTypeProvider().TryGetContentType(file.Name, out contentType);
var readStream = System.IO.File.ReadAllBytes(filePath);
return File(readStream, contentType);
}
More ASP.NET Core FileManager Resources
[ASP.NET Core FileManager Documentation]((/aspnet-core/html-helpers/data-management/filemanager/overview)
Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)