1. Home
  2. Forum
  3. Angular - EJ 2
  4. Angular File Permissions?

Angular File Permissions?

Hi

Reading the documentation here: https://ej2.syncfusion.com/angular/documentation/file-manager/access-control/

I should be able to limit acess to files and folders with access control, but the documentation doesn't actually explain how or show any working example (the examle doesn't even show access control).

So  the first part says to create an access control object;

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

But my IDE can't find a class called "AccessRule"

Secondly, the documentation doesn't explain how to then apply these rules to the angular component which is used like this:

<ejs-filemanager (beforePopupOpen)="preventImagePopup($event)" (fileOpen)="openFile($event)"  [rootAliasName]="rootAlias" [view]="view" [showThumbnail]="false" [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings" [allowMultiSelection]="true" id='default-filemanager' [height]="'800px'" [path]="basePath" [ajaxSettings]="ajaxSettings" [allowDragAndDrop]="false" [navigationPaneSettings]="navPaneSettings"></ejs-filemanager>

Could someone explain how this is supposed to work?

11 Replies
MK Muthukrishnan Kandasamy Syncfusion Team December 8, 2020 11:08 AM UTC

 
Hi Glen, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement in Syncfusion Angular File Manager component. We need to configure the access rules for File Manager in server side. Please refer to the below code block. 
 
[FileManagerController.cs] 
 
public FileManagerController(IHostingEnvironment hostingEnvironment) 
        { 
            this.basePath = hostingEnvironment.ContentRootPath; 
            this.operation = new PhysicalFileProvider(); 
            this.operation.RootFolder(this.basePath + "\\" + this.root); 
            this.operation.SetRules(GetRules()); 
        } 
… 
… 
.. 
 
 
public AccessDetails GetRules() 
        { 
            AccessDetails accessDetails = new AccessDetails(); 
 
            List<AccessRule> accessRules = new List<AccessRule> {   
                // For Default User            
                  new AccessRule { Path = "/*.*", Role = "Document Manager", Read = Permission.Deny, Write = Permission.Allow, Copy = Permission.Allow, Download = Permission.Allow}, 
            }; 
            accessDetails.AccessRules = accessRules; 
            accessDetails.Role = "Document Manager"; 
            return accessDetails; 
        } 
 
 
For your convenience, we have prepared a sample for File Manager component with local service. 
 
 
 
Note: Run the service and refer the local host URL in File Manager sample. 
 
Please refer to the below code block. 
 
export class AppComponent { 
  public ajaxSettings: object; 
  public view: string; 
  public hostUrl: string = "http://localhost:62869/"; 
  public ngOnInit(): void { 
    this.ajaxSettings = { 
      url: this.hostUrl + "api/FileManager/FileOperations", 
      getImageUrl: this.hostUrl + "api/FileManager/GetImage", 
      uploadUrl: this.hostUrl + "api/FileManager/Upload", 
      downloadUrl: this.hostUrl + "api/FileManager/Download" 
    }; 
  } 
} 
 
 
Please refer to the below links to know more about File Manager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 



GE Glen Elkins replied to Muthukrishnan Kandasamy December 8, 2020 12:56 PM UTC

 
Hi Glen, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement in Syncfusion Angular File Manager component. We need to configure the access rules for File Manager in server side. Please refer to the below code block. 
 
[FileManagerController.cs] 
 
public FileManagerController(IHostingEnvironment hostingEnvironment) 
        { 
            this.basePath = hostingEnvironment.ContentRootPath; 
            this.operation = new PhysicalFileProvider(); 
            this.operation.RootFolder(this.basePath + "\\" + this.root); 
            this.operation.SetRules(GetRules()); 
        } 
… 
… 
.. 
 
 
public AccessDetails GetRules() 
        { 
            AccessDetails accessDetails = new AccessDetails(); 
 
            List accessRules = new List {   
                // For Default User            
                  new AccessRule { Path = "/*.*", Role = "Document Manager", Read = Permission.Deny, Write = Permission.Allow, Copy = Permission.Allow, Download = Permission.Allow}, 
            }; 
            accessDetails.AccessRules = accessRules; 
            accessDetails.Role = "Document Manager"; 
            return accessDetails; 
        } 
 
 
For your convenience, we have prepared a sample for File Manager component with local service. 
 
 
 
Note: Run the service and refer the local host URL in File Manager sample. 
 
Please refer to the below code block. 
 
export class AppComponent { 
  public ajaxSettings: object; 
  public view: string; 
  public hostUrl: string = "http://localhost:62869/"; 
  public ngOnInit(): void { 
    this.ajaxSettings = { 
      url: this.hostUrl + "api/FileManager/FileOperations", 
      getImageUrl: this.hostUrl + "api/FileManager/GetImage", 
      uploadUrl: this.hostUrl + "api/FileManager/Upload", 
      downloadUrl: this.hostUrl + "api/FileManager/Download" 
    }; 
  } 
} 
 
 
Please refer to the below links to know more about File Manager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 



Thanks.

So i have to create the file manager controller? Your documentation doesn't explain any of this.

I could do with some more help if you can, the back-end code you provided looks like C# or something, our back-end is in PHP not C. I'm still unsure of how to implement the access restrictions.

Yep sorry i really am not following this code, i don't program in this language.

What i could do with is an example in PHP, i can do all the back-end work to determine if files are allowed or not if you can show a basic example of how it would need to return data from the server so the file manager knows a file for example doesn't how download access etc Some users on our system may be able to view a folder contents but not able to download or upload for example, another user might not be allowed access to a folder at all so they shouldn't be able to see it.

SP Sowmiya Padmanaban Syncfusion Team December 9, 2020 10:50 AM UTC

Hi Glen Elkins,  
 
Query1- So i have to create the file manager controller? Your documentation doesn't explain any of this. 
 
In our documentation site, we have used online service URLs for FileManager samples. If you want to use access rules, you need to use the download and configure the file provider services for FileManager component in your computer. 
 
Please refer the below links for service provider available in FileManager component. 
 
 
Query2- I could do with some more help if you can, the back-end code you provided looks like C# or something, our back-end is in PHP not C. I'm still unsure of how to implement the access restrictions. 
 
We have not yet provided support for PHP file provider service for FileManager component.  
 
We have considered this as a feature to be implemented for FileManager.  
 
This feature support will be included in any one of our upcoming release. Generally, we will plan the feature implementation based on feature rank, wishlist plan and customer requests count for some feature.  
   
You can track the following feedback link to know the status of this feature implementation.  
  
 
We have already implemented following file provider services for File Manager component. 
·         NodeJS file system provider 
 
Query 3- i can do all the back-end work to determine if files are allowed or not if you can show a basic example of how it would need to return data from the server so the file manager knows a file for example doesn't how download access etc  
 
However, You can write your own custom provider for FileManager component. 
 
As of now, File Manager has support to handle the data from the in-built AJAX operations (response from the default file operations of FileManager (Upload, Download, Read, Cut, Copy). 
 
The request data from File Manager and response data to File Manager argument to the controller methods for each action should be maintained with the following format.    
    
For example, read request will be in the following format:  
    
{     
    action: "read",     
    path: "/",     
    showHiddenItems: false,     
    data: []     
}     
     
And then returned response is in the below format.  
  
{   
    cwd:   
    {   
        name:"Download",   
        size:0,   
        dateModified:"2019-02-28T03:48:19.8319708+00:00",   
        dateCreated:"2019-02-27T17:36:15.812193+00:00",   
        hasChild:false,   
        isFile:false,   
        type:"",   
        filterPath:"\\Download\\"   
    },   
    files:[   
        {   
            name:"Sample Work Sheet.xlsx",   
            size:6172,   
            dateModified:"2019-02-27T17:23:50.9651206+00:00",   
            dateCreated:"2019-02-27T17:36:15.8151955+00:00",   
            hasChild:false,   
            isFile:true,   
            type:".xlsx",   
            filterPath:"\\Download\\"   
        }   
    ],   
    error:null,   
    details:null   
}   
   
     
Refer to the below link for all the File Manager operations and File Manager response.     
     
 
By default, we cannot change the name of file action in ajax send request (For example: read) . But you can change the inner method names ( for example: GetFiles)  
   
  public object FileOperations([FromBody] FileManagerDirectoryContent args)     
        {     
            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": // This action name cannot be changed as.     
                   // reads the file(s) or folder(s) from the given path. You can create a own API inside the read opaertions.     
                    return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));     
            }     
            return null;     
        }     
     
