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:
Options
| 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. |