Your search did not match any results.
File Manager

Hierarchical JS Structure

Documentation

The FileManager widget can display a collection of hierarchical items that present a file system structure. The widget 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.

Copy to CodeSandBox
Apply
Reset
<template> <dx-file-manager :file-provider="fileItems" > <dx-permissions :create="true" :copy="true" :move="true" :remove="true" :rename="true" /> </dx-file-manager> </template> <script> import { DxFileManager, DxPermissions } from 'devextreme-vue/file-manager'; import { fileItems } from './data.js'; export default { components: { DxFileManager, DxPermissions }, data() { return { fileItems }; } }; </script>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx-gantt.css" /> <script src="https://unpkg.com/core-js@2.4.1/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> </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 }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-vue': 'npm:devextreme-vue@19.2', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });