Angular FileManager - Custom.Configuration

This section describes properties that configure a custom file system provider.

abortFileUpload

A function that cancels the file upload.

Type:

Function

Function parameters:
file:

File

The file that is being uploaded.

uploadInfo:

UploadInfo

Information about the file upload session.

destinationDirectory:

FileSystemItem

The directory where a file system item is uploaded to.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after the file upload in aborted. It is a native Promise or a jQuery.Promise when you use jQuery.

app.component.html
app.component.ts
app.module.ts
  • <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 function that copies files or directories.

Type:

Function

Function parameters:

The current file system item.

destinationDirectory:

FileSystemItem

The directory where a file system item is copied to.

Return Value:

Promise<any> (jQuery or native)

| any

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.

app.component.html
app.component.ts
app.module.ts
  • <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 function that creates a directory.

Type:

Function

Function parameters:
parentDirectory:

FileSystemItem

The parent directory where a new directory should be created.

name:

String

The name of the new directory.

Return Value:

Promise<any> (jQuery or native)

| any

A Promise that is resolved after a new directory is created. It is a native Promise or a jQuery.Promise when you use jQuery.

app.component.html
app.component.ts
app.module.ts
  • <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 { }

dateModifiedExpr

Specifies which data field provides timestamps that indicate when a file was last modified.

Type:

String

|

Function

deleteItem

A function that deletes a file or directory.

Type:

Function

Function parameters:

The current file system item.

Return Value:

Promise<any> (jQuery or native)

| any

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.

app.component.html
app.component.ts
app.module.ts
  • <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

A function that downloads files.

Type:

Function

Function parameters:

The file system items.

app.component.html
app.component.ts
app.module.ts
  • <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 function that gets file system items.

Type:

Function

Function parameters:
parentDirectory:

FileSystemItem

The directory that stores file system items.

Return Value:

Promise<Array<Object>> (jQuery or native)

|

Array<Object>

A Promise that is resolved after file system items are obtained. It is a native Promise or a jQuery.Promise when you use jQuery.

app.component.html
app.component.ts
app.module.ts
  • <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 function that get items content.

Type:

Function

Function parameters:

The file system items.

Return Value:

Promise<Object> (jQuery or native)

|

Object

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.

app.component.html
app.component.ts
app.module.ts
  • <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 directory contains sub directories.

Type:

String

|

Function

app.component.html
app.component.ts
app.module.ts
  • <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 { }

isDirectoryExpr

Specifies which data field provides information about whether a file system item is a directory.

Type:

String

|

Function

keyExpr

Specifies the data field that provides keys.

Type:

String

|

Function

moveItem

A function that moves files and directories.

Type:

Function

Function parameters:

The current file system item.

destinationDirectory:

FileSystemItem

The directory where a file system item is moved to.

Return Value:

Promise<any> (jQuery or native)

| any

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.

app.component.html
app.component.ts
app.module.ts
  • <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 { }

nameExpr

Specifies which data field provides file and directory names.

Type:

String

|

Function

renameItem

A function that renames files and directories.

Type:

Function

Function parameters:

The current file system item.

newName:

String

The new name for the file system item.

Return Value:

Promise<any> (jQuery or native)

| any

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.

app.component.html
app.component.ts
app.module.ts
  • <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 { }

sizeExpr

Specifies which data field provides file sizes.

Type:

String

|

Function

thumbnailExpr

Specifies which data field provides icons to be used as thumbnails.

Type:

String

|

Function

The data field can contain one of the following:

uploadFileChunk

A function that uploads a file in chunks.

Type:

Function

Function parameters:
file:

File

The file that is being uploaded.

uploadInfo:

UploadInfo

Information about the file upload session.

destinationDirectory:

FileSystemItem

The directory where a file system item is uploaded to.

Return Value:

Promise<any> (jQuery or native)

| any

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.

View on GitHub

app.component.html
app.component.ts
app.module.ts
  • <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 { }