All docs
V21.2
21.2
21.1
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
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.

FileSystemError

An object that contains information about the error.

import FileSystemError from "devextreme/file_management/error"


jQuery
index.js
const objectProvider = new DevExpress.fileManagement.ObjectFileSystemProvider({ data: fileSystem });
const keepExtensionsProvider = new DevExpress.fileManagement.CustomFileSystemProvider({
    getItems: function(item) {
        return objectProvider.getItems(item);
    },
    renameItem: function(item, newName) {
        return new Promise((resolve, reject) => {
            if(item.getFileExtension() !== getExtension(newName)) {
                // 1 - reject
                reject(new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension."));
                // 2 - throw
                // throw new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension.");
            } else {
                resolve(objectProvider.renameItem(item, newName));
            }
        });
    }
});
const getExtension = function(path) {
    const index = path.lastIndexOf(".");
    return index !== -1 ? path.substr(index) : "";
}

$("#file-manager").dxFileManager({ 
    fileSystemProvider: keepExtensionsProvider,
    permissions: { rename: true }
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-file-manager id="fileManager">
    [fileSystemProvider]="keepExtensionsProvider">
    <dxo-permissions rename="true">
    </dxo-permissions>
    <!-- ... -->
</dx-file-manager>
import { Component } from '@angular/core';
import ObjectFileSystemProvider from 'devextreme/file_management/object_provider';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
import FileSystemError from 'devextreme/file_management/error';
import { Service, FileItem } from "./app.service";

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

export class AppComponent {
    fileItems: FileItem[];
    objectProvider: ObjectFileSystemProvider;
    keepExtensionsProvider: CustomFileSystemProvider;

    constructor(service: Service) {
        this.fileItems = service.getFileItems();
        this.objectProvider = new ObjectFileSystemProvider({
            data: this.fileItems
        });
        this.keepExtensionsProvider = new CustomFileSystemProvider({
            getItems: (parentDir) => this.getItems(parentDir),
            renameItem: (item, newName) => this.renameItem(item, newName)
        });
    }      
    getItems(item) {
        return this.objectProvider.getItems(item);
    }
    renameItem(item, newName) {
        return new Promise<any>((resolve, reject) => {
        if(item.getFileExtension() !== this.getExtension(newName)) {
            // 1 - reject
            reject(new FileSystemError(5, item, "You cannot change the file extension."));
            // 2 - throw
            // throw new FileSystemError(5, item, "You cannot change the file extension.");
        } else {
            resolve(this.objectProvider.renameItem(item, newName));
        }
        });
    }
    getExtension(path) {
        const index = path.lastIndexOf(".");
        return index !== -1 ? path.substr(index) : "";
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileManagerModule } from "devextreme-angular";

@NgModule({
    imports: [
        // ...
        DxFileManagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxFileManager :file-system-provider="keepExtensionsProvider">
        <DxPermissions :rename="true" />
    </DxFileManager>
</template>

<script>
    import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
    import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
    import FileSystemError from "devextreme/file_management/error";
    import { DxFileManager, DxPermissions } from "devextreme-vue/file-manager";
    import { fileItems } from "./data.js";
    export default {
        components: {
            DxFileManager,
            DxPermissions,
        },
        data() {
            return {
                objectProvider: new ObjectFileSystemProvider({ data: fileItems }),
                keepExtensionsProvider: new CustomFileSystemProvider({
                    getItems: (parentDir) => this.getItems(parentDir),
                    renameItem: (item, newName) => this.renameItem(item, newName),
                }),
                };
            },
            methods: {
                getItems(parentDir) {
                    return this.objectProvider.getItems(parentDir);
                },
                renameItem(item, newName) {
                    return new Promise((resolve, reject) => {
                        if(item.getFileExtension() !== this.getExtension(newName)) {
                            // 1 - reject
                            reject(new FileSystemError(5, item, "You cannot change the file extension."));
                            // 2 - throw
                            // throw new FileSystemError(5, item, "You cannot change the file extension.");
                        } else {
                            resolve(this.objectProvider.renameItem(item, newName));
                        }
                    });
                },
            },
        },
    };
</script>
React
App.js
import React from "react";
import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
import FileSystemError from "devextreme/file_management/error";
import FileManager, { Permissions } from "devextreme-react/file-manager";
import { fileItems } from "./data.js";

import 'devextreme/dist/css/dx.light.css';

const objectProvider = new ObjectFileSystemProvider({
    data: fileItems
});

const keepExtensionsProvider = new CustomFileSystemProvider({
    getItems: (parentDir) => getItems(parentDir),
    renameItem: (item, newName) => renameItem(item, newName),
});

function getItems(parentDir) {
    return objectProvider.getItems(parentDir);
};

function renameItem(item, newName) {
    return new Promise((resolve, reject) => {
    if(item.getFileExtension() !== getExtension(newName)) {
        // 1 - reject
        reject(new FileSystemError(5, item, "You cannot change the file extension."));
        // 2 - throw
        // throw new FileSystemError(5, item, "You cannot change the file extension.");
    } else {
        resolve(objectProvider.renameItem(item, newName));
    }
    });
};

function getExtension(path) {
    const index = path.lastIndexOf(".");
    return index !== -1 ? path.substr(index) : "";
};

const App = () => {
    return (
        <FileManager 
            fileSystemProvider={keepExtensionsProvider}>
            <Permissions rename={true}></Permissions>
        </FileManager>
    );
};

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider
        .Custom()
        .GetItems("getItems")
        .RenameItem("renameItem"))
    .Permissions(permissions => permissions.Rename(true))
)
<script src="~/fileSystem.js"></script>
<script>
    const objectProvider = new DevExpress.fileManagement.ObjectFileSystemProvider({ data: fileSystem });

    function getItems(item) {
        return objectProvider.getItems(item);

    }
    function renameItem(item, newName) {
        return new Promise((resolve, reject) => {
            if(item.getFileExtension() !== getExtension(newName)) {
                // 1 - reject
                reject(new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension."));
                // 2 - throw
                // throw new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension.");
            } else {
                resolve(objectProvider.renameItem(item, newName));
            }
        });
    }
    function getExtension(path) {
        const index = path.lastIndexOf(".");
        return index !== -1 ? path.substr(index) : "";
    }

errorCode

The error code.

Type:

Number

The following error codes are supported:

  • NoAccess = 0
  • FileExists = 1
  • FileNotFound = 2
  • DirectoryExists = 3
  • DirectoryNotFound = 4
  • WrongFileExtension = 5
  • MaxFileSizeExceeded = 6
  • Other = 32767

errorText

The error message.

Type:

String

fileSystemItem

The processed file or directory.