React FileManager - Custom.Configuration

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

abortFileUpload

A function that cancels the file upload.

Type:

Function

Function parameters:
file:

File

The file that is being uploaded.

uploadInfo:

UploadInfo

Information about the file upload session.

destinationDirectory:

FileSystemItem

The directory where a file system item is uploaded to.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after the file upload in aborted. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({             
            abortFileUpload: function(fileData, chunksInfo, destinationDir) { 
                // 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({
            abortFileUpload,
            // ...
        });
    }
}

function abortFileUpload(fileData, chunksInfo, destinationDir) {
    // ...
}
// 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({
                abortFileUpload,
                // ...
            }),
        };
    }
};

function abortFileUpload(fileData, chunksInfo, destinationDir) {
    // ...
}
// 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({
                abortFileUpload,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function abortFileUpload(fileData, chunksInfo, destinationDir) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .AbortFileUpload("abortFileUpload")
        // ...
    )    
)

<script>
    function abortfileUpload(fileData, chunksInfo, destinationDir) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .AbortFileUpload("abortFileUpload")
        // ...
    )    
)

<script>
    function abortfileUpload(fileData, chunksInfo, destinationDir) {
        // ...
    }
    // other functions
</script>

copyItem

A function that copies files or directories.

Type:

Function

Function parameters:
item:

FileSystemItem

The current file system item.

destinationDirectory:

FileSystemItem

The directory where a file system item is copied to.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after the file system item is copied. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            copyItem: function(item, destinationDir) { 
                // 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({
            copyItem,
            // ...
        });
    }
}

function copyItem(item, destinationDir) {
    // ...
}
// 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({
                copyItem,
                // ...
            }),
        };
    }
};

function copyItem(item, destinationDir) {
    // ...
}
// 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({
                copyItem,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function copyItem(item, destinationDir) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .CopyItem("copyItem")
        // ...
    )    
)

<script>
    function copyItem(item, destinationDir) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .CopyItem("copyItem")
        // ...
    )    
)

<script>
    function copyItem(item, destinationDir) {
        // ...
    }
    // other functions
</script>

createDirectory

A function that creates a directory.

Type:

Function

Function parameters:
parentDirectory:

FileSystemItem

The parent directory where a new directory should be created.

name:

String

The name of the new directory.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after a new directory is created. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            createDirectory: function(parentDir, name) { 
                // 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({
            createDirectory,
            // ...
        });
    }
}

function createDirectory(parentDir, name) {
    // ...
}
// 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({
                createDirectory,
                // ...
            }),
        };
    }
};

function createDirectory(parentDir, name) {
    // ...
}
// 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({
                createDirectory,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function createDirectory(parentDir, name) {
    // ...
}
// other functions

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

<script>
    function createDirectory(parentDir, name) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .CreateDirectory("createDirectory")
        // ...
    )    
)

<script>
    function createDirectory(parentDir, name) {
        // ...
    }
    // other functions
</script>

dateModifiedExpr

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

Type:

String

|

Function

deleteItem

A function that deletes a file or directory.

Type:

Function

Function parameters:
item:

FileSystemItem

The current file system item.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after a file system item is deleted. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            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({
            deleteItem,
            // ...
        });
    }
}

function deleteItem(item) {
    // ...
}
// 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({
                deleteItem,
                // ...
            }),
        };
    }
};

function deleteItem(item) {
    // ...
}
// 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({
                deleteItem,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function deleteItem(item) {
    // ...
}
// other functions

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

<script>
    function deleteItem(item) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .DeleteItem("deleteItem")
        // ...
    )    
)

<script>
    function deleteItem(item) {
        // ...
    }
    // other functions
</script>

downloadItems

A function that downloads files.

Type:

Function

Function parameters:
items:

Array<FileSystemItem>

The file system items.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            downloadItems: function(Array<FileManagerItem>) { 
                // 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({
            downloadItems,
            // ...
        });
    }
}

function downloadItems(Array<FileManagerItem>) {
    // ...
}
// 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({
                downloadItems,
                // ...
            }),
        };
    }
};

function downloadItems(Array<FileManagerItem>) {
    // ...
}
// 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({
                downloadItems,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function downloadItems(Array<FileManagerItem>) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .DownloadItems("downloadItems")
        // ...
    )    
)

<script>
    function downloadItems(Array<FileManagerItem>) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .DownloadItems("downloadItems")
        // ...
    )    
)

<script>
    function downloadItems(Array<FileManagerItem>) {
        // ...
    }
    // other functions
</script>

getItems

A function that gets file system items.

Type:

Function

Function parameters:
parentDirectory:

FileSystemItem

The directory that stores file system items.

Return Value:

Promise<Array<Object>> (jQuery or native)

|

Array<Object>

A Promise that is resolved after file system items are obtained. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            getItems: function(pathInfo) { 
                // 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,
            // ...
        });
    }
}

function getItems(pathInfo) {
    // ...
}
// 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,
                // ...
            }),
        };
    }
};

