In Angular ej2 file manager i am unable to get folder path in Custom menu

[karthick]

Hello,

I am using angular ej2 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

[Sowmiya Padmanaban]

Hi karthick, 

 

Sorry for the inconvenience,  

 

Please refer to the below link for adding the custom item to context menu of FileManager component.  

 

https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/adding-custom-item-to-context-menu/ 

 

Query1-  fetching file path. 

 

You can fetch the file/folder 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. 

 

https://stackblitz.com/edit/angular-rj2zau-ggbi9c?file=app.component.ts 

 

If we have misunderstood your requirement, please share the below details to proceed further. 

 

·         Share us screenshot/video footage of your requirement. 

 

·         Share us the exact requirement and real-time use case scenario for FileManager component. 

 

Please, refer to the below links for FileManager component. 

 

UG Documentation- https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/angular/demos/#/material/file-manager/overview/  

 

API reference- https://ej2.syncfusion.com/angular/documentation/api/file-manager/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[karthick]

Hi karthick, 

 

Sorry for the inconvenience,  

 

Please refer to the below link for adding the custom item to context menu of FileManager component.  

 

https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/adding-custom-item-to-context-menu/ 

 

Query1-  fetching file path. 

 

You can fetch the file/folder 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. 

 

https://stackblitz.com/edit/angular-rj2zau-ggbi9c?file=app.component.ts 

 

If we have misunderstood your requirement, please share the below details to proceed further. 

 

·         Share us screenshot/video footage of your requirement. 

 

·         Share us the exact requirement and real-time use case scenario for FileManager component. 

 

Please, refer to the below links for FileManager component. 

 

UG Documentation- https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/angular/demos/#/material/file-manager/overview/  

 

API reference- https://ej2.syncfusion.com/angular/documentation/api/file-manager/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

Hello sowmiya,

thank you understanding the requirement.

this is what exactly what i want. i tried with your solution but its return null values kindly assist me to complete this problem.

<ejs-filemanager 

  #file

  id="filemanager"

  [ajaxSettings]="ajaxSettings" 

  (failure)="onFail($event)" 

  (beforeSend)="beforeSend($event)"

  (beforeDownload)="beforeDownload($event)" 

  (beforeImageLoad)="beforeImageLoad($event)" 

  [contextMenuSettings]="contextMenuSettings"

  (menuOpen)="menuOpen($event)" 

  (menuClick)="menuClick($event)">

  </ejs-filemanager>

// event for custom menu item

  menuClick(args) {

    if (args.item.text === 'Share') {

      for(var i in args.fileDetails)

      {

        console.log(args.fileDetails[i]);

        let name = args.fileDetails[i].filterPath + args.fileDetails[i].name;

        console.log(name);

        alert(name);

      }

   }

}

Response:

--While click on folder select custom menu

action: null

caseSensitive: false

data: null

dateCreated: "0001-01-01T00:00:00"

dateModified: "0001-01-01T00:00:00"

filterId: null

filterPath: null

hasChild: false

id: null

isFile: false

name: "Test Three"

names: null

newName: null

parentId: null

path: null

permission: null

previousName: null

renameFiles: null

searchString: null

showHiddenItems: false

size: 0

targetData: null

targetPath: null

type: "Folder"

uploadFiles: null

_fm_created: "0000-12-31T18:06:32.000Z"

_fm_htmlAttr:

class: "e-large-icon"

title: "Test Three"

__proto__: Object

_fm_icon: "e-fe-folder"

_fm_iconClass: "e-fe-folder"

_fm_id: "fe_tree_0_0"

_fm_modified: "0000-12-31T18:06:32.000Z"

__proto__: Object

--while click on file select custom menu

action: null

caseSensitive: false

data: null

dateCreated: "2020-12-18T07:18:55-05:00"

dateModified: "0001-01-01T00:00:00"

filterId: null

filterPath: null

hasChild: false

id: null

isFile: true

name: "ironman1(1).jpg"

names: null

newName: null

parentId: null

path: null

permission: null

previousName: null

renameFiles: null

searchString: null

showHiddenItems: false

size: 9595

targetData: null

targetPath: null

type: ".jpg"

uploadFiles: null

_fm_created: "2020-12-18T12:18:55.000Z"

_fm_htmlAttr:

class: "e-large-icon"

