Authorize on FileManager API endpoint

[Davy]

What is the cleanest way to add a Bearer token to each Ajax API request for the FileManagers requests so we can use the default .NET authorization?

I tried OnSend, but it is not possible to add request headers with Syncfusion.Blazor.FileManager.BeforeSendEventArgs.

[Indhumathy Loganathan]

Hi Davy,

Thanks for contacting Syncfusion support.

Currently we are validating your requirement in FileManager component. We will update the details on 22nd April 2021.

Please be patience until then.

Regards,
Indhumathy L

[Indhumathy Loganathan]

Hi Davy, 

 

Thank you for your patience. 

 

We have validated your requirement in Blazor File Manager. Currently, we have not provided support to pass the additional data (Headers) in the Ajax request in the events of File Manager. We have considered your requirement as a feature request. Usually, Syncfusion will plan and implement the features based on feature rank, customer requested count and volume wish-list. We will implement and include this feature in any one of our upcoming releases.  

 

You can track the status through the below portal link.  

 

https://www.syncfusion.com/feedback/13910/provide-support-to-pass-additional-data-in-blazor-file-manager-ajaxrequest  

  

We appreciate your patience until then.  

  

Regards,  

Indhumathy L 

[Daniel Reibelt]

I would like to see this support. It is rare to not include authentication, and for smaller applications, it is likeley the api and ui could exist under the same authentication provider

[Indhumathy Loganathan]

Hi Daniel,

Currently we have support to send authorization header value from client to server in the OnSend event of File Manager for both Read and Upload operations. Please check the below code snippet.

Read and Upload operation:

[Index.razor]

 

void onsend(BeforeSendEventArgs args)

{

    args.HttpClientInstance.DefaultRequestHeaders.Add("userId", "Syncfusion");

}

[FileManagerController.cs]

 

[Route("FileOperations")]

public object FileOperations([FromBody] FileManagerDirectoryContent args)

{

    var root = HttpContext.Request.Headers["userId"];

    ...

    return null;

}

 

// uploads the file(s) into a specified path

[Route("Upload")]

public IActionResult Upload(string path, IList<IFormFile> uploadFiles, string action, string data)

{

    FileManagerResponse uploadResponse;

    var root = HttpContext.Request.Headers["userId"];

    ...

}

Download operation:

We have performed Download operation on form submit, so we don’t have any direct support to pass custom value for Download operation. But you can prevent our default download operation by setting args.Cancel as true in BeforeDownload event. Then you can trigger the customized download operation using an interop call where you can pass custom values to server side. Check out the below code snippet.

[Index.razor]

 

public async Task beforeDownload(BeforeDownloadEventArgs<FileManagerDirectoryContent> args)

{

    args.Cancel = true;

    DirectoryContent[] data = new DirectoryContent[]{ new DirectoryContent()

{

    Name = args.Data.DownloadFileDetails[0].Name, // name of the file

    IsFile = args.Data.DownloadFileDetails[0].IsFile, // indicates whether file or folder

    FilterPath = args.Data.DownloadFileDetails[0].FilterPath, // path of the file/folder from root directory

    HasChild = args.Data.DownloadFileDetails[0].HasChild, // if folder has child folder set as true else false

    Type = args.Data.DownloadFileDetails[0].Type // empty string for folder and file type like .png for files

} };

    DownloadUrl = $"{NavigationManager.BaseUri}api/FileManager/Download";

    DirectoryContent downloadData = new DirectoryContent()

    {

        Data = data,

        Path = args.Data.Path, // path in which the file is located (make ensure to add the path from root directory excluding the root directory name)

        Names = args.Data.Names // names of the files to be downloaded in the specified path

    };

    await jsRuntime.InvokeAsync<object>("saveFile", downloadData, DownloadUrl);

}

[_Host.cshtml]

 

<script>

    window.saveFile = (data, downloadUrl) => {

        //creating the data to call download web API method

        var i = {

            action: "download",

            path: data.path,

            names: data.names,

            data: data.data,

            customvalue: "Syncfusion",

        }

            , a = ej.base.createElement("form", {

                id: "sample_downloadForm",

                attrs: {

                    action: downloadUrl,

                    method: "post",

                    name: "downloadForm",

                    download: ""

                }

            })

            , s = ej.base.createElement("input", {

                id: "sample_hiddenForm",

                attrs: {

                    name: "downloadInput",

                    value: JSON.stringify(i),

                    type: "hidden"

                }

            });

        //appeding the dynamically created form to the document and perform form sumbit to perform download operation

        a.appendChild(s),

            document.body.appendChild(a),

            document.forms.namedItem("downloadForm").submit(),

            document.body.removeChild(a)

    }

</script>

[FileManagerController.cs]

 

// downloads the selected file(s) and folder(s)

[Route("Download")]

public IActionResult Download(string downloadInput)

{

    FileManagerDirectoryContentExtend args = JsonConvert.DeserializeObject<FileManagerDirectoryContentExtend>(downloadInput);

    var root = args.customvalue;

    return operation.Download(args.Path, args.Names, args.Data);

}

For your reference, we have attached a sample in the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager1891440827

Please check the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Daniel Reibelt]

Thanks, i will investigate.

i would like to request feature to provide something like inject the HttpClient entirely, this way much of these things can be done at a service level. OR It would also be nice also if we could manage this like a customadapter for the datamanger. I will raise feature requests.

[Indhumathy Loganathan]

Hi Daniel,

In our previous update, we demonstrated a solution to send JWT tokens from client end to server for both read and upload operations using HttpClientInstance. By using this support, you can pass the HttpClientinstance from client to server. We were unclear about "injecting the HttpClient entirely; this way, much of these things can be done at a service level" based on your explanation. Please explain your exact use case with the File Manager component with a more detailed explanation. Based on your update, we will further validate this issue.

Regards,

Indhumathy L