function getItems(pathInfo) {
    // ...
}
// 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,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function getItems(pathInfo) {
    // ...
}
// other functions

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

<script>
    function getItems(pathInfo) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItems("getItems")
        // ...
    )    
)

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

getItemsContent

A function that get items content.

Type:

Function

Function parameters:
items:

Array<FileSystemItem>

The file system items.

Return Value:

Promise<Object> (jQuery or native)

|

Object

A Promise that is resolved after the content of the file system items is obtained. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            getItemsContent: function(pathInfo) { 
                // 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({
            getItemsContent,
            // ...
        });
    }
}

function getItemsContent(pathInfo) {
    // ...
}
// 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({
                getItemsContent,
                // ...
            }),
        };
    }
};

function getItemsContent(pathInfo) {
    // ...
}
// 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({
                getItemsContent,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function getItemsContent(pathInfo) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItemsContent("getItemsContent")
        // ...
    )    
)

<script>
    function getItemsContent(pathInfo) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItemsContent("getItemsContent")
        // ...
    )    
)

<script>
    function getItemsContent(pathInfo) {
        // ...
    }
    // other functions
</script>

hasSubDirectoriesExpr

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

Type:

String

|

Function

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            hasSubDirectoriesExpr: "hasDirectories"
            //...
        }) 
    });     
});
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({
            hasSubDirectoriesExpr: "hasSubDirectories",
            // ...
        });
    }
}
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({
                hasSubDirectoriesExpr: "hasSubDirectoriesExpr",
            }),
        };
    }
};
</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({
                hasSubDirectoriesExpr: "hasSubDirectoriesExpr",
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .HasSubDirectoriesExpr("hasSubDirectoriesExpr")
        // ...
    )    
)
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .HasSubDirectoriesExpr("hasSubDirectoriesExpr")
        // ...
    )    
)

isDirectoryExpr

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

Type:

String

|

Function

keyExpr

Specifies the data field that provides keys.

Type:

String

|

Function

moveItem

A function that moves files and directories.

Type:

Function

Function parameters:
item:

FileSystemItem

The current file system item.

destinationDirectory:

FileSystemItem

The directory where a file system item is moved to.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after the file system item is moved. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            moveItem: function(item, destinationDir) { 
                // 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({
            moveItem,
            // ...
        });
    }
}

function moveItem(item, destinationDir) {
    // ...
}
// 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({
                moveItem,
                // ...
            }),
        };
    }
};

function moveItem(item, destinationDir) {
    // ...
}
// 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({
                moveItem,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function moveItem(item, destinationDir) {
    // ...
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .MoveItem("moveItem")
        // ...
    )    
)

<script>
    function moveItem(item, destinationDir) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .MoveItem("moveItem")
        // ...
    )    
)

<script>
    function moveItem(item, destinationDir) {
        // ...
    }
    // other functions
</script>

nameExpr

Specifies which data field provides file and directory names.

Type:

String

|

Function

renameItem

A function that renames files and directories.

Type:

Function

Function parameters:
item:

FileSystemItem

The current file system item.

newName:

String

The new name for the file system item.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after the file system item is renamed. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ 
            renameItem: function(item, name) { 
                // 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({
            renameItem,
            // ...
        });
    }
}

function renameItem(item, name) {
    // ...
}
// 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({
                renameItem,
                // ...
            }),
        };
    }
};

function renameItem(item, name) {
    // ...
}
// 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({
                renameItem,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function renameItem(item, name) {
    // ...
}
// other functions

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

<script>
    function renameItem(item, name) {
        // ...
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .RenameItem("renameItem")
        // ...
    )    
)

<script>
    function renameItem(item, name) {
        // ...
    }
    // other functions
</script>

sizeExpr

Specifies which data field provides file sizes.

Type:

String

|

Function

thumbnailExpr

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

Type:

String

|

Function

The data field can contain one of the following:

uploadFileChunk

A function that uploads a file in chunks.

Type:

Function

Function parameters:
file:

File

The file that is being uploaded.

uploadInfo:

UploadInfo

Information about the file upload session.

destinationDirectory:

FileSystemItem

The directory where a file system item is uploaded to.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after the file system item is uploaded. It is a native Promise or a jQuery.Promise when you use jQuery.

View Demo

jQuery
JavaScript
   
$(function () {
    $("#file-manager").dxFileManager({ 
        fileSystemProvider: provider, 
    });
});

const endpointUrl = 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-access';
gateway = new AzureGateway(endpointUrl, onRequestExecuted);
azure = new AzureFileSystem(gateway);

