PHP System Provider

[Johann Kronawitter]

Hello, 

does anyone have a System Provider with PHP?

Or how is it possible to get async the folders of the FileManager?

[Prasanth Madhaiyan]

Hi Johann Kronawitter,

Greetings from Syncfusion support.

Based on the shared details, we understand that you require a PHP file provider service for the FileManager component. However, as of now, we have implemented the following file provider services for the FileManager component, which are documented in the FileManager documentation. For more details, you can refer to the link below:

https://ej2.syncfusion.com/angular/documentation/file-manager/file-system-provider

However, you can create your own PHP file provider service for the FileManager component. In the documentation below, we have created a custom file provider using Node.js, which you can refer to:

https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/custom-file-provider

Additionally, the FileManager component supports both ajaxSettings URL and flat data. To learn more about these features, you can refer to the following user guide documentation:

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

https://ej2.syncfusion.com/angular/documentation/file-manager/flat-data

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Johann Kronawitter]

Hi Prasanth, 

i've tried to work with the flat data.

i get the data from php, but how can i add it async to the file manager ? 

[Prasanth Madhaiyan]

Hi Johann Kronawitter,

Based on the shared details, we understand that you are working with the FileManager's flat data support using a PHP service. You have data available in your PHP service and would like to know how to connect and use it with the FileManager flat data sample at your end.

To achieve this, your PHP retrieved data should be in JSON format and must include the following fields required for flatData support:

• filterPath

• hasChild

• id

• isFile

• name

• parentId

• size

• type

Additionally, for your reference, here is the documentation link: Rendering Flat JSON Data from Google Service.

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Johann Kronawitter]

hi Prasanth,

thanks for your reply.

I'm develop a php service provider, when i'm finished, i can send it to you.

i've a further question:

is it possible customizing the templates (for example of the Details Dialog) within the file manager?

[Prasanth Madhaiyan]

Hi Johann Kronawitter,

We have checked and considered the mentioned requirement for the Angular FileManager component, as a feature on our end. Usually, Syncfusion will plan and implement the features based on feature rank, customer requested count, and volume wish list. We will implement and include this feature in any one of our upcoming releases.

The status of this feature can be tracked through our feedback portal below.

https://www.syncfusion.com/feedback/64361/need-to-provide-support-for-customizing-all-the-dialogs-of-the-file-manager

However, as a workaround, you can customize the Details Dialog in the Syncfusion Angular FileManager component using the event, beforePopupOpen which is triggered before a dialog popup opens. This event allows you to add additional fields or modify the content displayed in the details popup.

Refer to the below code snippets.

[app.component.html]

<div class="sample-container">

  <ejs-filemanager

    id="flatdata"

    [fileSystemData]="resultData"

    (beforePopupOpen)="beforePopupOpen($event)"

  >

  </ejs-filemanager>

</div>

[app.component.ts]

...

export class AppComponent {

  ...

  beforePopupOpen(args:any) {

    if (args.popupName === 'File Details') {

      let table = args.popupModule.dlgContainer.querySelector(

        '.e-dlg-content table'

      );

      let existingRow = Array.from(table.rows).find(

        (row: HTMLTableRowElement) => row.cells[0]?.innerHTML === 'New field'

      );

      if (!existingRow) {

        let row = table.insertRow(0);

        let cell1 = row.insertCell(0);

        let cell2 = row.insertCell(1);

        cell1.innerHTML = 'New field';

        cell2.innerHTML = 'custom';

      }

    }

  }

...

 }

For your reference, we have attached the sample.

Sample: https://stackblitz.com/edit/angular-471gzfma-jmdfvk7x?file=src%2Fapp.component.html

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Johann Kronawitter]

Thank you for your help.

i've one further questions:

How can i pass regional settings to the File Manager?

For example the Date Formats like d.m.Y H:i or m/d/y H:i or d/m/Y H:i

And

How can i change

[Prasanth Madhaiyan]

Hi Johann Kronawitter,

Based on the shared details, we understand that your requirement is to set the date format according to your needs. To achieve this, you can set the date format using the international format in the detailsViewSettings.columns.format field, as shown below:

[app.component.html]

...

<div class="sample-container">

  <ejs-filemanager

    id="flatdata"

    [fileSystemData]="resultData"

    [detailsViewSettings]="detailsViewSettings"

    [view]="view"

    (beforePopupOpen)="beforePopupOpen($event)"

  >

  </ejs-filemanager>

</div>

[app.component.ts]

...

export class AppComponent {

  public contextMenuSettings: object;

  public toolbarSettings: ToolbarSettingsModel;

  public fileData: FileData[];

  public resultData: { [key: string]: Object }[];

  public detailsViewSettings: object;

  public view: string;

  ....

  public ngOnInit(): void {

    this.view = 'Details';

    this.detailsViewSettings = {

      columns: [

        {

          field: 'name',

          headerText: 'Name',

          customAttributes: { class: 'e-fe-grid-name' },

        },

        {

          field: '_fm_modified',

          headerText: 'DateModified',

          // format: 'dd.MM.yyyy HH:mm'

          // format: 'MM/dd/yyyy HH:mm',

          format: 'dd/MM/yyyy HH:mm'

        },

        {

          field: 'size',

          headerText: 'Size',

          template: '<span class="e-fe-size">${size}</span>',

          format: 'n2',

        },

      ],

    };

...

}

}

For your reference, we have attached the sample. 

Sample: https://stackblitz.com/edit/angular-471gzfma-79fbekcg?file=src%2Fapp.component.html

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.