Angular 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.
- <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 { }
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.
- <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 { }
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.
- <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 { }
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.
- <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 { }
downloadItems
- <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 { }
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.
- <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 { }
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.
- <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 { }
hasSubDirectoriesExpr
A function or the name of a data source field that provides information on whether a file or folder contains sub directories.
- <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 { }
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.
- <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 { }
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.
- <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 { }
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.
- <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 { }
If you have technical questions, please create a support ticket in the DevExpress Support Center.