Getting started with ASP.NET Core FileManager Control

6 May 202224 minutes to read

This section briefly explains about how to include ASP.NET Core FileManager control in your ASP.NET Core application using Visual Studio.

Prerequisites

System requirements for ASP.NET Core controls

Create ASP.NET Core web application with Razor pages

Install ASP.NET Core package in the application

Syncfusion ASP.NET Core controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. To add ASP.NET Core controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.AspNet.Core and then install it.

The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

Add Syncfusion ASP.NET Core Tag Helper

Open ~/Views/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.

@addTagHelper *, Syncfusion.EJ2

Add style sheet

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion ASP.NET Core controls. Here, the theme is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.1.55/fluent.css" />
</head>

Add script reference

In this getting started walk-through, the required scripts are referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js"></script>
</head>

Register Syncfusion Script Manager

Open ~/Pages/Shared/_Layout.cshtml page and register the script manager at the end of `<body>` in the ASP.NET Core application as follows.

<body>
    ....
    ....
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Add ASP.NET Core FileManager control

Now, add the Syncfusion ASP.NET Core FileManager tag helper in ~/Pages/Index.cshtml page.

<div class="control-section">
    <div class="sample-container" style="padding:10px">        
        <!--  Filemanager element declaration -->
        <ejs-filemanager id="file" created="created">
            <e-filemanager-ajaxsettings url="/Home/FileOperations">
            </e-filemanager-ajaxsettings>
            <e-filemanager-contextmenusettings visible="false"></e-filemanager-contextmenusettings>
            <e-filemanager-navigationpanesettings visible="false"></e-filemanager-navigationpanesettings>
            <e-filemanager-toolbarsettings visible="false"></e-filemanager-toolbarsettings>
        </ejs-filemanager>
    </div>

    <script>
        function created() {
            var filemanager = document.getElementById("file").ej2_instances[0];
            filemanager.uploadObj.dropArea = null;
        }
        document.getElementById("element").addEventListener('click', function () {
            var filemanager = document.getElementById("file").ej2_instances[0];
            var files = filemanager.getSelectedFiles();
            for (var i = 0; i < files.length; i++) {
                var path = files[i].filterPath + files[i].name;
                console.log(path);
            }
        });
    </script>
    <style>
        .e-empty-inner-content {
            display: none;
        }
    </style>
</div>
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using WebApplication4.Models;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Http.Features;
using Newtonsoft.Json;
using Syncfusion.EJ2.FileManager.Base;
using Syncfusion.EJ2.FileManager.PhysicalFileProvider;

namespace WebApplication4.Controllers
{
    public class HomeController : Controller
    {
        public PhysicalFileProvider operation;
        public string basePath;
        string root = "wwwroot\\Files";

        public HomeController(IHostingEnvironment hostingEnvironment)
        {
            this.basePath = hostingEnvironment.ContentRootPath;
            this.operation = new PhysicalFileProvider();
            this.operation.RootFolder(this.basePath + "\\" + this.root);
        }

