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

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:

index.js
  • $(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
  • },
  • // ...
  • })
  • });
  • });

Object

The Object file system provider works with a file system represented by an in-memory array of JSON objects.

import ObjectFileSystemProvider from "devextreme/file_management/object_provider"

View on GitHub

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:

index.js
data.js
  • $(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
  • }]
  • }];

Remote

The Remote file system provider works with a file system located on the server.

import RemoteFileSystemProvider from "devextreme/file_management/remote_provider"

View on GitHub

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:

index.js
  • $(function () {
  • $("#file-manager").dxFileManager({
  • fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({
  • endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
  • }),
  • // ...
  • });
  • });

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:

View Demo View on GitHub