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"

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>

View Demo

Props

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 folders.
createDirectory()	Creates a directory.
deleteItems()	Deletes files or folders.
downloadItems()	Downloads files.
getItems()	Gets file system items.
getItemsContent()	Gets items content.
moveItems()	Moves files and folders.
renameItem()	Renames a file or folder.
uploadFileChunk()	Uploads a file in chunks.