Vue 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.
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 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 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>
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.
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
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 Promise that is resolved after file system items are obtained. It is a native Promise or a jQuery.Promise when you use jQuery.
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 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") // ... ) )
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.
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 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
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.
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: provider, }); }); const endpointUrl = 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-access'; gateway = new AzureGateway(endpointUrl, onRequestExecuted); azure = new AzureFileSystem(gateway); const provider = new DevExpress.fileManagement.CustomFileSystemProvider({ uploadFileChunk, //... }); function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { let deferred = null; if (uploadInfo.chunkIndex === 0) { const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name; deferred = gateway.getUploadAccessUrl(filePath).done((accessUrl) => { uploadInfo.customData.accessUrl = accessUrl; }); } else { deferred = $.Deferred().resolve().promise(); } deferred = deferred.then(() => gateway.putBlock( uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob, )); if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { deferred = deferred.then(() => gateway.putBlockList( uploadInfo.customData.accessUrl, uploadInfo.chunkCount, )); } return deferred.promise(); }
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) { const endpointUrl = 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-access'; gateway = new AzureGateway(endpointUrl, this.onRequestExecuted.bind(this)); this.fileSystemProvider = new CustomFileSystemProvider({ uploadFileChunk, // ... }); } } function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { let promise = null; if (uploadInfo.chunkIndex === 0) { const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name; promise = gateway.getUploadAccessUrl(filePath).done((accessUrl) => { uploadInfo.customData.accessUrl = accessUrl; }); } else { promise = Promise.resolve(); } promise = promise.then(() => gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob)); if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { promise = promise.then(() => gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount)); } return promise; } // 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, // ... }), }; }, created() { gateway = new AzureGateway(endpointUrl, onRequestExecuted); azure = new AzureFileSystem(gateway); }, }; function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { let promise = null; if (uploadInfo.chunkIndex === 0) { const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name; promise = gateway.getUploadAccessUrl(filePath).done((accessUrl) => { uploadInfo.customData.accessUrl = accessUrl; }); } else { promise = Promise.resolve(); } promise = promise.then(() => gateway.putBlock( uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob, )); if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { promise = promise.then(() => gateway.putBlockList( uploadInfo.customData.accessUrl, uploadInfo.chunkCount, )); } return promise; } // 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(); gateway = new AzureGateway(endpointUrl, this.onRequestExecuted); azure = new AzureFileSystem(gateway); this.fileSystemProvider = new CustomFileSystemProvider({ uploadFileChunk, // ... }); } return ( <FileManager fileSystemProvider={fileSystemProvider}> </FileManager> ); } } function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { let promise = null; if (uploadInfo.chunkIndex === 0) { const filePath = destinationDirectory.path ? `${destinationDirectory.path}/${fileData.name}` : fileData.name; promise = gateway.getUploadAccessUrl(filePath).done((accessUrl) => { uploadInfo.customData.accessUrl = accessUrl; }); } else { promise = Promise.resolve(); } promise = promise.then(() => gateway.putBlock( uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob, )); if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { promise = promise.then(() => gateway.putBlockList( uploadInfo.customData.accessUrl, uploadInfo.chunkCount, )); } return promise; } // other functions export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .UploadFileChunk("uploadFileChunk") // ... ) ) <script> var endpointUrl = '@Url.RouteUrl("FileManagerAzureAccessApi")'; var gateway = new AzureGateway(endpointUrl, onRequestExecuted); var azure = new AzureFileSystem(gateway); function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { var deferred = null; if(uploadInfo.chunkIndex === 0) { var filePath = destinationDirectory.path ? destinationDirectory.path + "/" + fileData.name : fileData.name; deferred = gateway.getUploadAccessUrl(filePath).done(function(accessUrl) { uploadInfo.customData.accessUrl = accessUrl; }); } else { deferred = $.Deferred().resolve().promise(); } deferred = deferred.then(function() { return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob); }); if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { deferred = deferred.then(function() { return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount); }); } return deferred.promise(); } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .UploadFileChunk("uploadFileChunk") // ... ) ) <script> var endpointUrl = '@Url.RouteUrl("FileManagerAzureAccessApi")'; var gateway = new AzureGateway(endpointUrl, onRequestExecuted); var azure = new AzureFileSystem(gateway); function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { var deferred = null; if(uploadInfo.chunkIndex === 0) { var filePath = destinationDirectory.path ? destinationDirectory.path + "/" + fileData.name : fileData.name; deferred = gateway.getUploadAccessUrl(filePath).done(function(accessUrl) { uploadInfo.customData.accessUrl = accessUrl; }); } else { deferred = $.Deferred().resolve().promise(); } deferred = deferred.then(function() { return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob); }); if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { deferred = deferred.then(function() { return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount); }); } return deferred.promise(); } // other functions </script>
If you have technical questions, please create a support ticket in the DevExpress Support Center.