Regarding the event firing in ejs filemanager

[Hariprasath Senathiraja]

When a folder is clicked in the navigation panel(To see the folders inside it). There is no event firing to capture some data like folder key. Directly before send is firing. Is there any specific event?,ive tried almost all the events, but no progress.

Attachment: Screenshot_20251216_164805_87f3b45d.png

[Praveen Sellappan]

Hi Hariprasath,

Thank you for reaching out.

In the FileManager component, when a folder is clicked in the navigation pane (to view its contents), the fileOpen and fileSelect events are triggered before the beforeSend event. These events provide the details of the clicked folder, through their event arguments.

We have prepared a sample where both events are handled, and a simple message is logged to the console when a folder in the navigation pane is clicked.

Code snippet:

<ejs-filemanager id='overview' [ajaxSettings]='ajaxSettings'  [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings" [view]='view' (fileOpen)="fileOpen($event)" (fileSelect)="onFileSelect($event)">

        </ejs-filemanager>

onFileSelect(args: any) {

        console.log("Fileselect event is triggered");

    }

    fileOpen (args:any)

    {

        console.log("Fileopen event is triggered");

    }

 

Sample: https://stackblitz.com/edit/angular-lsh43tye-6sqvk9du?file=src%2Fapp.component.html

Please review the sample and let us know if it addresses your requirement.

Regards,

Praveen Sellappan

[Hariprasath Senathiraja]

You can see ...when I click the arrow near pictures, to see the folders inside it in the navigation panel. Those two events you've told me above aren't firing. I want to find if there is  an event for it which will fire, so I can take the details of that specific picture folder (like the folder key and so on)

Attachment: image_4_d1c7ddf.png

[Prasanth Madhaiyan]

Hi Hariprasath Senathiraja,

Based on the information you shared, we’d like to clarify that the FileManager component does not provide any built-in event that fires before the beforeSend event when expanding nodes in the Navigation pane. In beforeSend, you can access the current node details, and you can cancel the request using args.cancel. For your reference, we have attached the relevant API link.

https://ej2.syncfusion.com/angular/documentation/api/file-manager/beforesendeventargs#properties

Since we do not have built-in option to capture expanding, could you share your specific use case for this requirement—ideally with a screenshot or a small example? Once we have this information, we’ll review it and provide a prompt solution.

Regards,

Prasanth Madhaiyan.

[Hariprasath Senathiraja]

below is my part of before send(action = read).And also ive added my fileopen event below. You can see i use fileopen to send the current folderkey to the backend. But due to there is no event firing when trying to expand that current node. I couldn't get the folder key of the specific folder. Is there any solution for this?

fileOpen(args: any) {

        console.log(args);

        const path = args.fileDetails.path;

        console.log(path);

        if (!args.fileDetails.isFile) {

            this.currentFolderKey = args.fileDetails.folderKey;

            this.currentFolderName =

                args.fileDetails.folderName || args.fileDetails.name;

            // if (path) {

            //  this.folderKeyMap[path] = this.currentFolderKey;

            // }

            // console.log(this.folderKeyMap);

        } else {

            args.cancel = true;

            //this.isFileViewerVisible = false;

            this.selectedFileItem = new FileItemModel();

            this.selectedFileItem.name = args.fileDetails.name;

            const file = args.fileDetails;

            const token = localStorage.getItem('access_token');

            const appId = environment.apiConfig.applicationId;

            fetch(`${environment.getEndpoint()}Document/FileManagerDownload`, {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json',

                    Authorization: `Bearer ${token}`,

                    IntegrationID: appId,

                },

                body: JSON.stringify({

                    DocumentInfo: {

                        DocumentKey: file.documentKey,

                        ProjectKey: this._docDto.projectKey,

                        RefCatalogKey: this.currentFolderKey,

                        codeKey: file.codekey,

                    },

                    Data: [file],

                }),

            })

                .then(async (response) => {

                    console.log(response);

                    if (!response.ok) throw new Error('Failed to fetch file.');

                    const data = await response.json();

                    if (data?.base64String && this.selectedFileItem) {

                        console.log('File data received:', data);

                        this.selectedFileItem.base64String = data.base64String;

                        this.selectedFileItem.name = data.name;

                        // console.log(this.selectedFileItem.base64String);

                        // console.log(this.selectedFileItem.name);

                        //this.isFileViewerVisible = false;

                        this.isFileViewerVisible = true;

                    } else {

                        throw new Error('File content missing.');

                    }

                })

                .catch((err) => {

                    console.error(err);

                    this.toastObj.show({

                        title: 'Error',

                        content: 'File download failed.',

                        cssClass: 'e-toast-danger',

                    });

                });

            // this.selectedFileItem.base64String = args.fileDetails.base64string;

            console.log(this.selectedFileItem);

        }

    }

