React FileManager - Custom.Configuration

Function parameters:

file:

File

The file that is being uploaded.

uploadInfo:

UploadInfo

Information about the file upload session.

destinationDirectory:

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

Type:

Function parameters:

item:

The current file system item.

destinationDirectory:

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 parameters:

parentDirectory:

The parent directory where a new directory should be created.

name:

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:

|

deleteItem

A function that deletes a file or folder.

Type:

Function parameters:

item:

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 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 parameters:

parentDirectory:

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.

The getItems function returns data items and then passes them to the dataItem fields of the FileSystemItem objects. You can call the getItems method to get these file system items.

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 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 folder contains sub directories.

Type:

|

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:

|

keyExpr

Specifies the data field that provides keys.

Type:

|

moveItem

A function that moves files and folders.

Type:

Function parameters:

item:

The current file system item.

destinationDirectory:

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:

|

renameItem

A function that renames files and folders.

Type:

Function parameters:

item:

The current file system item.

newName:

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:

|

thumbnailExpr

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

Type:

|

The data field can contain one of the following:

The icon's URL
The icon's name if the icon is from the DevExtreme icon library
The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
The icon in the Base64 format

uploadFileChunk

A function that uploads a file in chunks.

Type:

Function parameters:

file:

File

The file that is being uploaded.

uploadInfo:

UploadInfo

Information about the file upload session.

destinationDirectory: