DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

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
$(() => { $('#file-manager').dxFileManager({ name: 'fileManager', fileSystemProvider: fileSystem, height: 450, permissions: { create: true, copy: true, move: true, delete: true, rename: true, upload: true, download: true, }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="file-manager"></div> </div> </body> </html>
const fileSystem = [ { 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, }, ];