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

Customization beyond basic implementations. Source Customization.

Hello,

I currently have a question regarding the File Manager plugin. I have a robust custom workflow that I want to utilize this plugin to perform. However, I've run into some basic issues and most stem from the inability to customize the endpoint payload that the file manager sends.

To make this short, I need to send some custom data with the file manager payload so that I can identify where the user is viewing the file manager. For instance, are they at a global level viewing files or are they within a project viewing files.

Currently the plugin is developed with inconsistent payloads from client to server (... I do wonder why that's the case). Is there any way to access the source of the plugin and make some minor customizations to suite my needs?

I've already completely re-written most of the server side implementation from the provided examples to make use of some more Enterprise grade features such as reciprocating private keys with azure and more detailed access controls that can actually tie into identity server and user permission sets. Now I need to customize the front-end plugin.

I was able to expand the minified versions of the plugin itself from demo content and notice a handful of improvements that I would like to make to fit my user's needs.

Thank you.

3 Replies 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team September 7, 2020 10:24 AM UTC

Hi HDusten,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with FileManager component. Yes, you can pass the additional parameter from client to server side by using the following events. 
 
For your reference, we have prepared a sample. In this sample, we pass the customer arguments (Custom_attribute) to the server side for FileManager component.  
 
File Operations 
Events 
Create, Read, Rename, Delete, Details, Search, Copy, Move 
Download 
GetImage 
 
  
Refer the below code snippet to pass the custom parameter.  
 
<div class=" control-section"> 
    <div class="sample-container"> 
        <!-- Declare filemanager element --> 
        <ejs-filemanager id="filemanager" beforeSend="beforesend" beforeImageLoad="beforeimageLoad" beforeDownload="beforeDownload"> 
            <e-filemanager-ajaxsettings url="/Home/AzureFileOperations" 
                                        getImageUrl="/Home/AzureGetImage" 
                                        downloadUrl="/Home/AzureDownload" 
                                        uploadUrl="/Home/AzureUpload"> 
            </e-filemanager-ajaxsettings> 
        </ejs-filemanager> 
        <!-- end of filemanager element --> 
    </div> 
</div> 
<script> 
    function beforesend(args) { 
        var data = JSON.parse(args.ajaxSettings.data); 
        if (args.action == "Upload") { 
            // Allow custom data for upload operations    
            data.push({ 'custom_attribute': "Syncfusion" }); 
        } 
        else { 
            // Add custom parameter column   
            data["custom_attribute"] = "Syncfusion"; 
        } 
        // Add custom parameter in ajax settings   
        args.ajaxSettings.data = JSON.stringify(data); 
    } 
    function beforeimageLoad(args) { 
        // Add custom parameter in image URL  
        args.imageUrl = args.imageUrl + "&custom_attribute=" + "Syncfusion";  
    } 
    function beforeDownload(args) { 
        var includeCustomAttribute = args.data; 
        includeCustomAttribute.custom_attribute = "Syncfusion"; 
        args.data = includeCustomAttribute;  
    } 
</script> 
 
You can add the custom class in controller part and use the class in fileOperations.  
 
public class FileManagerDirectoryContent1 
    { 
        public string custom_attribute { get; set; } 
        public DateTime DateCreated { get; set; } 
        public DateTime DateModified { get; set; } 
    } 
public object AzureFileOperations([FromBody] FileManagerDirectoryContent1 args) 
        { 
            if (args.Path != "") 
            {  
}} 
public ActionResult AzureUpload(FileManagerDirectoryContent1 args) 
        { 
            if (args.Path != "") 
            { 
}} 
  // Downloads the selected file(s) and folder(s) 
        public object AzureDownload(string downloadInput) 
        { 
            FileManagerDirectoryContent1 args = JsonConvert.DeserializeObject<FileManagerDirectoryContent1>(downloadInput); 
            return operation.Download(args.Path, args.Names, args.Data); 
        } 
public IActionResult AzureGetImage(FileManagerDirectoryContent1 args) 
        { 
            return this.operation.GetImage(args.Path, args.Id, true, null, args.Data); 
        } 
 
Refer the below screenshot 
 
 
 
Refer the sample link: 
 
 
Refer the below forums links in which we provided solution which is similar to your requirement.  
 
 
If we misunderstood your requirement. Could you please share us more details regarding your requirement. It will help us to provide you a prompt solution to meet your requirement. 
 
Refer the below link for FileManager component.  
  
Demo link 
 
UG Documentation 
 
API reference 
 
  
Please let us know, if you have need any further assistance.  
  
Regards,   
Sowmiya.P  


Marked as answer

HD HDusten September 7, 2020 10:46 PM UTC

Beautiful,

This is exactly what I was looking for! Thank you for the quick and incredibly detailed response on this one!



SP Sowmiya Padmanaban Syncfusion Team September 8, 2020 05:13 AM UTC

Hi HDusten,  
  
Most Welcome. We are happy to hear that our provided solution meets your requirement. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 


Loader.
Live Chat Icon For mobile
Up arrow icon