Skip to content

Latest commit

 

History

History
141 lines (108 loc) · 5.67 KB

filemanager-create-download-command.md

File metadata and controls

141 lines (108 loc) · 5.67 KB
title page_title description slug tags component type res_type
Creating a Download Command For The FileManager
Create Download Command For The FileManager
An example on how to create a Download command for the {{ site.product }} FileManager. Follow the steps in the Knowledge Base section of the {{ site.product }} components.
howto_create_download_command_filemanager
filemanager, custom command, download command
filemanager
how-to
kb

Environment

Product {{ site.product_long }}

Description

How can I create a Download command in the context menu of the FileManager component for {{ site.product }}?

Creating a Download Command

As of {{ site.product }} 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 {{ site.product }} 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 {{ site.product }}]{% if site.core %}(https://demos.telerik.com/aspnet-core/filemanager/index){% else %}(https://demos.telerik.com/aspnet-mvc/filemanager){% endif %}

{% if site.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);
  }

{% else %}

  [HttpGet]
  public FileResult Download(string path)
  {
      var virtualPath = "~/Content/UserFiles/Folders/" + path;
      var filePath = HostingEnvironment.MapPath(virtualPath);
      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 = MimeMapping.GetMimeMapping(file.Name);
      var readStream = System.IO.File.ReadAllBytes(filePath);
      return File(readStream, contentType);
  }

{% endif %}

More {{ site.framework }} FileManager Resources

  • [{{ site.framework }} FileManager Documentation]({%slug htmlhelpers_filemanager_aspnetcore_overview%})

  • [{{ site.framework }} FileManager Demos](https://demos.telerik.com/{{ site.platform }}/filemanager)

{% if site.core %}

{% else %}

See Also