All docs
V21.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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.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.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>

Configuration

This section describes properties that configure a custom file system provider.

Name Description
abortFileUpload

A function that cancels the file upload.

copyItem

A function that copies files or directories.

createDirectory

A function that creates a directory.

dateModifiedExpr

Specifies which data field provides timestamps that indicate when a file was last modified.

deleteItem

A function that deletes a file or directory.

downloadItems

A function that downloads files.

getItems

A function that gets file system items.

getItemsContent

A function that get items content.

hasSubDirectoriesExpr

A function or the name of a data source field that provides information on whether a file or directory contains sub directories.

isDirectoryExpr

Specifies which data field provides information about whether a file system item is a directory.

keyExpr

Specifies the data field that provides keys.

moveItem

A function that moves files and directories.

nameExpr

Specifies which data field provides file and directory names.

renameItem

A function that renames files and directories.

sizeExpr

Specifies which data field provides file sizes.

thumbnailExpr

Specifies which data field provides icons to be used as thumbnails.

uploadFileChunk

A function that uploads a file in chunks.

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.