By default, File Manager only accepts the response from the in-built AJAX file operations of File Manager (Upload, Download, Read, Cut, Copy), as of now you can configure ajaxSettings property with file operation method URLs (Defaults to { getImageUrl: null; url: null; uploadUrl: null; downloadUrl: null;}).    
 
Refer the below response sent to the controller side.    
    
       
    
Returned response.    
    
     
       
Refer the below links to know more about the File Manager component.     
     
     
     
Please let us know, if you need any further assistance.   
  
Regards,  
Sowmiya.P 


GE Glen Elkins December 9, 2020 02:58 PM UTC

Thanks but this still doesn't really explain what i would need to return on the back end to restrict file permissions?

So on the back-end we already have it all working for reading files and folders, but i don't know how to set permissions so the front end component behaves like i'd expect.

So say we have

Home
->Test1
->Test2

And user logged in can only view Test1 but can download and upload to Test2 .... on the server side what would the response need to be to make the angular component impose the restrictions? I see a "permissions" param in the response data that is currently always null, does this have something to do with it?

On the back-end our code will determine the permissions, it's just i don't know how to make the component in angular use them, or what the server should return so it knows about restrictions/permisisons.

Also just a little off topic, but on the back end when accessing the upload url, how do we make it return an error to the file manager component? So i upload a file but our back-end determines the user isn't allowed, i want it to return an error so the file manager window shows "You Are Not Allowed To Do That" but i can't figure out how to do it. The component seems to upload the file then send to the url for actual saving, it's at the saving point i want to be able to send an error back.






