File operations in EJ2 JavaScript File Manager component

30 Jan 202624 minutes to read

The File Manager component provides a web-based interface to browse, manage, and organize files and folders. It supports basic file operations such as creating folders, uploading and downloading files, deleting and renaming items, and previewing images.

The following table summarizes the core file operations and their functions.

Operation Name	Function
read	Read details of files or folders in the specified path to display content to the user.
create	Create a new folder in the current path.
delete	Remove a file or folder from the server.
rename	Rename the selected file or folder.
search	Search for items matching a search string within the current directory and its children.
details	Retrieve details for the selected item(s).
copy	Copy the selected files or folders.
move	Cut (move) the selected files or folders.
upload	Upload files to the current path or directory.
download	Download files from the server; multiple files may be returned as a ZIP archive.

The CreateFolder, Remove, and Rename actions are applied in the File Manager only after the server returns a successful response.

Folder upload support

Enable directory (folder) upload by setting directoryUpload to true inside the uploadSettings property. Directory upload is supported for the following server providers:

Physical file service provider.
Azure file service provider.
NodeJS file service provider.
Amazon file service provider.

The example below shows enabling/disabling directory upload via a DropDownButton selection.

index.js
index.html
index.css
var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// Initialize the FileManager component
var fileObject = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    },
    height: '380px'
});
fileObject.appendTo('#file');

var items = [{ text: 'Folder' }, { text: 'Files' }];
var drpDownBtn = new ej.splitbuttons.DropDownButton({
    items: items,
    select: function (args) {
        if (args.item.text === 'Folder') {
            fileObject.uploadSettings.directoryUpload = true;
        } else {
            fileObject.uploadSettings.directoryUpload = false;
        }
        setTimeout(function () {
            var uploadBtn = document.querySelector('.e-file-select-wrap button');
            uploadBtn.click();
        }, 100);
    }
}, '#file_tb_upload');

document.getElementById('file_tb_upload').onclick = function (args) {
    args.stopPropagation();
};
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 File Manager</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 File Manager Control">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-grids/styles/tailwind3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-filemanager/styles/tailwind3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id="file"></div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

Physical file service provider

To achieve the directory upload in the physical file service provider, use the below code snippet in IActionResult Upload method in the Controllers/FileManagerController.cs file.

[Route("Upload")]
public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action)
{
    try
    {
        FileManagerResponse uploadResponse;
        foreach (var file in uploadFiles)
        {
            var folders = (file.FileName).Split('/');
            // checking the folder upload
            if (folders.Length > 1)
            {
                for (var i = 0; i < folders.Length - 1; i++)
                {
                    string newDirectoryPath = Path.Combine(this.basePath + path, folders[i]);
                    // checking the directory traversal
                    if (Path.GetFullPath(newDirectoryPath) != (Path.GetDirectoryName(newDirectoryPath) + Path.DirectorySeparatorChar + folders[i]))
                    {
                        throw new UnauthorizedAccessException("Access denied for Directory-traversal");
                    }
                    if (!Directory.Exists(newDirectoryPath))
                    {
                        this.operation.ToCamelCase(this.operation.Create(path, folders[i]));
                    }
                    path += folders[i] + "/";
                }
            }
        }
        uploadResponse = operation.Upload(path, uploadFiles, action, size, 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;
        }
    }
    catch (Exception e)
    {
        ErrorDetails er = new ErrorDetails();
        er.Message = e.Message.ToString();
        er.Code = "417";
        er.Message = "Access denied for Directory-traversal";
        Response.Clear();
        Response.ContentType = "application/json; charset=utf-8";
        Response.StatusCode = Convert.ToInt32(er.Code);
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = er.Message;
        return Content("");
    }
    return Content("");
}

Refer to the GitHub for more details

And also add the below code snippet in FileManagerResponse Upload method in Models/PhysicalFileProvider.cs file.

string[] folders = name.Split('/');
string fileName = folders[folders.Length - 1];
var fullName = Path.Combine((this.contentRootPath + path), fileName);