Angular FileManager - Custom

A custom file system provider allows you to implement custom APIs to access and use file systems.

import CustomFileSystemProvider from "devextreme/file_management/custom_provider"

Use the custom provider's methods to handle file operations (add, delete, rename, and so on).

The following code shows how to create a custom file system provider and bind the FileManager UI component to it:

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,
  • createDirectory,
  • renameItem,
  • deleteItem,
  • // ...
  • });
  • }
  • }
  •  
  • function getItems(parentDirectory) {
  • // ...
  • }
  • // 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 { }

Properties

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

Name Description
abortFileUpload

A function that cancels the file upload.

copyItem

A function that copies files or directories.

createDirectory

A function that creates a directory.

dateModifiedExpr

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

deleteItem

A function that deletes a file or directory.

downloadItems

A function that downloads files.

getItems

A function that gets file system items.

getItemsContent

A function that get items content.

hasSubDirectoriesExpr

A function or the name of a data source field that provides information on whether a file or directory contains sub directories.

isDirectoryExpr

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

keyExpr

Specifies the data field that provides keys.

moveItem

A function that moves files and directories.

nameExpr

Specifies which data field provides file and directory names.

renameItem

A function that renames files and directories.

sizeExpr

Specifies which data field provides file sizes.

thumbnailExpr

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

uploadFileChunk

A function that uploads a file in chunks.

Methods

This section describes members used to manage file system items.

Name Description
abortFileUpload()

Cancels the file upload.

copyItems()

Copies files or directories.

createDirectory()

Creates a directory.

deleteItems()

Deletes files or directories.

downloadItems()

Downloads files.

getItems()

Gets file system items.

getItemsContent()

Gets items content.

moveItems()

Moves files and directories.

renameItem()

Renames a file or directory.

uploadFileChunk()

Uploads a file in chunks.