Assign the array to the data property. Data object fields should have conventional names listed in the data description. Otherwise, specify [fieldName]Expr properties: nameExpr, sizeExpr, dateModifiedExpr, and so on.

The following code shows how to bind the FileManager to the Object file system provider:

jQuery

index.js

data.js

$(function() {
    $("#file-manager").dxFileManager({            
        fileSystemProvider: fileSystem,
        // ...
    });
});

var 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
    }]
}];

Angular

app.component.html

app.component.ts

app.module.ts

<dx-file-manager id="fileManager"
    [fileSystemProvider]="fileItems">
</dx-file-manager>

import { Component } from '@angular/core';
import ObjectFileSystemProvider from 'devextreme/file_management/object_provider'; 

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    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
        }]
    }];    
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileManagerModule
    ],
    //...
})
export class AppModule { }

Vue

App.vue

data.js

<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
    }]
}];

React

App.js

data.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import FileManager from 'devextreme-react/file-manager';
import ObjectFileSystemProvider from 'devextreme/file_management/object_provider';

class App extends React.Component {
    render() {
        return (
            <FileManager fileSystemProvider={fileItems}>
            </FileManager>
        );
    }
}
export default App;

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
    }]
}];

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
)

<script src="~/data/fileSystem.js"></script>

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
)

<script src="~/data/fileSystem.js"></script>

Options

This section describes properties that configure the Object file system provider.

Name	Description
contentExpr	Specifies which data field provides information about files content.
data	Specifies an array of data objects that represent files and directories.
dateModifiedExpr	Specifies which data field provides timestamps that indicate when a file was last modified.
isDirectoryExpr	Specifies which data field provides information about whether a file system item is a directory.
itemsExpr	Specifies which data field provides information about nested files and directories.
keyExpr	Specifies the data field that provides keys.
nameExpr	Specifies which data field provides file and directory names.
sizeExpr	Specifies which data field provides file sizes.
thumbnailExpr	Specifies which data field provides icons to be used as thumbnails.

Methods

This section describes members used to manage file system items.

Name	Description
abortFileUpload()	Cancels the file upload.
copyItems()	Copies files or directories.
createDirectory()	Creates a directory.
deleteItems()	Deletes files or directories.
downloadItems()	Downloads files.
getItems()	Gets file system items.
getItemsContent()	Gets items content.
moveItems()	Moves files and directories.
renameItem()	Renames a file or directory.
uploadFileChunk()	Uploads a file in chunks.

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery FileManager - Object

jQuery

Angular

Vue

React

ASP.NET MVC Controls

ASP.NET Core Controls

Options

Methods