Rendering Flat JSON Data in the Angular File Manager Component
10 Sep 202524 minutes to read
The File Manager component supports using flat JSON data as an array of objects for rendering files and folders without requiring a backend service. This approach eliminates the need to define an ajaxSettings URL and allows for client-side data manipulation.
Implementing Flat JSON Data Binding
To bind flat JSON data to the File Manager:
- Use the File Manager component’s fileSystemData property to provide an array of fileData interface objects.
- Define parent-child relationships between files and folders using the
parentIdproperty in each object.
This means you no longer need to use a separate service provider, as you can integrate services like Google, Amazon, Azure, and others directly into your code using the FileManager’s action events.
The fileData Interface Structure
The fileData interface requires the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | The name of the file or folder |
size |
number | The size of the file in bytes (not required for folders) |
dateModified |
Date | The date when the file or folder was last modified |
hasChild |
boolean | Indicates whether a folder has child items |
isFile |
boolean | Indicates whether the item is a file (true) or folder (false) |
type |
string | The MIME type of the file (for files only) |
id |
string | Unique identifier for the file or folder |
parentId |
string or null | ID of the parent folder. Use null for root-level items |
Local Data Implementation
The File Manager can be populated with local data by providing an array of fileData interface objects with parentId mapping.
Root-Level Folders and Files:
- To render items at the root level, either set the
parentIdasnullor omit theparentIdproperty from the object.
Nested Folders and Files:
- For child items, set the
parentIdto match theidof the parent folder.
import { Component, ViewEncapsulation } from '@angular/core';
import {
FileManagerComponent,
NavigationPaneService,
ToolbarService,
DetailsViewService,
FileManagerModule,
FileManagerAllModule,
} from '@syncfusion/ej2-angular-filemanager';
import {
ToolbarSettingsModel,
Permission,
FileData,
} from '@syncfusion/ej2-filemanager';
/**
* File Manager sample with amazon s3 service
*/
@Component({
selector: 'app-root',
template: `<div class="sample-container">
<ejs-filemanager id='flatdata' [toolbarSettings]="toolbarSettings" [fileSystemData]="resultData" [contextMenuSettings]="contextMenuSettings" height="375px">
</ejs-filemanager>
</div>`,
styleUrls: ['app.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [
NavigationPaneService,
ToolbarService,
DetailsViewService,
FileManagerComponent,
],
standalone: true,
imports: [FileManagerModule, FileManagerAllModule],
})
export class AppComponent {
public contextMenuSettings?: object;
public toolbarSettings?: ToolbarSettingsModel;
public permission?: Permission;
public fileData?: FileData[];
public resultData?: { [key: string]: Object }[];
public ngOnInit(): void {
this.permission = {
copy: false,
download: false,
write: false,
writeContents: false,
read: true,
upload: false,
message: '',
};
this.fileData = [
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T18:16:38.4384894+05:30'),
filterPath: '',
hasChild: true,
id: '0',
isFile: false,
name: 'Files',
parentId: undefined,
size: 1779448,
type: 'folder',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\',
hasChild: false,
id: '1',
isFile: false,
name: 'Documents',
parentId: '0',
size: 680786,
type: 'folder',
permission: this.permission,
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\',
hasChild: false,
id: '2',
isFile: false,
name: 'Downloads',
parentId: '0',
size: 6172,
type: 'folder',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\',
hasChild: false,
id: '3',
isFile: false,
name: 'Music',
parentId: '0',
size: 20,
type: 'folder',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\',
hasChild: true,
id: '4',
isFile: false,
name: 'Pictures',
parentId: '0',
size: 228465,
type: 'folder',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\',
hasChild: false,
id: '5',
isFile: false,
name: 'Videos',
parentId: '0',
size: 20,
type: 'folder',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Documents\\',
hasChild: false,
id: '6',
isFile: true,
name: 'EJ2_File_Manager',
parentId: '1',
size: 12403,
type: '.docx',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Documents\\',
hasChild: false,
id: '7',
isFile: true,
name: 'EJ2_File_Manager',
parentId: '1',
size: 90099,
type: '.pdf',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Documents\\',
hasChild: false,
id: '8',
isFile: true,
name: 'File_Manager_PPT',
parentId: '1',
size: 578010,
type: '.pptx',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Documents\\',
hasChild: false,
id: '9',
isFile: true,
name: 'File_Manager',
parentId: '1',
size: 274,
type: '.txt',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Downloads\\',
hasChild: false,
id: '10',
isFile: true,
name: 'Sample_Work_Sheet',
parentId: '2',
size: 6172,
type: '.xlsx',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Music\\',
hasChild: false,
id: '11',
isFile: true,
name: 'Music',
parentId: '3',
size: 10,
type: '.mp3',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Music\\',
hasChild: false,
id: '12',
isFile: true,
name: 'Sample_Music',
parentId: '3',
size: 10,
type: '.mp3',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Videos\\',
hasChild: false,
id: '13',
isFile: true,
name: 'Demo_Video',
parentId: '5',
size: 10,
type: '.mp4',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Videos\\',
hasChild: false,
id: '14',
isFile: true,
name: 'Sample_Video',
parentId: '5',
size: 10,
type: '.mp4',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Pictures\\',
hasChild: false,
id: '15',
isFile: false,
name: 'Employees',
parentId: '4',
size: 237568,
type: 'folder',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Pictures\\Employees\\',
hasChild: false,
id: '16',
isFile: true,
name: 'Albert',
parentId: '15',
size: 53248,
type: '.png',
imageUrl:
'https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Pictures\\Employees\\',
hasChild: false,
id: '17',
isFile: true,
name: 'Nancy',
parentId: '15',
size: 65536,
type: '.png',
imageUrl:
'https://ej2.syncfusion.com/demos/src/avatar/images/pic02.png',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Pictures\\Employees\\',
hasChild: false,
id: '18',
isFile: true,
name: 'Michael',
parentId: '15',
size: 69632,
type: '.png',
imageUrl:
'https://ej2.syncfusion.com/demos/src/avatar/images/pic03.png',
},
{
dateCreated: new Date('2023-11-15T19:02:02.3419426+05:30'),
dateModified: new Date('2024-01-08T16:55:20.9464164+05:30'),
filterPath: '\\Pictures\\Employees\\',
hasChild: false,
id: '19',
isFile: true,
name: 'Robert',
parentId: '15',
size: 48951,
type: '.png',
imageUrl:
'https://ej2.syncfusion.com/demos/src/avatar/images/pic04.png',
},
];
this.resultData = [].slice.call(this.fileData) as {
[key: string]: Object;
}[];
this.toolbarSettings = {
items: [
'NewFolder',
'Cut',
'Copy',
'Paste',
'Delete',
'Rename',
'SortBy',
'Refresh',
'Selection',
'View',
'Details',
],
};
this.contextMenuSettings = {
file: ['Cut', 'Copy', '|', 'Delete', 'Rename', '|', 'Details'],
folder: [
'Open',
'|',
'Cut',
'Copy',
'Paste',
'|',
'Delete',
'Rename',
'|',
'Details',
],
layout: [
'SortBy',
'View',
'Refresh',
'|',
'Paste',
'|',
'NewFolder',
'|',
'Details',
'|',
'SelectAll',
],
visible: true,
};
}
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';Handling File Operations with Events
When using flat JSON data, you’ll need to handle file operations manually by subscribing to the File Manager’s events and updating your data accordingly.
Key Events for Data Manipulation
Event Name | Description
— | —
beforeDelete | This event is triggered before the deletion of a file or folder occurs. It can be utilized to prevent the deletion of specific files or folders. Any actions, such as displaying a spinner for deletion, can be implemented here.
delete | This event is triggered after the file or folder is deleted successfully. The deleted file or folder details can be retrieved here. Additionally, custom elements’ visibility can be managed here based on the application’s use case.
beforeFolderCreate | This event is triggered before a folder is created. It allows for the restriction of folder creation based on the application’s use case.
folderCreate | This event is triggered when a folder is successfully created. It provides an opportunity to retrieve details about the newly created folder.
search | This event is triggered when a search action occurs in the search bar of the File Manager component. It triggers each character entered in the input during the search process.
beforeRename | This event is triggered when a file or folder is about to be renamed. It allows for the restriction of the rename action for specific folders or files by utilizing the cancel option.
rename | This event is triggered when a file or folder is successfully renamed. It provides an opportunity to fetch details about the renamed file.
beforeMove | This event is triggered when a file or folder begins to move from its current path through a copy/cut and paste action.
move | This event is triggered when a file or folder is pasted into the destination path.