React FileManager - Custom
A custom file system provider allows you to implement custom APIs to access and use file systems.
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:
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.CustomFileSystemProvider({ getItems: function(pathInfo) { // Your code goes here }, renameItem: function(item, name) { // Your code goes here }, createDirectory: function(parentDir, name) { // Your code goes here }, 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({ 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 { }
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, createDirectory, renameItem, deleteItem, // ... }), }; } }; function getItems(parentDirectory) { // ... } // 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, createDirectory, renameItem, deleteItem, // ... }); } return ( <FileManager fileSystemProvider={fileSystemProvider}> </FileManager> ); } } function getItems(parentDirectory) { // ... } // other functions export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItems("getItems") .CreateDirectory("createDirectory") .RenameItem("renameItem") .DeleteItem("deleteItem") // ... ) ) <script> function getItems(parentDirectory) { // ... } // other functions </script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Custom() .GetItems("getItems") .CreateDirectory("createDirectory") .RenameItem("renameItem") .DeleteItem("deleteItem") // ... ) ) <script> function getItems(parentDirectory) { // ... } // other functions </script>
Props
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.