Object File System
The FileManager UI component provides the Object file system provider to manage files and directories in an in-memory array of JSON objects.
Create an Object file system provider and assign the array of hierarchical JSON objects to the provider's data property to bind the FileManager UI component to a hierarchical data structure.
The provider automatically binds data objects to the UI component if the data objects have default fields in their structure. For example:
- var fileSystem = [
- {
- name: "MyFile.jpg",
- size: 1024,
- dateModified: "2019/05/08",
- thumbnail: "/thumbnails/images/jpeg.ico",
- isDirectory: true,
- items: [
- // ...
- // Nested data objects with the same structure
- // ...
- ]
- },
- // ...
- ];
In the example below, the FileManager UI component displays hierarchical data stored in an in-memory array that contains fields with conventional names.
- <template>
- <DxFileManager
- :file-system-provider="fileItems">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import {
- DxFileManager
- } from 'devextreme-vue/file-manager';
- import { fileItems } from "./data.js";
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- fileItems
- };
- }
- };
- </script>
- 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
- }]
- }];
If the data source's field names differ from the standard field names mentioned above, use the [fieldName]Expr properties when you specify the file system item's name, size, and so on.
- <template>
- <DxFileManager
- :file-system-provider="objectFileProvider">
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import ObjectFileSystemProvider from 'devextreme/file_management/object_provider';
- import { fileItems } from './data.js';
- const objectFileProvider = new ObjectFileSystemProvider({
- data: fileItems,
- isDirectoryExpr: "isFolder",
- sizeExpr: "itemSize"
- });
- export default {
- components: {
- DxFileManager,
- ObjectFileSystemProvider
- },
- data() {
- return {
- objectFileProvider
- };
- }
- };
- </script>
- export const fileItems = [{
- 'name': 'Documents',
- 'isFolder': true,
- 'items': [{
- 'name': 'Projects',
- 'isFolder': true,
- 'items': [{
- 'name': 'About.rtf',
- 'isFolder': false,
- 'itemSize': 1024
- }, {
- 'name': 'Passwords.rtf',
- 'isFolder': false,
- 'itemSize': 2048
- }]
- }, {
- 'name': 'About.xml',
- 'isFolder': false,
- 'itemSize': 1024
- }]
- }];
Remote File System
The FileManager UI component provides the Remote file system provider to access files and directories located on the server.
Assign the Remote file system provider to the fileSystemProvider property to connect the UI component to a file system located on the server. The Remote file system provider exposes APIs to get the file system hierarchy and to manage items.
Set the endpointUrl property to the Url of an endpoint used to access and modify a file system.
You can also use helpers for ASP.NET Core and ASP.NET MVC to access different file systems on the server side according to the protocol the FileManager UI component uses. Refer to the online documentation and online demos to get more information about the helpers.
When a server receives data processing settings, it applies the settings to the dataset and sends back an object with the following structure:
- {
- "result": [
- {
- name: "animals",
- key: "10",
- size: 0,
- dateModified: "2019/05/08",
- thumbnail: "/thumbnails/images/folder.ico",
- isDirectory: true,
- hasSubDirectories: true
- },
- {
- name: "bear.jpg",
- key: "20",
- size: 42344,
- dateModified: "2019/05/08",
- thumbnail: "/thumbnails/images/jpeg.ico",
- isDirectory: false,
- hasSubDirectories: false
- },
- // ...
- ],
- "success": true,
- "errorCode": null,
- "errorText": ""
- }
The data object, which is sent back from the server, contains attributes that store the file system items' key, name, size, modification date and so on. If these attribute names differ from the conventional names, use the [fieldName]Expr properties to map item properties.
- <template>
- <DxFileManager
- :file-system-provider="remoteFileProvider">
- <!-- ... -->
- </DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
- const remoteFileProvider = new RemoteFileSystemProvider({
- endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts'
- });
- export default {
- components: {
- DxFileManager
- },
- data() {
- return {
- remoteFileProvider
- };
- }
- };
- </script>
Custom File System
Use the FileManager UI component's Custom file system provider to implement custom APIs to access and manage file systems. This provider allows you to handle each file operation manually. Use the custom provider when it's necessary to connect the UI component to an API service with a custom request or response format.
Assign the Custom file system provider to the fileSystemProvider property to implement a custom file system provider and bind the FileManager UI component to it. The getItems function allows you to get file system items. Use the [fieldName]Expr properties specify the attribute names that store file system item keys, names, sizes, modification dates, and etc. You can also use the 'copyItem', 'deleteItem', and other functions to handle file operations.
- <template>
- <DxFileManager :file-provider="customFileProvider"></DxFileManager>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxFileManager } from 'devextreme-vue/file-manager';
- import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
- // Creates a custom file system provider
- const customFileProvider = new CustomFileSystemProvider({
- // Function to get file system items
- getItems,
- // Functions to handle file operations
- createDirectory,
- deleteItem
- });
- export default {
- components: {
- DxFileManager,
- CustomFileSystemProvider
- },
- data() {
- return { customFileProvider };
- }
- };
- function getItems(pathInfo) {
- // ...
- }
- function createDirectory(parentDirectory, name) {
- // ...
- }
- function deleteItem(item) {
- // ...
- }
- </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.