SP Sowmiya Padmanaban Syncfusion Team December 10, 2020 01:27 PM UTC

Hi Glen Elkins,  
 
Query1- On the back-end our code will determine the permissions, it's just i don't know how to make the component in angular use them, or what the server should return so it knows about restrictions/permisisons. 
 
If you need to set the permission for particular folder, you need to return the data in permission attribute. Please check in our previously shared sample, it returns the data for permission attribute rather than return null. 
 
Please, refer the below screenshot. 
 
 
 
Query2- Upload error in FileManager component. 
 
In our ASP.NET Core file provider we have returned an error when you upload fails, please refer the below code block. 
 
 
By default, when you return the error message, it triggers the failure event of FileManager component. You can change the status text, by using that event. 
 
Please, refer the below code snippet. 

 
<ejs-filemanager id="overview" [ajaxSettings]="ajaxSettings" (failure)="failure($event)"> 
  </ejs-filemanager> 
  failure(args) { 
    args.error.statusText = "Unable to upload file"; 
  } 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


GE Glen Elkins replied to Sowmiya Padmanaban December 10, 2020 02:22 PM UTC

Hi Glen Elkins,  
 
Query1- On the back-end our code will determine the permissions, it's just i don't know how to make the component in angular use them, or what the server should return so it knows about restrictions/permisisons. 
 
If you need to set the permission for particular folder, you need to return the data in permission attribute. Please check in our previously shared sample, it returns the data for permission attribute rather than return null. 
 
Please, refer the below screenshot. 
 
 
 
Query2- Upload error in FileManager component. 
 
In our ASP.NET Core file provider we have returned an error when you upload fails, please refer the below code block. 
 
 
By default, when you return the error message, it triggers the failure event of FileManager component. You can change the status text, by using that event. 
 
Please, refer the below code snippet. 

 
<ejs-filemanager id="overview" [ajaxSettings]="ajaxSettings" (failure)="failure($event)"> 
  ejs-filemanager> 
  failure(args) { 
    args.error.statusText = "Unable to upload file"; 
  } 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Thanks.


So this has basically answered what i needed, but some things:

1) "copy"=>false doesn't work, i still get the Copy and Cut option
2) "cut"=>false , this doesn't appear to do anything
3) "rename"=>false, i tried this but i still get a "rename" option on the component - does this one not exist?
4) What is the difference between "write" and "writeContents" ?
5) If the above for cut, rename etc don't exist, is there a way i can hook into the component in angular to make them work? So if i want "rename"=>false i'd want the component to remove the rename option.
6) What about preventing file deletion? "delete"=>false doesn't remove the "Delete" option on the component.

The permission bit just seems a bit, incomplete? I really need the options to be able to limit access to every feature: Download, Upload, Read, Delete, Cut, Copy, Rename

There is one last thing. Ive noticed when the component first loads, and say ive set the starting path to /Test, rather than loading just that folder with the sub folders and files, it seems to make a second call for / and loads all the folders into the panel on the left. Is there a way to stop that? If its set to a root folder i dont wanr any folders outside of /Test to he showing, i literally would want /Test to act like the root instead of /. Is that possible? So if im making any sense, whatever folder i tell it to load initially should be taken as the root and not / 

