$(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>

Options

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 folders.
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 folder.
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 folder 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 folders.
nameExpr	Specifies which data field provides file and directory names.
renameItem	A function that renames files and folders.
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 folders.
createDirectory()	Creates a directory.
deleteItems()	Deletes files or folders.
downloadItems()	Downloads files.
getItems()	Gets file system items.
getItemsContent()	Gets items content.
moveItems()	Moves files and folders.
renameItem()	Renames a file or folder.
uploadFileChunk()	Uploads a file in chunks.

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery FileManager - Custom

jQuery

Angular

Vue

React

ASP.NET MVC Controls

ASP.NET Core Controls

Options

Methods