Customization beyond basic implementations. Source Customization.

[HDusten]

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.

[Sowmiya Padmanaban]

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	beforeSend
Download	beforeDownload
GetImage	beforeImageLoad

 

  

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: 

 

Sample  link : https://www.syncfusion.com/downloads/support/forum/157578/ze/Azure_FileManager-341045593.zip 

 

Refer the below forums links in which we provided solution which is similar to your requirement.  

 

·          https://www.syncfusion.com/forums/153422/how-can-we-pass-additional-custom-data-in-the-args-to-our-api-endpoints 

·         https://www.syncfusion.com/forums/151112/how-to-assign-users-to-role-and-upload-file-with-custom-attributes 

·         https://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request 

 

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	https://ej2.syncfusion.com/aspnetcore/FileManager/Overview#/material
UG Documentation	https://ej2.syncfusion.com/aspnetcore/documentation/file-manager/getting-started/
API reference	https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html

  

Please let us know, if you have need any further assistance.  

  

Regards,   

Sowmiya.P  

[HDusten]

Beautiful,

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

[Sowmiya Padmanaban]

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