All docs
V21.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery/JS Common - Object Structures - FileSystemError

An object that contains information about the error.

import FileSystemError from "devextreme/file_management/error"

jQuery
index.js
fileSystem.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 }
});
var fileSystem = [
    {
        name: "Documents",
        isDirectory: true,
        items: [
            {
                name: "Projects",
                isDirectory: true,
                items: [
                    {
                        name: "About.rtf",
                        isDirectory: false,
                        size: 1024
                    },
                    {
                        name: "Passwords.rtf",
                        isDirectory: false,
                        size: 2048
                    }
                ]
            },
            {
                name: "About.xml",
                isDirectory: false,
                size: 1024
            },
            {
                name: "Managers.rtf",
                isDirectory: false,
                size: 2048
            },
            {
                name: "ToDo.txt",
                isDirectory: false,
                size: 3072
            }
        ],
    },
    {
        name: "Images",
        isDirectory: true,
        items: [
            {
                name: "logo.png",
                isDirectory: false,
                size: 20480
            },
            {
                name: "banner.gif",
                isDirectory: false,
                size: 10240
            }
        ]
    },
    {
        name: "System",
        isDirectory: true,
        items: [
            {
                name: "Employees.txt",
                isDirectory: false,
                size: 3072
            },
            {
                name: "PasswordList.txt",
                isDirectory: false,
                size: 5120
            }
        ]
    },
    {
        name: "Description.rtf",
        isDirectory: false,
        size: 1024
    },
    {
        name: "Description.txt",
        isDirectory: false,
        size: 2048
    }
];
Angular
app.component.html
app.component.ts
app.module.ts
app.service.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 { }
import { Injectable } from '@angular/core';

export class FileItem {
    name: string;
    isDirectory: boolean;
    size?: number;
    items?: FileItem[];
}

let fileItems: FileItem[] = [{
    'name': 'Documents',
    'isDirectory': true,
    'items': [{
        'name': 'Projects',
        'isDirectory': true,
        'items': [{
            'name': 'About.rtf',
            'isDirectory': false,
            'size': 1024
        }, {
            'name': 'Passwords.rtf',
            'isDirectory': false,
            'size': 2048
        }]
    }, {
        'name': 'About.xml',
        'isDirectory': false,
        'size': 1024
    }, {
        'name': 'Managers.rtf',
        'isDirectory': false,
        'size': 2048
    }, {
        'name': 'ToDo.txt',
        'isDirectory': false,
        'size': 3072
    }],
}, {
    'name': 'Images',
    'isDirectory': true,
    'items': [{
        'name': 'logo.png',
        'isDirectory': false,
        'size': 20480
    }, {
        'name': 'banner.gif',
        'isDirectory': false,
        'size': 10240
    }]
}, {
    'name': 'System',
    'isDirectory': true,
    'items': [{
        'name': 'Employees.txt',
        'isDirectory': false,
        'size': 3072
    }, {
        'name': 'PasswordList.txt',
        'isDirectory': false,
        'size': 5120
    }]
}, {
    'name': 'Description.rtf',
    'isDirectory': false,
    'size': 1024
}, {
    'name': 'Description.txt',
    'isDirectory': false,
    'size': 2048
}];

