Use e-filemanager-ajaxsettings tag (in .html file)

[Thijs]

Hello,

When using the  e-js-filemanager-ajaxsetting tag in my (angular-component) html file, i get the console error 'e-filemanager-ajaxsettings' is not a known element:..... 

which module do I have to include so the e-js-filemanager-ajaxsetting is a known element?

My code: 

<ejs-filemanager id='filemanager'>

<e-filemanager-ajaxsettings

url="/Home/FileOperations?param={{data.id}}"

uploadUrl="/Home/Upload"

downloadUrl="/Home/Download"

getImageUrl="/Home/GetImage"

>

</e-filemanager-ajaxsettings>

</ejs-filemanager>

[Narayanasamy Panneer Selvam]

Hi Thijs, 

 

Greetings from Syncfusion support. 

 

We have checked your query and attached code snippet. We suspect that the ajax settings in FileManger is not mapped properly. Kindly refer the below snippet to bind the ajax setting property in angular file manager component. 

Add the below code in appp.component.html file. 

<ejs-filemanager id='default-filemanager' #filemanagerObj [ajaxSettings]='ajaxSettings'> 

</ejs-filemanager> 

 

 

Add the below code in app.component.ts file 

 public hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; 

 public ajaxSettings: object = { 

    url: this.hostUrl + 'api/FileManager/FileOperations', 

    getImageUrl: this.hostUrl + 'api/FileManager/GetImage' 

 }; 

 

 

Refer the below documentation link to bind the ajax settings property in file manager component. 

UG documentation - https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started/?no-cache=1#run-the-application 

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

 

Please let us know if you need any further update on this. 

 

Regards,  

Narayanasamy P.  

[Thijs]

Hello Narayanasamy,

Thanks for your answer, I am using the solution you provided. a  disadvantage of this solution is that I can't bind the (dynamic) data in the ajaxsetting, but have to reset the ajaxSettings.Url in the ngOnInit of the .ts file:

ngOnInit() {

    if(this.careblock.dataId > 0)

    {

      this.ajaxSettings.url =  this.hostUrl + 'api/FileManager/FileOperations?clientId=' + this.careblock.dataId;

    }

  }

Will the ajaxsettings be mapped correctly for the filmanager in the future? and if so, can I be notified?

Kind regards,

Thijs Rutten

[Ashokkumar Balasubramanian]

Hello Thijs, 

 

We have checked your reported query of updating the ajaxSettings property in dynamically. By default, the File Manager component having the support for updating this property in dynamically. So, kindly follow the below suggested ways to bind the dynamic data for ajaxSettings URL. 

 

For your reference, we have prepared a simple sample to change the ajaxSettings URL for file manager component during button click by using file manager instance. Refer the below code snippet to change the ajaxSettings URL. 

 

onChange() { 

   if (this.data > 0) { 

       this.filemanagerInstance.ajaxSettings.url = 'https://ej2services.syncfusion.com/production/web-services/api/AzureFileManager/AzureFileoperations' 

    } 

} 

 

Refer the sample link below. 

 

https://stackblitz.com/edit/angular-l1r9wv?file=main.ts 

 

Please check the sample and get back to us, if you require any further assistance on this. 

 

Regards, 

Ashokkumar B.