React 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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React from 'react';
import FileManager, { Permissions } from 'devextreme-react/file-manager';import { fileItems } from './data.ts';​export default function App() {  return (    <FileManager      height='450'      fileSystemProvider={fileItems}>      <Permissions        create={true}        copy={true}        move={true}        delete={true}        rename={true}        upload={true}        download={true}>      </Permissions>    </FileManager>  );}​

xxxxxxxxxx
 
import React from 'react';
import FileManager, { Permissions } from 'devextreme-react/file-manager';import { fileItems } from './data.js';​export default function App() {  return (    <FileManager      height="450"      fileSystemProvider={fileItems}    >      <Permissions        create={true}        copy={true}        move={true}        delete={true}        rename={true}        upload={true}        download={true}      ></Permissions>    </FileManager>  );}​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
export const fileItems = [{
  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,}];​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
export const fileItems = [
  {    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,  },];​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx