Rendering Flat JSON Data in the Vue File Manager Component

19 Feb 202518 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 FileManager’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	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 is triggered for each character entered in the search 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 FileManager 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.

Composition API (~/src/App.vue)

<template>
  <div>
    <div class="control-section">
      <div class="sample-container">
        <ejs-filemanager
          id="flat_data"
          :toolbarSettings="toolbarSettings"
          :contextMenuSettings="contextMenuSettings"
          :fileSystemData="fileSystemData"
        >
        </ejs-filemanager>
      </div>
    </div>
  </div>
</template>
<script>
import {
  FileManagerComponent,
  NavigationPane,
  Toolbar,
  DetailsView,
  Permission,
  FileData,
} from '@syncfusion/ej2-vue-filemanager';

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',
  },
];

export default {
  components: {
    'ejs-filemanager': FileManagerComponent,
  },
  data: function () {
    return {
      fileSystemData: fileData,
      toolbarSettings: {
        items: [
          'NewFolder',
          'Cut',
          'Copy',
          'Paste',
          'Delete',
          'Rename',
          'SortBy',
          'Refresh',
          'Selection',
          'View',
          'Details',
        ],
        visible: true,
      },
      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,
      },
    };
  },
  provide: {
    filemanager: [NavigationPane, DetailsView, Toolbar],
  },
};
</script>