JavaScript/jQuery FileManager File System Providers

File system providers are components that provide APIs used to access and modify virtual file systems. This section describes file system providers supported by the FileManager.

Custom

A custom file system provider allows you to implement custom APIs to access and use file systems.

import CustomFileSystemProvider from "devextreme/file_management/custom_provider"

Use the custom provider's methods to handle file operations (add, delete, rename, and so on).

The following code shows how to create a custom file system provider and bind the FileManager UI component to it:

jQuery
index.js
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            getItems: function(pathInfo) { 
                // Your code goes here
            }, 
            renameItem: function(item, name) { 
                // Your code goes here
            }, 
            createDirectory: function(parentDir, name) { 
                // Your code goes here
            }, 
            deleteItem: function(item) { 
                // Your code goes here
            }, 
            // ...
        }) 
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager 
    [fileSystemProvider]="fileSystemProvider">
</dx-file-manager>
import { Component } from '@angular/core';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider'; 

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

export class AppComponent {
    fileSystemProvider: CustomFileSystemProvider;
    constructor(http: HttpClient) {
        this.fileSystemProvider = new CustomFileSystemProvider({
            getItems,
            createDirectory,
            renameItem,
            deleteItem,
            // ...
        });
    }
}

function getItems(parentDirectory) {
    // ...
}
// other functions
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
<template>
    <DxFileManager
        :file-system-provider="fileSystemProvider">
    </DxFileManager>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import { DxFileManager } from 'devextreme-vue/file-manager';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';

export default {
    components: {
        DxFileManager
    },

    data() {
        return {
            fileSystemProvider: new CustomFileSystemProvider({
                getItems,
                createDirectory,
                renameItem,
                deleteItem,
                // ...
            }),
        };
    }
};

function getItems(parentDirectory) {
    // ...
}
// other functions

</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import FileManager from 'devextreme-react/file-manager';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';

class App extends React.Component {
    render() {
        constructor() {
            super();
            this.fileSystemProvider = new CustomFileSystemProvider({
                getItems,
                createDirectory,
                renameItem,
                deleteItem,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function getItems(parentDirectory) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItems("getItems")
        .CreateDirectory("createDirectory")
        .RenameItem("renameItem")
        .DeleteItem("deleteItem")
        // ...
    )    
)

<script>
    function getItems(parentDirectory) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItems("getItems")
        .CreateDirectory("createDirectory")
        .RenameItem("renameItem")
        .DeleteItem("deleteItem")
        // ...
    )    
)

<script>
    function getItems(parentDirectory) {
        // ...
    }
    // other functions
</script>

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,
        // ...
    });
});
const 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.fluent.blue.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.fluent.blue.light.css';
import FileManager from 'devextreme-react/file-manager';
import { fileItems } from './data.js';

export default function App() {
    return (
        <FileManager fileSystemProvider={fileItems}>
        </FileManager>
    );
}
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#
data.js
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
)

<script src="~/data/fileSystem.js"></script>
const 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
    }]
}];
ASP.NET Core Controls
Razor C#
data.js
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
)

<script src="~/data/fileSystem.js"></script>
const 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
    }]
}];

Remote

The Remote file system provider works with a file system located on the server.

import RemoteFileSystemProvider from "devextreme/file_management/remote_provider"

View on GitHub

Set the endpointUrl property to specify the endpoint used to access and modify the file system.

The server should return data objects of the following structure:

Code
{
    name: "MyFile.jpg",
    size: 1024,
    dateModified: "2019/05/08",
    thumbnail: "/thumbnails/images/jpeg.ico",
    isDirectory: true,
    hasSubDirectories: true
}

Fields in this structure have predefined names that FileManager uses in the default configuration. To use custom field names, configure [fieldName]Expr properties such as the following:

The following code snippet binds the FileManager to a RemoteFileSystemProvider:

jQuery
index.js
$("#file-manager").dxFileManager({            
    fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({
        endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
    }),
    // ...
});
Angular
app.component.html
app.component.ts
<dx-file-manager id="fileManager"
    [fileSystemProvider]="remoteFileProvider"
></dx-file-manager>
import { Component } from '@angular/core';
import { DxFileManagerModule } from 'devextreme-angular';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';

@Component({
    imports: [DxFileManagerModule], // ...
})
export class AppComponent {
    remoteFileProvider: RemoteFileSystemProvider;

    constructor() {
        this.remoteFileProvider = new RemoteFileSystemProvider({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
        });
    }
}
Vue
App.vue
<template>
    <DxFileManager
        :file-system-provider="remoteFileProvider"
    />
</template>

<script setup lang="ts">
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'
});
</script>
React
App.tsx
import React from 'react';
import { FileManager } from 'devextreme-react/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 function App() {
    return (
        <FileManager 
            fileSystemProvider={remoteFileProvider}
        />
    );
}
ASP.NET MVC Controls
Razor C#
FileSystemApiController.cs
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Remote()
        .Url(Url.RouteUrl("FileManagementFileSystemApi")))
)
[Route("api/file-manager-file-system", Name = "FileManagementFileSystemApi")]
public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        Request = Request,
        FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"),
        // ...
    };
    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);
    return result.GetClientCommandResult();
}
ASP.NET Core Controls
Razor C#
FileSystemApiController.cs
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Remote()
        .Url(Url.RouteUrl("FileManagementFileSystemApi")))
)
[Route("api/file-manager-file-system", Name = "FileManagementFileSystemApi")]
public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        Request = Request,
        FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"),
        // ...
    };
    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);
    return result.GetClientCommandResult();
}

On the server, process file management requests. DevExtreme includes request-processing helpers for ASP.NET MVC and ASP.NET Core. For an implementation example, enable the Backend API toggle in the following demo and review FileManagerScriptsApiController.cs:

View Demo

You can also use remote file system providers with other DevExtreme components. The following example integrates RemoteFileSystemProvider with the DevExtreme TreeList:

View on GitHub