Hierarchical JS Structure
Documentation
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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import FileManager, { Permissions } from 'devextreme-react/file-manager';
import { fileItems } from './data.js';
class App extends React.Component {
render() {
return (
<FileManager
height='450'
fileSystemProvider={fileItems}>
<Permissions
create={true}
copy={true}
move={true}
delete={true}
rename={true}
upload={true}
download={true}>
</Permissions>
</FileManager>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
<!DOCTYPE html>
<html>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx-gantt.min.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
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,
}];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'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@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.6/cjs',
'devextreme-react': 'npm:devextreme-react@22.2.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.72/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'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@7.4.11/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',
// 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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);