Access control in EJ2 TypeScript File manager control
16 May 20239 minutes to read
The FileManager allows you to define access permissions for folders and files using a set of access rules to user(s).
Access Rules
The FileAccessController allows you to define security permissions for folders and files using a set of folder or file access rules.
To set up access rules for folders (including their files and sub-folders) and individual files, use the SetRules() method in the controller. The following table represents the AccessRule properties available for file and folder:
Properties | Applicable for file | Applicable for folder | Description |
---|---|---|---|
Copy | Yes | Yes | Allows access to copy a file or folder. |
Read | Yes | Yes | Allows access to read a file or folder. |
Write | Yes | Yes | Allows permission to write a file or folder. |
WriteContents | No | Yes | Allows permission to write the content of folder. |
Download | Yes | Yes | Allows permission to download a file or folder. |
Upload | No | Yes | Allows permission to upload to the folder. |
Path | Yes | Yes | Specifies the path to apply the rules, which are defined. |
Role | Yes | Yes | Specifies the role to which the rule is applied. |
IsFile | Yes | Yes | Specifies whether the rule is specified for folder or file. |
The following syntax represents the access Rules for Administrator using file or folder.
//Adminstrator
//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 syntax represent the access Rules for Default user using file or folder.
//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
It helps to explain how to apply security permission to file manager file or folder using access rules. The following table represent the value that determines the permission.
Value | Description |
---|---|
Allow | Allows you to do read, write, copy, and download operations. |
Deny | Denies you to do read, write, copy, and download operations. |
Use the Role
property to apply created roles to the file manager. After that, the file manager displays folder or file and allow permisssion based on assigned roles.
The following syntax represent how to apply permission based on assigned roles
Permission denied for administrator to write a file or folder.
// 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 syntax represent how to allow or deny permission based on file or folder access rule.
Permission denied for writing except for 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 },
Permission denied for writing and uploading in 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 demonstrate the file manager rendered with access control support.
import { FileManager, Toolbar, NavigationPane, DetailsView, FileToolbarClickEventArgs } from '@syncfusion/ej2-filemanager';
FileManager.Inject(Toolbar, NavigationPane, DetailsView)
let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager component 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'
});
// render initialized FileManager
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 Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-filemanager/styles/material.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>