React FileManager - Custom.Configuration
abortFileUpload
A Promise that is resolved after the file upload in aborted. It is a native Promise or a jQuery.Promise when you use jQuery.
- 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;
copyItem
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.
- 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;
createDirectory
A Promise that is resolved after a new directory is created. It is a native Promise or a jQuery.Promise when you use jQuery.
- 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;
deleteItem
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.
- 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;
downloadItems
- 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;
getItems
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.
- 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;
getItemsContent
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.
- 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;
hasSubDirectoriesExpr
A function or the name of a data source field that provides information on whether a file or folder contains sub directories.
- 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;
moveItem
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.
- 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;
renameItem
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.
- 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;
thumbnailExpr
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 Promise that is resolved after the file system item is uploaded. It is a native Promise or a jQuery.Promise when you use jQuery.
- 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({
- uploadFileChunk,
- // ...
- });
- }
- return (
- <FileManager
- fileSystemProvider={fileSystemProvider}>
- </FileManager>
- );
- }
- }
- function uploadFileChunk(fileData, chunksInfo, destinationDir) {
- // ...
- }
- // other functions
- export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.