JavaScript/jQuery FileManager - 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:
Configuration
Name | Description |
---|---|
beforeAjaxSend |
Specifies a function that customizes an Ajax request before it is sent to the server. |
beforeSubmit |
Specifies a function that customizes a form submit request before it is sent to the server. |
dateModifiedExpr |
Specifies which data field provides timestamps that indicate when a file was last modified. |
endpointUrl |
Specifies the URL of an endpoint used to access and modify a file system located on the server. |
hasSubDirectoriesExpr |
Specifies which data field provides information about whether a directory has subdirectories. |
isDirectoryExpr |
Specifies which data field provides information about whether a file system item is a directory. |
keyExpr |
Specifies the data field that provides keys. |
nameExpr |
Specifies which data field provides file and directory names. |
requestHeaders |
Specifies the request headers. |
sizeExpr |
Specifies which data field provides file sizes. |
thumbnailExpr |
Specifies which data field provides icons to be used as thumbnails. |
Methods
Name | Description |
---|---|
abortFileUpload() |
Cancels the file upload. |
copyItems() |
Copies files or folders. |
createDirectory() |
Creates a directory. |
deleteItems() |
Deletes files or folders. |
downloadItems() |
Downloads files. |
getItems() |
Gets file system items. |
getItemsContent() |
Gets items content. |
moveItems() |
Moves files and folders. |
renameItem() |
Renames a file or folder. |
uploadFileChunk() |
Uploads a file in chunks. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.