React FileManager - Custom.Configuration
This section describes properties that configure a custom file system provider.
abortFileUpload
A function that cancels the file upload.
The file that is being uploaded.
Information about the file upload session.
The directory where a file system item is uploaded to.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ abortFileUpload: function(fileData, chunksInfo, destinationDir) { // Your code goes here }, //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .AbortFileUpload("abortFileUpload") // ... ) ) <script> function abortfileUpload(fileData, chunksInfo, destinationDir) { // ... } // other functions </script>
ASP.NET Core Controls
@(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.
The current file system item.
The directory where a file system item is copied to.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ copyItem: function(item, destinationDir) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .CopyItem("copyItem") // ... ) ) <script> function copyItem(item, destinationDir) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .CopyItem("copyItem") // ... ) ) <script> function copyItem(item, destinationDir) { // ... } // other functions </script>
createDirectory
A function that creates a directory.
The parent directory where a new directory should be created.
The name of the new directory.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ createDirectory: function(parentDir, name) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .CreateDirectory("createDirectory") // ... ) ) <script> function createDirectory(parentDir, name) { // ... } // other functions </script>
ASP.NET Core Controls
@(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.
deleteItem
A function that deletes a file or folder.
The current file system item.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ deleteItem: function(item) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .DeleteItem("deleteItem") // ... ) ) <script> function deleteItem(item) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .DeleteItem("deleteItem") // ... ) ) <script> function deleteItem(item) { // ... } // other functions </script>
downloadItems
A function that downloads files.
The file system items.
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ downloadItems: function(Array<FileManagerItem>) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .DownloadItems("downloadItems") // ... ) ) <script> function downloadItems(Array<FileManagerItem>) { // ... } // other functions </script>
ASP.NET Core Controls
@(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.
The directory that stores file system items.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ getItems: function(pathInfo) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItems("getItems") // ... ) ) <script> function getItems(pathInfo) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItems("getItems") // ... ) ) <script> function getItems(pathInfo) { // ... } // other functions </script>
getItemsContent
A function that get items content.
The file system items.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ getItemsContent: function(pathInfo) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItemsContent("getItemsContent") // ... ) ) <script> function getItemsContent(pathInfo) { // ... } // other functions </script>
ASP.NET Core Controls
@(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.
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ hasSubDirectoriesExpr: "hasDirectories" //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .HasSubDirectoriesExpr("hasSubDirectoriesExpr") // ... ) )
ASP.NET Core Controls
@(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.
moveItem
A function that moves files and folders.
The current file system item.
The directory where a file system item is moved to.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ moveItem: function(item, destinationDir) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .MoveItem("moveItem") // ... ) ) <script> function moveItem(item, destinationDir) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .MoveItem("moveItem") // ... ) ) <script> function moveItem(item, destinationDir) { // ... } // other functions </script>
renameItem
A function that renames files and folders.
The current file system item.
The new name for the file system item.
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
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ renameItem: function(item, name) { // Your code goes here } //... }) }); });
Angular
<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
<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
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
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .RenameItem("renameItem") // ... ) ) <script> function renameItem(item, name) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .RenameItem("renameItem") // ... ) ) <script> function renameItem(item, name) { // ... } // other functions </script>
thumbnailExpr
Specifies which data field provides icons to be used as thumbnails.
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.
The file that is being uploaded.
Information about the file upload session.
The directory where a file system item is uploaded to.
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.
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ uploadFileChunk: function(fileData, chunksInfo, destinationDir) { // Your code goes here } //... }) }); });
Angular
<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({ uploadFileChunk, // ... }); } } function uploadFileChunk(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
<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({ uploadFileChunk, // ... }), }; } }; function uploadFileChunk(fileData, chunksInfo, destinationDir) { // ... } // other functions </script>
React
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;
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .UploadFileChunk("uploadFileChunk") // ... ) ) <script> function uploadFileChunk(fileData, chunksInfo, destinationDir) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .UploadFileChunk("uploadFileChunk") // ... ) ) <script> function uploadFileChunk(fileData, chunksInfo, destinationDir) { // ... } // other functions </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.