title: "ironman1(1).jpg"

__proto__: Object

_fm_iconClass: "e-fe-image"

_fm_imageAttr:

alt: "ironman1(1).jpg"

__proto__: Object

_fm_imageUrl: "https://testapi.ikeyvault.com/v4/api/AmazonS3Provider/AmazonS3GetImage?path=/Test Two/ironman1(1).jpg&time=1610004692116&Authorization=Uvtv5BrC5nFy33ehAfQAkA%3D%3D"

_fm_modified: "0000-12-31T18:06:32.000Z"

__proto__: Object

In Above, I will given both response of file and folder. I can get only file or folder name and type alone. I am unable to get the path.

I have given "filterpath" is null. kindly check it.

let name = args.fileDetails[i].filterPath + args.fileDetails[i].name;

this is exactly what i want thank you.

-> https://stackblitz.com/edit/angular-rj2zau-ggbi9c?file=app.component.ts

[karthick]

Hello Sowmiya,

Thank you for your response, I can found the solution for the above issue.

 let name = args.fileDetails[i].filterPath + args.fileDetails[i].name; 

        console.log(name); 

Instead of this, I tried with below solution its works for me.

Thank you

@ViewChild("file") public file: FileManagerComponent; 

let name = this.file.path + args.fileDetails[i].name;

console.log(name);

[Sowmiya Padmanaban]

Hi Karthick,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P 

[karthick]

Hello Sowmiya.p

let name = args.fileDetails[i].filterPath + args.fileDetails[i].name; 

        console.log(name); 

args.fileDetails[i].filterPath will return only null value all the time in custom menu

note: this is the reference i am trying "https://stackblitz.com/edit/angular-rj2zau-ggbi9c?file=app.component.ts"

Attachment: ej2_219b603f.zip

[Indhumathy Loganathan]

Hi Karthick, 

 

We have validated your reported query in the shared sample. But unable to reproduce the exact issue at our end. We are able to get the filterPath for the custom option in context menu and recorded the same for your reference. Please refer to the below video footage. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ContextMenuRecording-944817863 

 

In the video, we have printed the “name” value for both folder and file in the console and able to get the filterPath for it. We understood that you have been facing some issues with filter path but in order to reproduce it from our end, we request you to share the below details.  

 

1.      Whether you have been facing the same issue in the previous shared sample. 

2.      Service provider used in your sample. 

3.      Share us screenshot/video footage of your requirement.  

4.      Share us the exact requirement and real-time use case scenario for File Manager component. 

5.      If possible, reproduce the issue in the above shared sample along with video or steps to replicate the exact issue to assist you promptly.  

 

Regards, 

Indhumathy L 

[karthick]

Hello Guys,

I can see your screen record video same thing only I want to create.

so I created my screen record of the args filterpath is null only. kindly check video with vlc player.

https://stackblitz.com/edit/angular-rj2zau-sz7fwk?file=app.component.ts

this is exactly my requirement.

if  any thing further info need means kindly ping me personal mail 

Thanks in Advance

Attachment: custom_button_filterpath_is_null_6ac6b8a2.zip

[Indhumathy Loganathan]

Hi Karthick, 

 

Thanks for the details.  

 

We have validated your reported issue “filterpath value is null in menu click event of File Manager with Amazon S3 provider” and considered this as bug from our end. We will include this fix in second weekly patch release of June, 2021. You can track the status of your reported problem through the below portal link, 

 

Feedback: https://www.syncfusion.com/feedback/25267/file-manager-amazon-s3-provider-returns-filterpath-value-as-null-in-menuclick 

 

We appreciate your patience. 

 

Regards, 

Indhumathy L 

[Indhumathy Loganathan]

Hi Karthick, 

 

We have checked the “filterpath value is null in menu click event of File Manager with Amazon S3 provider” issue and now we are able to get the filterPath for the custom option in context menu. You can find the sample and service provider from below link. 

 

Sample: https://stackblitz.com/edit/angular-rj2zau-kcuqy5?file=app.component.ts 

 

Service Provider: https://www.syncfusion.com/downloads/support/forum/161200/ze/ej2-amazon-s3-aspcore-file-provider1283832118 

 

We have recorded the same for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/161200/ze/Context_Menu_Recording-1642949784 

 

Please check the shared details and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L