JavaScript/jQuery FileManager File System Providers
File system providers are components that provide APIs used to access and modify virtual file systems. This section describes file system providers supported by the FileManager.
Custom
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>
Object
The Object file system provider works with a file system represented by an in-memory array of JSON objects.
Assign the array to the data property. Data object fields should have conventional names listed in the data description. Otherwise, specify [fieldName]Expr properties: nameExpr, sizeExpr, dateModifiedExpr, and so on.
The following code shows how to bind the FileManager to the Object file system provider:
jQuery
$(function() { $("#file-manager").dxFileManager({ fileSystemProvider: fileSystem, // ... }); });
var fileSystem = [ { name: "Documents", isDirectory: true, items: [{ name: "Projects", isDirectory: true, items: [{ name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, size: 2048 }] }, { name: "About.xml", isDirectory: false, size: 1024 }] }];
Angular
<dx-file-manager id="fileManager" [fileSystemProvider]="fileItems"> </dx-file-manager>
import { Component } from '@angular/core'; import ObjectFileSystemProvider from 'devextreme/file_management/object_provider'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { fileItems = [{ name: "Documents", isDirectory: true, items: [{ name: "Projects", isDirectory: true, items: [{ name: "About.rtf", isDirectory: false, size: 1024 }, { name: "Passwords.rtf", isDirectory: false, size: 2048 }] },{ name: "About.xml", isDirectory: false, size: 1024 }] }]; }
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="fileItems"> </DxFileManager> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxFileManager } from 'devextreme-vue/file-manager'; import { fileItems } from "./data.js"; export default { components: { DxFileManager }, data() { return { fileItems }; } }; </script>
export const fileItems = [{ 'name': 'Documents', 'isDirectory': true, 'items': [{ 'name': 'Projects', 'isDirectory': true, 'items': [{ 'name': 'About.rtf', 'isDirectory': false, 'size': 1024 }, { 'name': 'Passwords.rtf', 'isDirectory': false, 'size': 2048 }] }, { 'name': 'About.xml', 'isDirectory': false, 'size': 1024 }] }];
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileManager from 'devextreme-react/file-manager'; import ObjectFileSystemProvider from 'devextreme/file_management/object_provider'; class App extends React.Component { render() { return ( <FileManager fileSystemProvider={fileItems}> </FileManager> ); } } export default App;
export const fileItems = [{ 'name': 'Documents', 'isDirectory': true, 'items': [{ 'name': 'Projects', 'isDirectory': true, 'items': [{ 'name': 'About.rtf', 'isDirectory': false, 'size': 1024 }, { 'name': 'Passwords.rtf', 'isDirectory': false, 'size': 2048 }] }, { 'name': 'About.xml', 'isDirectory': false, 'size': 1024 }] }];
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(new JS("fileSystem")) ) <script src="~/data/fileSystem.js"></script>
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(new JS("fileSystem")) ) <script src="~/data/fileSystem.js"></script>
Remote
Set the endpointUrl property to specify the endpoint used to access and modify the file system.
The server should return data objects of the following structure:
{ name: "MyFile.jpg", size: 1024, dateModified: "2019/05/08", thumbnail: "/thumbnails/images/jpeg.ico", isDirectory: true, hasSubDirectories: true }
Fields in this structure have conventional names that you can change via [fieldName]Expr properties: nameExpr, sizeExpr, dateModifiedExpr, and so on.
The following code shows how to bind the FileManager to the Remote file system provider:
jQuery
$(function () { $("#file-manager").dxFileManager({ fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({ endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts" }), // ... }); });
Angular
<dx-file-manager id="fileManager" [fileSystemProvider]="remoteFileProvider"> <!-- ... --> </dx-file-manager>
import { Component } from '@angular/core'; import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider'; @Component({ selector: 'app-root', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { remoteFileProvider: RemoteFileSystemProvider; constructor() { this.remoteFileProvider = new RemoteFileSystemProvider({ endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts" }); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule} from '@angular/core'; import { AppComponent } from './app.component'; import { DxFileManagerModule } from 'devextreme-angular'; @NgModule({ imports: [ BrowserModule, DxFileManagerModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxFileManager :file-system-provider="remoteFileProvider"> <!-- ... --> </DxFileManager> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxFileManager } from 'devextreme-vue/file-manager'; import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider'; const remoteFileProvider = new RemoteFileSystemProvider({ endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts' }); export default { components: { DxFileManager }, data() { return { remoteFileProvider }; } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import FileManager from 'devextreme-react/file-manager'; import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider'; const remoteFileProvider = new RemoteFileSystemProvider({ endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts' }); class App extends React.Component { render() { return ( <FileManager fileSystemProvider={remoteFileProvider}> {/* ... */} </FileManager> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Remote() .Url(Url.RouteUrl("FileManagerDBProviderApi"))) ) <!--FileManagerDBProviderApiController--> [Route("api/file-manager-file-system", Name = "FileManagementFileSystemApi")] public object FileSystem(FileSystemCommand command, string arguments) { var config = new FileSystemConfiguration { Request = Request, FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"), // ... }; var processor = new FileSystemCommandProcessor(config); var result = processor.Execute(command, arguments); return result.GetClientCommandResult(); }
ASP.NET Core Controls
@(Html.DevExtreme().FileManager() .FileSystemProvider(provider => provider.Remote() .Url(Url.RouteUrl("FileManagerDBProviderApi"))) ) <!--FileManagerDBProviderApiController--> [Route("api/file-manager-file-system", Name = "FileManagementFileSystemApi")] public object FileSystem(FileSystemCommand command, string arguments) { var config = new FileSystemConfiguration { Request = Request, FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"), // ... }; var processor = new FileSystemCommandProcessor(config); var result = processor.Execute(command, arguments); return result.GetClientCommandResult(); }
On the server-side, you need to process file management requests. DevExtreme provides helpers for ASP.NET MVC and ASP.NET Core that do this. To view the server-side code, navigate to the FileManagerApiController.cs
tab in the following demo:
If you have technical questions, please create a support ticket in the DevExpress Support Center.