1. Home
  2. Forum
  3. Angular - EJ 2
  4. FIle Manager APIs customization

FIle Manager APIs customization

Hi Team,

We have to use file manager in our application. We observed from the demo provided that UI and API is tightly coupled(just by using ajaxsettings, control works)

We need to use customize these APIs request and responses as per our requirements. We should process response once we get it from API and then after processing we should be able to provide the data to our file-manager control.
Is there any way to achieve it??

3 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team May 10, 2021 12:31 PM UTC

Hi Rohit, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in FileManager component. We understood that you need to write your own customizations in our File Manager functionalities. We have performed all the file operations on various service providers. Please check the below link to know about available file service providers for File Manager component.  
 
 
We have prepared a simple sample with ASP.NET core physical file provider for reference. Check the below links. 
 
 
 
Run the service provider first, then run the angular sample. Add the localhost address in app.component.ts file of the below sample. 
 
export class AppComponent { 
  public ajaxSettings: object; 
  public view: string; 
//Add localhost address 
  public hostUrl: string = 'http://localhost:62870/'; 
 
In our service provider, we have performed all file operations such as read, delete, upload, download and rename etc., Please check the below link to know more details on this. 
 
 
Based on the service provider, you can add your own customization to perform file operations. Please check whether the shared details helps you. If not, please revert with your exact use case scenario which will help us to serve you better. 
 
Regards, 
Indhumathy L 


RS Rohit Swarup May 11, 2021 04:58 AM UTC

Hi Indhumathy, 

We need to change the API parameters as per our convenience, 
for eg: In GET data API, we see that response is something like: {name: '', size: ''...}, we need to change this structure according to us.
Also, the request params like {searchString: '', path: ''...} , we need to change this as well.

Is this possible???

IL Indhumathy Loganathan Syncfusion Team May 12, 2021 01:05 PM UTC

Hi Rohit, 
 
We have validated your requirement in File Manager component. By default, File Manager request and response are handled in a defined structure. But you can customize the request and response with required additional details along with defined structure. 
 
Query 1: Customize the request sent to server 
 
You can pass the additional parameter from client-side to the server-side API controller methods in the client-side events of File Manager component.  
  
For your reference, we have prepared a sample. In this sample, we have passed the custom parameter (user_name) to the controller side. Refer the below code snippet to pass the custom parameter. You can use the beforeSend event to send the custom data to the server-side API method for Create, Read, Rename, Delete, Details, Search, Copy, Move File Manager actions. 
 
  beforeSend(args) { 
    var data = JSON.parse(args.ajaxSettings.data); 
    // Add custom parameter column 
    data['user_name'] = 'User1'; 
    // Add custom parameter in ajax settings 
    args.ajaxSettings.data = JSON.stringify(data); 
  } 
 
You need to add the custom attribute (user_name) in FileManagerDirectoryContent class. Please, refer to the below code snippet. 
 
public class FileManagerDirectoryContent1 : FileManagerDirectoryContent 
{ 
    public string user_name { get; set; } 
} 
... 
[Route("FileOperations")] 
public object FileOperations([FromBody] FileManagerDirectoryContent1 args) 
{ 
    var user = args.user_name; 
 
Refer to the below screen shot. 
 
 
 
You can also pass the custome attribute for download, upload and getImage operations as well. 
 
Refer the below forum link where similar requirement is addressed.  
 
 
Query 2: Customize response received from server 
 
In physical file provider, we have included the custom data details in new FileManagerDirectoryContent1 content class. Please check the below code snippet. 
 
namespace EJ2APIServices.Controllers 
{ 
    public class FileResponse 
    { 
        public FileManagerDirectoryContent1 CWD { get; set; } 
        public IEnumerable<FileManagerDirectoryContent1> Files { get; set; } 
        public ErrorDetails Error { get; set; } 
        public FileDetails Details { get; set; } 
    } 
    public class FileManagerDirectoryContent1 : FileManagerDirectoryContent 
    { 
        public string user_name { get; set; } 
        public string CustomValue { get; set; } 
    } 
 
    [Route("api/[controller]")] 
    [EnableCors("AllowAllOrigins")] 
    public class FileManagerController : Controller 
    { 
        public object getFiles(FileManagerDirectoryContent1 args) 
        { 
            FileResponse readResponse = new FileResponse(); 
            try 
            { 
                var value = this.operation.GetFiles(args.Path, args.ShowHiddenItems); 
                FileManagerDirectoryContent1 cwd = new FileManagerDirectoryContent1(); 
                readResponse.CWD = JsonConvert.DeserializeObject<FileManagerDirectoryContent1>(JsonConvert.SerializeObject(value.CWD)); 
                readResponse.CWD.CustomValue = "CustomData"; 
                readResponse.CWD.user_name = args.user_name; 
                readResponse.Files = JsonConvert.DeserializeObject<IEnumerable<FileManagerDirectoryContent1>>(JsonConvert.SerializeObject(value.Files)); 
                //Add the additional parameter for each files in filemanager component. 
                foreach (FileManagerDirectoryContent1 file in readResponse.Files) 
                { 
                    //Add the CustomValue as additional parameter. 
                    file.CustomValue = "CustomDataForFiles"; 
                    file.user_name = args.user_name; 
                } 
                readResponse.Details = value.Details; 
                readResponse.Error = value.Error; 
                return readResponse; 
            } 
            catch 
            { 
                ErrorDetails er = new ErrorDetails(); 
 
            } 
            return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); 
        } 
        ... 
        public FileManagerController(IHostingEnvironment hostingEnvironment) 
        { 
            this.basePath = hostingEnvironment.ContentRootPath; 
            this.operation = new PhysicalFileProvider(); 
            this.operation.RootFolder(this.basePath + "\\" + this.root); 
        } 
        [Route("FileOperations")] 
        public object FileOperations([FromBody] FileManagerDirectoryContent1 args) 
        { 
            ... 
            switch (args.Action) 
            { 
                case "read": 
                    // reads the file(s) or folder(s) from the given path. 
                    return this.getFiles(args); 
                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)); 
 
Refer to the sample and service link.  
  
 
 
Note: After running the File Manager service and refer the localhost URL in File Manager sample. 
 
Similar to the above code, you can perform your own customization with request and response of File Manager. Please check the shared details and get back to us if you need any further assistance. 
 
Regards, 
Indhumathy L

Marked as answer
Loader.
Up arrow icon