GE Glen Elkins December 11, 2020 04:56 PM UTC

Anyone?

GE Glen Elkins December 13, 2020 01:36 PM UTC

I managed to get the folder root locking to work!

But the permission doesn't seem to work properly, i've tried a few different things in my response object like my example below.

Read on true is showing a padlock, read on false still lets the folder open, rename to true or false shows access denied. Little confused!

What i want to be able to do is in the response from the server set the permissions depending on user, some will be able to open folders (read), some files (read), some can download and upload etc... but these permissions don't actually seem to work. "read" does seem to work, but it still shows padlock even if it's false but lets the folder open.

The permissions i need to work are as follows:

FILES - Read - (yes/no), Download (yes/no), Delete (yes/no), Rename (yes/no), Cut (yes/no), Copy (yes/no)
FOLDERS - Read (yes/no), Upload (yes/no), Delete (yes/no), Rename(yes/no), Cut (yes/no), Copy (yes/no), Download (yes/no)

Please could i have some help on how to implement these permissions properly.

Also, how would i return an error message? Say a folder does not exist, i'm not sure in my response how to return an error.

permission' => (object)[
  'read'=>true,
    'rename'=>true

]

SP Sowmiya Padmanaban Syncfusion Team December 14, 2020 12:43 PM UTC

Hi Glen Elkins,  
 
We have checked your requirement with FileManager component.  
 
Query1- What is the difference between "write" and "writeContents" ? 
 
The following table represents the access rule properties available for the folders. 
 
Properties 
Description 
Read 
Allows access to read a file or folder. 
Write 
Allows permission to edit a file or folder. 
WriteContents 
Allows permission to edit the content of folder. 
Copy 
Allows permission to copy a file or folder. 
Download 
Allows permission to download a file or folder. 
Upload 
Allows permission to upload into the folder. 
IsFile 
Specifies whether the rule is specified for folder or file. 
Role 
Specifies the role to which the rule is applied. 
Path 
Specifies the path to apply the rules which are defined. 
 
For example: please, refer the below code. 
 
List<AccessRule> accessRules = new List<AccessRule> {   
                // For Default User            
                  new AccessRule { Path = "/Documents", Role = "Document Manager", Read = Permission.Allow, Write = Permission.Deny, Upload= Permission.Deny, WriteContents= Permission.Deny, Copy = Permission.Allow, Download = Permission.Allow}, 
            }; 
 
When you deny the permission of Write action, you cannot rename, delete the corresponding documents folder.  
 
When you deny the permission for WriteContents , you cannot rename, delete the folder/files inside the Documents folder. 
 
Currently, we don’t have separate access control rules for rename and delete operations. Based on your request, we will consider this as a feature request in our end. Support for this feature will be included in any one of our upcoming releases. Generally, we will plan any feature implementation based on customer request count, feature rank and wishlist plan for some feature. 
 
You can track the status of this feature implementation through the following feedback portal link.  
 
 
We appreciate your patience. 
 
Regards,  
Sowmiya.P 



GE Glen Elkins December 14, 2020 12:50 PM UTC

Thanks but again its not so helpful, we aren’t doing this in .NET we are doing it in php which returns the array of files as json. So we have the “permission” property.

How would this work properly with a file in the array with permission:

“permission”=>(object)[
    “read”=>true,
    “upload”=>true,
    “download”=>false
];

Would that be the correct way? This doesn’t include anything about roles.

Bascally the php code would determine if the user has access to the path or not, then set perms on the json data for each file/folder to tell the component what is allowed. 


SP Sowmiya Padmanaban Syncfusion Team December 15, 2020 04:27 PM UTC

Hi Glen Elkins,  
 
Sorry for the inconvenience. 
 
Folder structure: 
Ø  Files  
Ø  Documents 
o    Employee 
o    Food 
o    Nature 
o    2.png 
 
Return response for files: We have set the permission for 2.png file. You need to return the response in the below format. 
 
 
 
download as false -> you cannot download the corresponding file. 
 
write as false -> you can rename, delete the corresponding file. 
 
In our sever side, we have used default class for Access permission, it contains all the data ( read, download, upload, write, writeContents, message).   
 
We have processed the roles in our server side, you have set the permission for folder and files based on specified role in server side. Roles is not needed for client side. Client side does not perform any operations based on roles. 
 
We have also set the rules for files/ folder in our server side. You can send the permission for each files and folder based on your requirement.  
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon