Pass custom value to server in ASP.NET Core File Manager control

18 Nov 20183 minutes to read

The File Manager control 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

2. Handling File Operations

After setting the File Manager control 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 control. 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.

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.

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. Inside this event, set useImageAsUrl to false to instruct the FileManager not to load the image directly via its URL but instead to use a fetch request. Here, attach the Authorization header with the value User1 within the beforeSend event of the ajaxSettings.

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

// gets the image(s) from the given path
[Route("GetImage")]
public object GetImage([FromBody] FileManagerDirectoryContent 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.