1. Home
  2. Forum
  3. Angular
  4. Angular file explorer unable to get the folder path in custom menu

Angular file explorer unable to get the folder path in custom menu

Hello,

I am using angular ej file exploror and i added custom menu its working fine but,
in custom menu i am unable to get the folder path and if i selected any file means i can get the complete path
the custom menu display its perfectly hit when i click the menu but only problem is to get the path "_fm_imageUrl" is not found while i click through the folder. its available only on image file only.

Is there any possible to get the folder/file path of selected file or folder in custom menu event

Client Side:
//custom menu event this works on image file but folder are any other files means i am unable to get the path it return with null value
OnFile(args: MenuClickEventArgs)
{
  for(var i in args.fileDetails)
    {
      let name:any=args.fileDetails[i];
      let detail=name._fm_imageUrl;
      Console.log(detail);
    }   
}

Kindly share if you have any sample to resolve this.
Thanks in advance

3 Replies 1 reply marked as answer
MK Muthukrishnan Kandasamy Syncfusion Team December 31, 2020 10:50 AM UTC

 
Hi Karthick, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement in EJ File Explorer component. Based on your provided details, we suspect that your requirement is to get the current path when clicking the custom context menu item. We have prepared sample application to meet your requirement, in this sample we get the current path and selected items. Please refer to the below code block. 
 
[app.component.html] 
 
 
<ej-fileexplorer 
  id="fileExplorer" 
  #file 
  (menuClick)="onMenuClick($event)" 
  [isResponsive]="true" 
  minWidth="150px" 
  [contextMenuSettings]="contextMenuSettings" 
  width="100%" 
  layout="tile" 
  style="display:block"> 
</ej-fileexplorer> 
 
 
[app.component.ts] 
 
export class AppComponent { 
  contextMenuSettings: Object; 
  @ViewChild('file') fileObj: EJComponents<any, any>; 
  constructor() { 
    this.contextMenuSettings = { 
      // define the ContextMenu items 
      items: { 
          navbar: ['Custom', 'Upload', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|', 'Getinfo'], 
          cwd: ['Refresh', 'Paste', '|', 'SortBy', '|', 'NewFolder', 'Upload', '|', 'Getinfo'], 
          files: ['Custom','Open', 'Download', '|', 'Delete', 'Rename', '|', 'Cut', 'Copy', 'Paste', '|','OpenFolderLocation', 'Getinfo'] 
      }, 
      // added the custom ContextMenu item's (Custom) functionality 
      customMenuFields: [ 
      { 
          id: 'Custom', 
          text: 'Get Path', 
          spriteCssClass: 'custom-grid' 
      }, ] 
  }; 
 
  } 
  onMenuClick(args) { 
    if(args.text == "Get Path") 
      console.log("Path :" + this.fileObj.widget._originalPath + this.fileObj.widget._selectedItems[0]); 
    } 
} 
 
 
The attached sample application can be downloaded from the below link. 
 
 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 



KA karthick January 4, 2021 06:59 AM UTC

Thank you for response,

But i am using EJ2 Angular File manager not an ej angular i think its an JS. still i tried with your solution.
@ViewChild('file') fileObj: EJComponents<any, any>; 

by install ej angular in my application still its facing 
this .fileObj is undefined.

OnFile(args: MenuClickEventArgs)
{
  for(var i in args.fileDetails)
    {
      let name:any=args.fileDetails[i];
      let detail=name._fm_imageUrl;
      Console.log(detail);
    }   
}

In ej2 angular, we can get only (args.item.text === 'Custom'). but you have given on args.text to check the name.
Kindly provide for solution for ej2 angular file manager

I am refering this URL for refernce:
https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/

Thanks in Advance



SP Sowmiya Padmanaban Syncfusion Team January 5, 2021 11:18 AM UTC

Hi karthick, 
 
Sorry for the inconvenience,  
 
Please refer the below link for adding the custom item to context menu of FileManager component.  
 
 
Query : this .fileObj is undefined.  
 
Please, refer the below code snippet for component instance reference. 

  
<ejs-filemanager 
  #file 
  id="filemanager" 
  [ajaxSettings]="ajaxSettings" 
  [contextMenuSettings]="contextMenuSettings" 
  (menuOpen)="menuOpen($event)" 
  (menuClick)="menuClick($event)" 
> 
</ejs-filemanager> 
 
@ViewChild("file") public file: FileManagerComponent; 
 
 

Query2-  fetching file path. 
 
You can fetch the file path by using filter path and name property in menuClick event argument. 
 
Please, refer to the below code snippet. 

<ejs-filemanager 
  #file 
  id="filemanager" 
  [ajaxSettings]="ajaxSettings" 
  [contextMenuSettings]="contextMenuSettings" 
  (menuOpen)="menuOpen($event)" 
  (menuClick)="menuClick($event)" 
> 
</ejs-filemanager> 
 
  menuClick(args) { 
    if (args.item.text === "Custom") { 
      for (var i in args.fileDetails) { 
        let name = args.fileDetails[i].filterPath + args.fileDetails[i].name; 
        console.log(name); 
      } 
    } 
  } 
 

 

Please, refer to the sample link below. 
 
 
Please, refer the below links for FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon