Access control in EJ2 TypeScript File Manager component

30 Jan 20269 minutes to read

The File Manager component allows defining access permissions for folders and files using access rules assigned to users or roles.

Access rules

Use FileAccessController to define security permissions for folders and files with a set of folder or file access rules.

To set up access rules for folders (including their files and subfolders) and individual files, use the SetRules() method in the controller. The following table lists the AccessRule properties available for files and folders:

Property Applicable to file Applicable to folder Description
Copy Yes Yes Allows copying a file or folder.
Read Yes Yes Allows reading a file or folder.
Write Yes Yes Allows writing to a file or folder.
WriteContents No Yes Allows writing the contents of a folder.
Download Yes Yes Allows downloading a file or folder.
Upload No Yes Allows uploading to the folder.
Path Yes Yes Specifies the path to which the rules apply.
Role Yes Yes Specifies the role to which the rule applies.
IsFile Yes Yes Specifies whether the rule targets a folder or a file.

The following example shows access rules for the Administrator role for files and folders.

//Administrator
//Access Rules for File
    new AccessRule { Path = "/*.*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Allow, Copy = Permission.Allow, Download = Permission.Allow, IsFile = true },

// Access Rules for folder
   new AccessRule { Path = "*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Allow, Copy = Permission.Allow, WriteContents = Permission.Allow, Upload = Permission.Allow, Download = Permission.Deny, IsFile = false },

The following example shows access rules for the Default User role for files and folders.

//Default User
//Access Rules for File
    new AccessRule { Path = "/*.*", Role = "Default User", Read = Permission.Deny, Write = Permission.Deny, Copy = Permission.Deny, Download = Permission.Deny, IsFile = true },

// Access Rules for folder
     new AccessRule { Path = "*", Role = "Default User", Read = Permission.Deny, Write = Permission.Deny, Copy = Permission.Deny, WriteContents = Permission.Deny, Upload = Permission.Deny, Download = Permission.Deny, IsFile = false },

Permissions

This section explains how to apply security permissions to File Manager files and folders using access rules. The following table lists the values that determine the permission behavior.

Value Description
Allow Permits read, write, copy, and download operations.
Deny Prevents read, write, copy, and download operations.

Use the Role property to apply roles to the File Manager. The File Manager then enforces permissions for files and folders based on assigned roles.

The following examples show how to apply permissions based on assigned roles.

Deny write permission for the Administrator role on files and folders.

// For file
 new AccessRule { Path = "/*.*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Deny, IsFile = true},

// For folder
  new AccessRule { Path = "*", Role = "Administrator", Read = Permission.Allow, Write = Permission.Deny, IsFile = false},

The following examples show how to allow or deny permissions based on file or folder access rules.

Deny write permission except for a particular file or folder.

// Deny writing for particular folder
 new AccessRule { Path = "/Documents", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Copy = Permission.Allow, WriteContents = Permission.Deny, Upload = Permission.Deny, Download = Permission.Deny, IsFile = false },

 // Deny writing for particular file
  new AccessRule { Path = "/Pictures/Employees/Adam.png", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Copy = Permission.Deny, Download = Permission.Deny, IsFile = true },

Deny write and upload permissions in the root folder.

// Folder Rule
 new AccessRule { Path = "/", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Copy = Permission.Deny, WriteContents = Permission.Deny, Upload = Permission.Deny, Download = Permission.Deny, IsFile = false },

The following example demonstrates the File Manager rendered with access control support.

import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager';

FileManager.Inject(Toolbar, NavigationPane, DetailsView)

let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager control and add custom item to contextmenu
let filemanagerInstance: FileManager = new FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManagerAccess/FileOperations',
        getImageUrl: hostUrl + 'api/FileManagerAccess/GetImage',
        uploadUrl: hostUrl + 'api/FileManagerAccess/Upload',
        downloadUrl: hostUrl + 'api/FileManagerAccess/Download'
    },
    view: 'Details',
    height: '380px'
});

// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="filemanager"></div>
    </div>
</body>
</html>