Pass custom values to server in Angular File Manager component

1 Oct 20258 minutes to read

The Syncfusion^® Angular 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 implement these features using the beforeSend, beforeDownload and beforeImageLoad events with the Physical file system provider.

1. Setting up the File Manager and provider

To create a basic File Manager component, follow the steps in the Getting Started guide. This will allow you to manage files and folders stored either physically or in the cloud.

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

2. Handling File Operations

After setting up 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, use 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.

@Component({
  selector: 'app-root',
  template: `
    <ejs-filemanager id="filemanager" 
      [ajaxSettings]="ajaxSettings"
      (beforeSend)="onBeforeSend($event)">
    </ejs-filemanager>
  `
})
export class AppComponent {
    public hostUrl: string = 'http://localhost:{port}/';
    public ajaxSettings: object = {
        url: this.hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
        uploadUrl: this.hostUrl + 'api/FileManager/Upload',
        downloadUrl: this.hostUrl + 'api/FileManager/Download',
    };

    onBeforeSend(args: BeforeSendEventArgs): void {
        if(args.ajaxSettings){
            (args.ajaxSettings as any).beforeSend = function (args: any) {
                args.httpRequest.setRequestHeader('Authorization', 'User1');
            };
        }
    }
}

On server-side, the 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.

@Component({
  selector: 'app-root',
  template: `
    <ejs-filemanager id="filemanager" 
      [ajaxSettings]="ajaxSettings"
      (beforeDownload)="onBeforeDownload($event)">
    </ejs-filemanager>
  `
})
export class AppComponent {
    public hostUrl: string = 'http://localhost:{port}/';
    public ajaxSettings: object = {
        url: this.hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
        uploadUrl: this.hostUrl + 'api/FileManager/Upload',
        downloadUrl: this.hostUrl + 'api/FileManager/Download',
    };

    onBeforeDownload(args: BeforeDownloadEventArgs) {
        args.useFormPost = false;
        if (args.ajaxSettings) {
            (args.ajaxSettings as any).beforeSend = function (args: any) {
              args.fetchRequest.headers.append('Authorization', 'User1');
            };
        } 
    }
}

On server-side, Download method accesses 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. Handling 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.

@Component({
  selector: 'app-root',
  template: `
    <ejs-filemanager id="filemanager" 
      [ajaxSettings]="ajaxSettings"
      (beforeImageLoad)="onBeforeImageLoad($event)">
    </ejs-filemanager>
  `
})
export class AppComponent {
    public hostUrl: string = 'http://localhost:{port}/';
    public ajaxSettings: object = {
        url: this.hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
        uploadUrl: this.hostUrl + 'api/FileManager/Upload',
        downloadUrl: this.hostUrl + 'api/FileManager/Download',
    };

    onBeforeImageLoad(args: BeforeImageLoadEventArgs): void {
        // Add custom parameter in image URL
        args.useImageAsUrl = false;
        // Check if ajaxSettings are present in the arguments
        if (args.ajaxSettings) {
            (args.ajaxSettings as any).beforeSend = function (args: any) {
              // Append Authorization header with value 'User1' to fetchRequest headers
              args.fetchRequest.headers.append('Authorization', 'User1');
            };
        }
    }
}

On server-side, the GetImage method accesses 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.

Search docs

Ask HelpBot