beforeSend(args: any) {

        console.log('Before Send:', args);

        const tken = localStorage.getItem('access_token');

        const appId = environment.apiConfig.applicationId;

if (args.action === 'read') {

            console.log(args);

            const path = args.path; // path sent by breadcrumb

            // if (path && this.folderKeyMap[path]) {

            //  this.currentFolderKey = this.folderKeyMap[path]; // use correct folderKey

            // }

       

            console.log("current", this._docDto.projectKey);

            console.log("last", this.lastProjectKey);

            if (this._docDto.projectKey !== this.lastProjectKey) {

                this.currentFolderKey = 1;

                this.lastProjectKey = this._docDto.projectKey;

                this.currentFolderName = 'Files';

                console.log(this.currentFolderKey);

            }else{

                // this.currentFolderKey =

            }

            console.log(this.currentFolderKey);

            let data = JSON.parse(args.ajaxSettings.data || '{}');

            // this.currentFolderKey2 = args.data[0].folderKey;

            // console.log(this.currentFolderKey2);

            console.log(data);

            data.folderKey = this.currentFolderKey;

           

            data.folderName = this.currentFolderName;

            data.documentInfo = this._docDto;

            data.projectKey = this._docDto.projectKey;

            // data.buKey = this._docDto.buKey;

            console.log(data);

            // console.log(data.folderKey);

            // console.log(data.projectKey);

            args.ajaxSettings.data = JSON.stringify(data);

        } else {

            let data = JSON.parse(args.ajaxSettings.data || '{}');

            data.folderKey = this.currentFolderKey;

            data.folderName = this.currentFolderName;

            data.documentInfo = this._docDto;

            data.projectKey = this._docDto.projectKey;

            args.ajaxSettings.data = JSON.stringify(data);

        }

        //Always attach headers

        args.ajaxSettings.beforeSend = (args: any) => {

            args.httpRequest.setRequestHeader('Authorization', `Bearer ${tken}`);

            args.httpRequest.setRequestHeader('IntegrationID', appId);

        };

    }

[Praveen Sellappan]

Hi Hariprasath Senathiraja,

Thank you for the update and for detailing your implementation.

As you noted, both events expose folder context when a folder is opened (via double-click in the file list or expanding/selecting in the navigation pane):

You are retrieving file details (including the folderKey for folders) in the fileOpen event. Similarly, the beforeSend event provides access to the same folder details through the event arguments, where you can retrieve any custom properties associated with the folder. To demonstrate this, we have prepared a sample where we extract the folder details from args.ajaxSettings.data within the beforeSend event.

For demonstration purposes, we have logged the retrieved folder details to the console.

Code snippet:

  <ejs-filemanager id='filemanager' [ajaxSettings]='ajaxSettings' [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings" [allowDragAndDrop]='true' (beforeSend)="send($event)">

    </ejs-filemanager>

  public send(args:any)

    {

        if(args.action == "read"){

        var filedetails= JSON.parse(args.ajaxSettings.data);

        console.log(filedetails.data[0])

        }

 

    }

 

Here is the sample for your reference: https://stackblitz.com/edit/angular-uahwqhvb-pmi9xmop?file=src%2Fapp.component.ts

To help us pinpoint the gap you’re facing, could you clarify the following:

• In fileOpen, which exact fields are you successfully accessing? 
• In beforeSend, which fields are you unable to access?
• If you can provide a minimal reproducible sample or confirm the fields value you need (original vs expected), we’ll suggest the precise event and mapping. 

We look forward to your feedback.

Regards,

Praveen Sellappan