Rendering Flat JSON Data in the React File Manager Component
20 Jan 202524 minutes to read
The File Manager uses a flat data JSON as an array of objects for rendering, eliminating the need to define ajaxSettings url. To load a folder data as an array of objects, use the File Manager component’s fileSystemData property with a type of fileData interface. 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 File Manager’s action events.
Event Information
| 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 | DeleteEventArgs | path, itemData, cancel. | 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. |
Local data
The File Manager can be populated with local data that contains the array of fileData interface objects with parentId mapping.
To render the root-level folder, specify the parentId as null, or there is no need to specify the parentId in the array of fileData interface objects.
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { useEffect } from "react";
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';
/**
* File Manager flat data sample
*/
const FlatData = () => {
let permission = {
"copy": false,
"download": false,
"write": false,
"writeContents": false,
"read": true,
"upload": false,
"message": ""
};
let 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: null,
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: 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"
}
];
let resultData = [].slice.call(fileData);
return (<div>
<div className="control-section">
<FileManagerComponent id="flatdata" fileSystemData={resultData} toolbarSettings={{ items: ['NewFolder', 'Cut', 'Copy', 'Paste', 'Delete', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }} contextMenuSettings={{
file: ["Open", "|", "Cut", "Copy", "Paste", "Delete", "Rename", "|", "Details"], folder: ["Open", "|", "Cut", "Copy", "Paste", "|", "Delete", "Rename", "|", "Details"], layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], visible: true
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>
</div>);
};
export default FlatData;
const root = createRoot(document.getElementById('root'));
root.render(<FlatData />);import { createRoot } from 'react-dom/client';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { useEffect } from 'react';
import {
FileManagerComponent,
Inject,
NavigationPane,
DetailsView,
Toolbar,
Permission,
FileData,
} from '@syncfusion/ej2-react-filemanager';
function App() {
let permission: Permission = {
copy: false,
download: false,
write: false,
writeContents: false,
read: true,
upload: false,
message: '',
};
let fileData: 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: null,
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: 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',
},
];
let resultData: { [key: string]: Object }[] = [].slice.call(fileData) as {
[key: string]: Object;
}[];
return (
<div className="control-section">
<FileManagerComponent
id="flatdata"
fileSystemData={resultData}
toolbarSettings={{
items: [
'NewFolder',
'Cut',
'Copy',
'Paste',
'Delete',
'Rename',
'SortBy',
'Refresh',
'Selection',
'View',
'Details',
],
}}
contextMenuSettings={{
file: [
'Open',
'|',
'Cut',
'Copy',
'Paste',
'Delete',
'Rename',
'|',
'Details',
],
folder: [
'Open',
'|',
'Cut',
'Copy',
'Paste',
'|',
'Delete',
'Rename',
'|',
'Details',
],
layout: [
'SortBy',
'View',
'Refresh',
'|',
'Paste',
'|',
'NewFolder',
'|',
'Details',
'|',
'SelectAll',
],
visible: true,
}}
>
<Inject services={[NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
export default App;