        public object FileOperations([FromBody] FileManagerDirectoryContent args)
        {
            var fullPath = (this.basePath + "\\" + this.root + args.Path).Replace("/", "\\");
            if (args.Action == "delete" || args.Action == "rename")
            {
                if ((args.TargetPath == null) && (args.Path == ""))
                {
                    FileManagerResponse response = new FileManagerResponse();
                    response.Error = new ErrorDetails { Code = "401", Message = "Restricted to modify the root folder." };
                    return this.operation.ToCamelCase(response);
                }
            }
            switch (args.Action)
            {
                case "read":
                    // reads the file(s) or folder(s) from the given path.
                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));
                case "delete":
                    // deletes the selected file(s) or folder(s) from the given path.
                    return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));
                case "copy":
                    // copies the selected file(s) or folder(s) from a path and then pastes them into a given target path.
                    return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
                case "move":
                    // cuts the selected file(s) or folder(s) from a path and then pastes them into a given target path.
                    return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));
                case "details":
                    // gets the details of the selected file(s) or folder(s).
                    return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names, args.Data));
                case "create":
                    // creates a new folder in a given path.
                    return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));
                case "search":
                    // gets the list of file(s) or folder(s) from a given path based on the searched key string.
                    return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));
                case "rename":
                    // renames a file or folder.
                    return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));
            }
            return null;
        }

        // uploads the file(s) into a specified path
        public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action)
        {
            FileManagerResponse uploadResponse;
            uploadResponse = operation.Upload(path, uploadFiles, action, null);
            if (uploadResponse.Error != null)
            {
                Response.Clear();
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
            }
            return Content("");
        }

        // downloads the selected file(s) and folder(s)
        public IActionResult Download(string downloadInput)
        {
            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);
            return operation.Download(args.Path, args.Names, args.Data);
        }

        // gets the image(s) from the given path
        public IActionResult GetImage(FileManagerDirectoryContent args)
        {
            return this.operation.GetImage(args.Path, args.Id, false, null, null);
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

Press Ctrl+F5 (Windows) or +F5 (macOS) to run the app. Then, the Syncfusion ASP.NET Core FileManager control will be rendered in the default web browser.

FileManager getting started

The File Manager can be rendered with local service for sending ajax request. Ajax request will be sent to the server which then processes the request and sends back the response. Refer Controller file for file manager service.

File Download support

To perform the download operation, initialize the DownloadUrl property in a AjaxSettings of File Manager component.

<div class="control-section">
    <div class="sample-container" style="padding:10px">
        <ejs-filemanager id="file" created="created">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>

    <script>
        function created() {
            var filemanager = document.getElementById("file").ej2_instances[0];
            filemanager.uploadObj.dropArea = null;
        }
        document.getElementById("element").addEventListener('click', function () {
            var filemanager = document.getElementById("file").ej2_instances[0];
            var files = filemanager.getSelectedFiles();
            for (var i = 0; i < files.length; i++) {
                var path = files[i].filterPath + files[i].name;
                console.log(path);
            }
        });
    </script>
    <style>
        .e-empty-inner-content {
            display: none;
        }
    </style>
</div>

File Upload support

To perform the upload operation, initialize the UploadUrl property in a AjaxSettings of File Manager Component.

<div class="control-section">
    <div class="sample-container" style="padding:10px">
        <ejs-filemanager id="file" created="created">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        uploadUrl="/Home/Upload">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>

    <script>
        function created() {
            var filemanager = document.getElementById("file").ej2_instances[0];
            filemanager.uploadObj.dropArea = null;
        }
        document.getElementById("element").addEventListener('click', function () {
            var filemanager = document.getElementById("file").ej2_instances[0];
            var files = filemanager.getSelectedFiles();
            for (var i = 0; i < files.length; i++) {
                var path = files[i].filterPath + files[i].name;
                console.log(path);
            }
        });
    </script>
    <style>
        .e-empty-inner-content {
            display: none;
        }
    </style>
</div>

Image Preview support

To perform the image preview support in the File Manager component, need to initialize the GetImageUrl property in a AjaxSettings of File Manager component.

<div class="control-section">
    <div class="sample-container" style="padding:10px">
        <ejs-filemanager id="file" created="created">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>

    <script>
        function created() {
            var filemanager = document.getElementById("file").ej2_instances[0];
            filemanager.uploadObj.dropArea = null;
        }
        document.getElementById("element").addEventListener('click', function () {
            var filemanager = document.getElementById("file").ej2_instances[0];
            var files = filemanager.getSelectedFiles();
            for (var i = 0; i < files.length; i++) {
                var path = files[i].filterPath + files[i].name;
                console.log(path);
            }
        });
    </script>
    <style>
        .e-empty-inner-content {
            display: none;
        }
    </style>
</div>

File Manager Sample

File Manager Overview

By default, the File Manager component having extra module like NavigationPane, Toolbar, ContextMenu module.

In this sample demonstrates the full features of the File Manager that includes toolbar, navigation pane and details view.

<div class="control-section">
    <div class="sample-container" style="padding:10px">
        <ejs-filemanager id="file" created="created" view="Details">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>

    <script>
        function created() {
            var filemanager = document.getElementById("file").ej2_instances[0];
            filemanager.uploadObj.dropArea = null;
        }
        document.getElementById("element").addEventListener('click', function () {
            var filemanager = document.getElementById("file").ej2_instances[0];
            var files = filemanager.getSelectedFiles();
            for (var i = 0; i < files.length; i++) {
                var path = files[i].filterPath + files[i].name;
                console.log(path);
            }
        });
    </script>
    <style>
        .e-empty-inner-content {
            display: none;
        }
    </style>
</div>

FileManager overview

The appearance of the File Manager can be customized by using cssClass property. This adds a css class to the root of the File Manager which can be used to add new styles or override existing styles to the File Manager.

Switching initial view of the File Manager

The initial view of the File Manager can be changed to details or largeicons view with the help of view property. By default, the File Manager will be rendered in large icons view. When the File Manager is initially rendered, created will be triggered. This event can be utilized for performing operations once the File Manager has been successfully created.

<div class="control-section">
    <div class="sample-container" style="padding:10px">
        <ejs-filemanager id="file" created="onCreated" view="Details">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>

    <script>
        function onCreated() {
            //var filemanager = document.getElementById("file").ej2_instances[0];
            //filemanager.uploadObj.dropArea = null;
            console.log("File Manager has been created successfully");
        }
    </script>
    <style>
        .e-empty-inner-content {
            display: none;
        }
    </style>
</div>

FileManager switching view

Maintaining component state on page reload

The File Manager supports maintaining the component state on page reload. This can be achieved by enabling enablePersistence property which maintains the following,

  • Previous view of the File Manager - View
  • Previous path of the File Manager - Path
  • Previous selected items of the File Manager - SelectedItems

For every operation in File Manager, ajax request will be sent to the server which then processes the request and sends back the response. When the ajax request is success, success event will be triggered and failure event will be triggered if the request gets failed.

<div class=" control-section">
    <div class="sample-container" style="padding:10px">
        <!-- Declare filemanager element -->
        <ejs-filemanager id="filemanager" enablePersistence="true" success="onSuccess" failure="onFailure">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
        <!-- end of filemanager element -->
    </div>
</div>
<script>
    // File Manager's file onSuccess function
    function onSuccess() {
        console.log("Ajax request successful");
    }

    // File Manager's file onError function
    function onFailure() {
        console.log("Ajax request has failed");
    }
</script>

FileManager enable persistence

The files of the current folder opened in the File Manager can be refreshed programatically by calling refreshFiles method

Rendering component in right-to-left direction

It is possible to render the File Manager in right-to-left direction by setting the enableRtl API to true.

<div class=" control-section">
    <div class="sample-container">
        <ejs-filemanager id="filemanager" enableRtl="true">
            <e-filemanager-ajaxsettings  url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>
</div>

Right to Left Support in ASP.NET Core FileManager

Specifying the current path of the File Manager

The current path of the File Manager can be specified initially or dynamically using the path property.

The following code snippet demonstrates specifying the current path in File Manager on rendering.

<div class=" control-section">
    <div class="sample-container">
        <ejs-filemanager id="filemanager" path="/Pictures/Employees">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
        </ejs-filemanager>
    </div>
</div>

ASP.NET Core FileManager with Specific Path

View Sample in GitHub.

See also