We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How can we pass additional custom data in the args to our API endpoints?

We are using your FileManager JS control to provide a view of our users MS SharePoint sites documents folder.  We have written a FileProvider (which then uses the MS Graph API to connect to SharePoint) to accomplish this but we need to establish which user is making the call so as to display the correct files and folders.

Is it possible to pass our own custom data on your calls to our API when the user interacts with your control to allow us to identify the user?

Our js file looks like this...

     var hostUrl = 'https://localhost:44391/';

    $(function () {

        var fileObject = new ej.filemanager.FileManager({
            ajaxSettings: {
                url: hostUrl + 'api/SharePoint/FileOperations',
                uploadUrl: hostUrl + 'api/SharePoint/Upload',
                downloadUrl: hostUrl + 'api/SharePoint/Download'
                //getImageUrl: hostUrl + 'api/FileManager/GetImage',
            },
            view: 'Details',
            rootAliasName: 'Document Root',
            height: '800px',
            navigationPaneSettings: {
                maxWidth: '250px',
                minWidth: '250px',
                visible: true
            },
            contextMenuSettings: {
                file: ["Edit", "|", "Cut", "Copy", "|", "Delete", "Download", "Rename", "|", "Details"],
                folder: ["Open", "|", "Cut", "Copy", "|", "Delete", "Download", "Rename", "|", "Details"],
                layout: ["SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "Details", "|", "SelectAll"],
                visible: true
            },  
            menuClick: onMenuClick
        });

        fileObject.appendTo('#filemanager');
    });

7 Replies

SP Sowmiya Padmanaban Syncfusion Team April 20, 2020 11:41 AM UTC

Hi James,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement. We can pass the additional parameter from client-side to  the server-side API controller methods in the client-side events of FileManager component. 
 
For your reference, we have prepared a sample. In this sample, we have pass the customer parameter (column) to the controller side and change the root folder of the FileManager component based on this argument. 
 
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: function(args) { 
           // Get the value of Dropdownlist. 
           var value = document.getElementById("ddl").value; 
            var data = JSON.parse(args.ajaxSettings.data);  
          // Add custom parameter column  
            data["column"] = value;  
          // Add custom parameter in ajax settings  
            args.ajaxSettings.data = JSON.stringify(data);  
      } 

You can add the custom class in controller part and use the class in fileOperations.  
 
public class FileManagerDirectoryContent1 
    { 
        public FileManagerDirectoryContent[] Data { get; set; } 
        public bool ShowHiddenItems { get; set;} 
         ... 
         ... 
        public string column { get; set; } 
   } 
 
Specify the root folder based on the custom parameter. 
 
   public object FileOperations([FromBody] FileManagerDirectoryContent1 args) 
        { 
            if (args.column == "Option1" || args.column == "") 
            { 
                this.operation.RootFolder(this.basePath + "\\" + this.root); 
            } 
            else 
            { 
                this.operation.RootFolder(this.basePath + "\\" + this.root1); 
            } 
} 
 
Refer the below screenshot. 
 
 
 
Refer the sample and service link. 
 
 
 
Note: After running the FileManager service and refer the localhost URL in FileManager sample. 
 
You can also pass the customer attribute for download , upload and getImage operations. 
 
GetImage operations: 
 
   You can send the custom argument using beforeImageLoad event or fileLoad event. 
 
 beforeImageLoad: function(args) { 
         var value = document.getElementById("ddl").value; 
         args.imageUrl = args.imageUrl + "&column="+"Syncfusion"; 
      } 
 
Or you can use fileLoad event. 
 
fileLoad: function (args) {   
        var value = args.element.getElementsByClassName("e-list-img");   
        if (value.length == 1) {   
            // Add custom parameter and value to the getimage source   
            var custom_value = value[0].src + "&column=Syncfusion";   
            }  
 
 
For Upload operation, you can send in beforeSend event. 

  beforeSend: function(args) { 
        // Get the value of Dropdownlist. 
          var value = document.getElementById("ddl").value; 
         if (args.action == "Upload") {  
            // Allow custom data for upload operations   
            data1.push({ 'column': value });  
            args.ajaxSettings.data = JSON.stringify(data1);  
        }  
} 

For Download operation, you can use beforeDownload event. 
  beforeDownload: function(args){ 
    // Assign your preferred your root file name to the below variable and don't change other lines 
    var value = document.getElementById("ddl").value;    
    var includeCustomAttribute = args.data; 
    includeCustomAttribute.column = value; 
    args.data = includeCustomAttribute; 
  } 

Refer the below forums links in which we provided solution which is similar to your requirement. 
 
 
We have already implemented following file provider services for File Manager component. 
 
 
Refer the below links to know more about the available file providers for File Manager. 
 
Refer the below link for FileManager component. 
 
 
 
 
 
Please let us know, if you have need any further assistance. 
 
Regards,  
Sowmiya.P 



JC James Cullis April 22, 2020 12:49 PM UTC

Perfect! Thanks for your quick response.


SP Sowmiya Padmanaban Syncfusion Team April 22, 2020 01:03 PM UTC

Hi James,  
  
Most Welcome. We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. We will happy to assist you. 
  
Regards,  
Sowmiya.P 
  
  
  
  



WZ WAJIB ZAGLUL December 8, 2020 04:02 AM UTC

Hi! Is there any way to apply this on an angular project? Thanks in advanced


KR Keerthana Rajendran Syncfusion Team December 8, 2020 02:22 PM UTC

Hi James, 
 
Yes , you can use the same code within beforeSend and beforeDownload event of FileManager in angular platform too. Please refer to the below forum in which similar scenario is discussed in Angular platform.  
 
 
 
 
Please let us know, if you face any difficulties in implementing the above suggestion in your sample. We will be happy to assist you. 
 
Regards, 
Keerthana.  



WZ WAJIB ZAGLUL December 9, 2020 05:56 AM UTC

Thank you! That worked perfectly!


SP Sowmiya Padmanaban Syncfusion Team December 9, 2020 11:25 AM UTC

Hi James,  
  
We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 


Loader.
Live Chat Icon For mobile
Up arrow icon