Pass custom value to server in React File Manager component

18 Mar 20258 minutes to read

The Syncfusion React File Manager component allows seamless backend server interaction by passing custom values. This enhances the functionality and security of file operations, particularly helpful for tasks like authentication, logging, or user role-based processing. In multi-user systems, it ensures file access permissions and actions are user-specific and secure. You can manage user-specific operations such as Read, Delete, Rename, Create, Move, Copy, Details, Search, Upload, Download, and GetImage using custom headers or query parameters. This guide demonstrates implementing these features using the beforeSend, beforeDownload and beforeImageLoad events. Let’s explore how to achieve this in Physical file system provider.

1. Setting up the File Manager and provider

To create a basic File Manager component, start by following the easy steps in the Getting Started guide. This will allow you to manage files and folders on your system, whether they are stored physically or in the cloud.

For connecting the File Manager to a physical file system, check out the Physical file provider section. This part of the documentation will help you configure it correctly.

2. Handling File Operations

After setting the File Manager component with the physical file system provider, you can handle file operations by passing custom values to the server. To pass custom values during the Read, Delete, Rename, Create, Move, Copy, Details, Search and Upload operations, utilize the beforeSend event of the File Manager component. This event allows you to modify the request before it is sent to the server. You can add custom headers to the request to pass additional information to the server.

The onBeforeSend function is designed to enhance security by adding an authorization header to every outgoing AJAX request. Before a request is sent, this function is called, and it attaches the Authorization header with the value User1 to the request. This ensures that the server can verify the request’s authenticity and handle it accordingly.

function onBeforeSend(args) {
    if (args.ajaxSettings) {
        args.ajaxSettings.beforeSend = function (args) {
            args.httpRequest.setRequestHeader('Authorization', 'User1');
        };
    }
}
<div>
    <div className="control-section">
        <FileManagerComponent  id="file"
            ajaxSettings = {{
                // Replace the hosted port number in the place of "{port}"
                url="http://localhost:{port}/api/FileManager/FileOperations",
                downloadUrl="http://localhost:{port}/api/FileManager/Download",
                uploadUrl="http://localhost:{port}/api/FileManager/Upload",
                getImageUrl="http://localhost:{port}/api/FileManager/GetImage"
            }} beforeSend={onBeforeSend.bind(this)}>
        </FileManagerComponent>
    </div>
</div>

In server-side, FileOperations and Upload methods access the Authorization header from the incoming HTTP request and perform the necessary operations.

public class FileManagerController : Controller
{
    ...
    [Route("FileOperations")]
    public object FileOperations([FromBody] FileManagerDirectoryContent args)
    {
        var header = HttpContext.Request.Headers["Authorization"];
        ...
    }

    // uploads the file(s) into a specified path
    [Route("Upload")]
    public IActionResult Upload(string path, long size, IList<IFormFile> uploadFiles, string action)
    {
        var header = HttpContext.Request.Headers["Authorization"];
        ...
    }
    ...
}

3. Handling Download Operation

For the download operation, use the beforeDownload event, setting useFormPost as false to use a fetch request to send the custom header in beforesend event. Here an Authorization header is appended to fetch request headers with the value User1.

function onBeforeDownload(args) {
    args.useFormPost = false;
    if (args.ajaxSettings) {
        args.ajaxSettings.beforeSend = function (args) {
            args.fetchRequest.headers.append('Authorization', 'User1');
        };
    }
}
<div>
    <div className="control-section">
        <FileManagerComponent  id="file"
            ajaxSettings = {{
                // Replace the hosted port number in the place of "{port}"
                url="http://localhost:{port}/api/FileManager/FileOperations",
                downloadUrl="http://localhost:{port}/api/FileManager/Download",
                uploadUrl="http://localhost:{port}/api/FileManager/Upload",
                getImageUrl="http://localhost:{port}/api/FileManager/GetImage"
            }} beforeDownload={onBeforeDownload.bind(this)}>
        </FileManagerComponent>
    </div>
</div>

In server-side, Download method access the Authorization header from the incoming HTTP request and perform the necessary operations.

[Route("Download")]
public object Download([FromBody] FileManagerDirectoryContent args)
{
    var header = HttpContext.Request.Headers["Authorization"];
    ...
}

4. For GetImage Operation

For the GetImage operation, use the beforeImageLoad event to pass custom value. Since the GetImage operation doesn’t support custom headers in HTTP requests, pass the custom values along with imageUrl using query parameters instead.

function onBeforeImageLoad(args) {
    args.imageUrl = args.imageUrl + "&Authorization=" + "User1";
}

<div>
    <div className="control-section">
        <FileManagerComponent  id="file"
            ajaxSettings = {{
                // Replace the hosted port number in the place of "{port}"
                url="http://localhost:{port}/api/FileManager/FileOperations",
                downloadUrl="http://localhost:{port}/api/FileManager/Download",
                uploadUrl="http://localhost:{port}/api/FileManager/Upload",
                getImageUrl="http://localhost:{port}/api/FileManager/GetImage"
            }} beforeImageLoad={onBeforeImageLoad.bind(this)}>
        </FileManagerComponent>
    </div>
</div>

In server-side, you can able to get the custom query parameter value using Authorization in GetImage method. To get the custom query parameter value, extend the FileManagerDirectoryContent class and add the custom property Authorization.

public class FileManagerAccessController : Controller
{
    ...
    public class FileManagerDirectoryContent1 : FileManagerDirectoryContent
    {
        public string Authorization { get; set; }
    }
    ...

    // gets the image(s) from the given path
    [Route("GetImage")]
    public IActionResult GetImage(FileManagerDirectoryContent1 args)
    {
        var header = args.Authorization;
        return this.operation.GetImage(args.Path, args.Id, false, null, null);
    }

    ...
}

Note: View the complete Github sample which includes all the above event along with service code for passing custom values to server.