React FileManager - Object

The Object file system provider works with a file system represented by an in-memory array of JSON objects.

import ObjectFileSystemProvider from "devextreme/file_management/object_provider"

View on GitHub

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>

Configuration

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.