Angular File Manager - Hierarchical JS Structure

The FileManager component can display a collection of hierarchical items that present a file system structure. The component allows end users to easily upload and select files and to change folder structure (rename, move, copy and delete files and folders). File and folder management capabilities are fully customizable and can be switched off if necessary.

Backend API

<dx-file-manager id="fileManager" [fileSystemProvider]="fileItems" height="450"> <dxo-file-manager-permissions [create]="true" [copy]="true" [move]="true" [delete]="true" [rename]="true" [upload]="true" [download]="true" > </dxo-file-manager-permissions> </dx-file-manager>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxFileManagerModule } from 'devextreme-angular'; import { Service, FileItem } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ styleUrls: [`app/app.component.css`], selector: 'demo-app', templateUrl: './app.component.html', providers: [Service], preserveWhitespaces: true, imports: [ DxFileManagerModule, ], }) export class AppComponent { fileItems: FileItem[]; constructor(service: Service) { this.fileItems = service.getFileItems(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

import { Injectable } from '@angular/core'; export class FileItem { name: string; isDirectory: boolean; size?: number; items?: FileItem[]; } const fileItems: FileItem[] = [{ name: 'Documents', isDirectory: true, items: [{ name: 'Projects', isDirectory: true, items: [{ name: 'About.rtf', isDirectory: false, size: 1024, }, { name: 'Passwords.rtf', isDirectory: false, size: 2048, }], }, { name: 'About.xml', isDirectory: false, size: 1024, }, { name: 'Managers.rtf', isDirectory: false, size: 2048, }, { name: 'ToDo.txt', isDirectory: false, size: 3072, }], }, { name: 'Images', isDirectory: true, items: [{ name: 'logo.png', isDirectory: false, size: 20480, }, { name: 'banner.gif', isDirectory: false, size: 10240, }], }, { name: 'System', isDirectory: true, items: [{ name: 'Employees.txt', isDirectory: false, size: 3072, }, { name: 'PasswordList.txt', isDirectory: false, size: 5120, }], }, { name: 'Description.rtf', isDirectory: false, size: 1024, }, { name: 'Description.txt', isDirectory: false, size: 2048, }]; @Injectable() export class Service { getFileItems(): FileItem[] { return fileItems; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-gantt.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>