@Injectable()
export class Service {
    getFileItems(): FileItem[] {
        return fileItems;
    }
}
Vue
App.vue
data.js
<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>
export const fileItems = [{
  'name': 'Documents',
  'isDirectory': true,
  'items': [{
    'name': 'Projects',
    'isDirectory': true,
    'items': [{
      'name': 'About.rtf',
      'isDirectory': false,
      'size': 1024
    }, {
      'name': 'Passwords.rtf',
      'isDirectory': false,
      'size': 2048
    }]
  }, {
    'name': 'About.xml',
    'isDirectory': false,
    'size': 1024
  }, {
    'name': 'Managers.rtf',
    'isDirectory': false,
    'size': 2048
  }, {
    'name': 'ToDo.txt',
    'isDirectory': false,
    'size': 3072
  }],
}, {
  'name': 'Images',
  'isDirectory': true,
  'items': [{
    'name': 'logo.png',
    'isDirectory': false,
    'size': 20480
  }, {
    'name': 'banner.gif',
    'isDirectory': false,
    'size': 10240
  }]
}, {
  'name': 'System',
  'isDirectory': true,
  'items': [{
    'name': 'Employees.txt',
    'isDirectory': false,
    'size': 3072
  }, {
    'name': 'PasswordList.txt',
    'isDirectory': false,
    'size': 5120
  }]
}, {
  'name': 'Description.rtf',
  'isDirectory': false,
  'size': 1024
}, {
  'name': 'Description.txt',
  'isDirectory': false,
  'size': 2048
}];
React
App.js
data.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;
export const fileItems = [{
  'name': 'Documents',
  'isDirectory': true,
  'items': [{
    'name': 'Projects',
    'isDirectory': true,
    'items': [{
      'name': 'About.rtf',
      'isDirectory': false,
      'size': 1024
    }, {
      'name': 'Passwords.rtf',
      'isDirectory': false,
      'size': 2048
    }]
  }, {
    'name': 'About.xml',
    'isDirectory': false,
    'size': 1024
  }, {
    'name': 'Managers.rtf',
    'isDirectory': false,
    'size': 2048
  }, {
    'name': 'ToDo.txt',
    'isDirectory': false,
    'size': 3072
  }],
}, {
  'name': 'Images',
  'isDirectory': true,
  'items': [{
    'name': 'logo.png',
    'isDirectory': false,
    'size': 20480
  }, {
    'name': 'banner.gif',
    'isDirectory': false,
    'size': 10240
  }]
}, {
  'name': 'System',
  'isDirectory': true,
  'items': [{
    'name': 'Employees.txt',
    'isDirectory': false,
    'size': 3072
  }, {
    'name': 'PasswordList.txt',
    'isDirectory': false,
    'size': 5120
  }]
}, {
  'name': 'Description.rtf',
  'isDirectory': false,
  'size': 1024
}, {
  'name': 'Description.txt',
  'isDirectory': false,
  'size': 2048
}];
ASP.NET MVC Controls
Razor C#
fileSystem.js
@(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) : "";
    }
</script>
var fileSystem = [
    {
        name: "Documents",
        isDirectory: true,
        category: "Work",
        items: [
            {
                name: "Projects",
                isDirectory: true,
                category: "Work",
                items: [
                    {
                        name: "About.rtf",
                        isDirectory: false,
                        size: 1024
                    },
                    {
                        name: "Passwords.rtf",
                        isDirectory: false,
                        category: "Important",
                        size: 2048
                    }
                ]
            },
            {
                name: "About.xml",
                isDirectory: false,
                size: 1024
            },
            {
                name: "Managers.rtf",
                isDirectory: false,
                size: 2048
            },
            {
                name: "ToDo.txt",
                isDirectory: false,
                size: 3072
            }
        ],
    },
    {
        name: "Images",
        isDirectory: true,
        category: "Home",
        items: [
            {
                name: "logo.png",
                isDirectory: false,
                size: 20480
            },
            {
                name: "banner.gif",
                isDirectory: false,
                size: 10240
            }
        ]
    },
    {
        name: "System",
        isDirectory: true,
        category: "Important",
        items: [
            {
                name: "Employees.txt",
                isDirectory: false,
                category: "Important",
                size: 3072
            },
            {
                name: "PasswordList.txt",
                isDirectory: false,
                category: "Important",
                size: 5120
            }
        ]
    },
    {
        name: "Description.rtf",
        isDirectory: false,
        size: 1024
    },
    {
        name: "Description.txt",
        isDirectory: false,
        size: 2048
    }
];

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.