const provider = new DevExpress.fileManagement.CustomFileSystemProvider({
    uploadFileChunk,
    //...
});    

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
    let deferred = null;
    ​
    if (uploadInfo.chunkIndex === 0) {
        const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name;
        deferred = gateway.getUploadAccessUrl(filePath).done((accessUrl) => {
        uploadInfo.customData.accessUrl = accessUrl;
        });
    } else {
        deferred = $.Deferred().resolve().promise();
    }
    ​
    deferred = deferred.then(() => gateway.putBlock(
        uploadInfo.customData.accessUrl,
        uploadInfo.chunkIndex,
        uploadInfo.chunkBlob,
    ));
    ​
    if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
        deferred = deferred.then(() => gateway.putBlockList(
            uploadInfo.customData.accessUrl,
            uploadInfo.chunkCount,
        ));
    }
    ​
    return deferred.promise();
}
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) {
        const endpointUrl = 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-access';
        gateway = new AzureGateway(endpointUrl, this.onRequestExecuted.bind(this));            

        this.fileSystemProvider = new CustomFileSystemProvider({
            uploadFileChunk,
            // ...
        });
    }
}

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
let promise = null;

if (uploadInfo.chunkIndex === 0) {
    const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name;
    promise = gateway.getUploadAccessUrl(filePath).done((accessUrl) => {
        uploadInfo.customData.accessUrl = accessUrl;
    });
} else {
    promise = Promise.resolve();
}

promise = promise.then(() => gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob));

if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
    promise = promise.then(() => gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount));
}

return promise;
}
// 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({
                uploadFileChunk,
                // ...
            }),
        };
    },
    created() {
        gateway = new AzureGateway(endpointUrl, onRequestExecuted);
        azure = new AzureFileSystem(gateway);
    },
};

function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
    let promise = null;

    if (uploadInfo.chunkIndex === 0) {
        const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name;
        promise = gateway.getUploadAccessUrl(filePath).done((accessUrl) => {
            uploadInfo.customData.accessUrl = accessUrl;
        });
    } else {
        promise = Promise.resolve();
    }

    promise = promise.then(() => gateway.putBlock(
        uploadInfo.customData.accessUrl,
        uploadInfo.chunkIndex,
        uploadInfo.chunkBlob,
    ));

    if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
        promise = promise.then(() => gateway.putBlockList(
            uploadInfo.customData.accessUrl,
            uploadInfo.chunkCount,
        ));
    }
    return promise;
}
// 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();
            gateway = new AzureGateway(endpointUrl, this.onRequestExecuted);
            azure = new AzureFileSystem(gateway);
            this.fileSystemProvider = new CustomFileSystemProvider({
                uploadFileChunk,
                // ...
            });
        }
        return (
            <FileManager 
                fileSystemProvider={fileSystemProvider}>
            </FileManager>
        );
    }
}
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
    let promise = null;

    if (uploadInfo.chunkIndex === 0) {
        const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name;
        promise = gateway.getUploadAccessUrl(filePath).done((accessUrl) => {
            uploadInfo.customData.accessUrl = accessUrl;
        });
    } else {
        promise = Promise.resolve();
    }

    promise = promise.then(() => gateway.putBlock(
        uploadInfo.customData.accessUrl,
        uploadInfo.chunkIndex,
        uploadInfo.chunkBlob,
    ));

    if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
        promise = promise.then(() => gateway.putBlockList(
            uploadInfo.customData.accessUrl,
            uploadInfo.chunkCount,
        ));
    }

    return promise;
}
// other functions

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .UploadFileChunk("uploadFileChunk")
        // ...
    )    
)

<script>
    var endpointUrl = '@Url.RouteUrl("FileManagerAzureAccessApi")';
    var gateway = new AzureGateway(endpointUrl, onRequestExecuted);
    var azure = new AzureFileSystem(gateway);

    function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
        var deferred = null;

        if(uploadInfo.chunkIndex === 0) {
            var filePath = destinationDirectory.path ? destinationDirectory.path + "/" + fileData.name : fileData.name;
            deferred = gateway.getUploadAccessUrl(filePath).done(function(accessUrl) {
                uploadInfo.customData.accessUrl = accessUrl;
            });
        } else {
            deferred = $.Deferred().resolve().promise();
        }

        deferred = deferred.then(function() {
            return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob);
        });

        if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
            deferred = deferred.then(function() {
                return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount);
            });
        }

        return deferred.promise();
    }
    // other functions
</script>
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .UploadFileChunk("uploadFileChunk")
        // ...
    )    
)

<script>
    var endpointUrl = '@Url.RouteUrl("FileManagerAzureAccessApi")';
    var gateway = new AzureGateway(endpointUrl, onRequestExecuted);
    var azure = new AzureFileSystem(gateway);

    function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
        var deferred = null;

        if(uploadInfo.chunkIndex === 0) {
            var filePath = destinationDirectory.path ? destinationDirectory.path + "/" + fileData.name : fileData.name;
            deferred = gateway.getUploadAccessUrl(filePath).done(function(accessUrl) {
                uploadInfo.customData.accessUrl = accessUrl;
            });
        } else {
            deferred = $.Deferred().resolve().promise();
        }

        deferred = deferred.then(function() {
            return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob);
        });

        if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
            deferred = deferred.then(function() {
                return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount);
            });
        }

        return deferred.promise();
    }
    // other functions
</script>