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.

Export: default
Type:

Object

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 widget to it:

jQuery
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
            }, 
            moveItem: function(item, destinationDir) { 
                // Your code goes here
            }, 
            copyItem: function(item, destinationDir) { 
                // Your code goes here
            }, 
            uploadFileChunk: function(fileData, chunksInfo, destinationDir) { 
                // Your code goes here
            }, 
            abortFileUpload: function(fileData, chunksInfo, destinationDir) { 
                // Your code goes here
            }, 
            uploadChunkSize: 1000 
        }) 
    });
});

Object

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

Export: default
Type:

Object

Assign the array to the data option. Data object fields should have conventional names listed in the data description. Otherwise, specify [fieldName]Expr options: nameExpr, sizeExpr, dateModifiedExpr, and so on.

The following code shows how to bind the FileManager to the Object file system provider:

jQuery
index.js
$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileSystemProvider: new DevExpress.fileManagement.ObjectFileSystemProvider({            
            data: [ 
                // ...
                // Data objects that represent files and directories
                // ...
            ],
            thumbnailExpr: "icon",
            // ...
        })
        // A shortcut that can be used if object fields have conventional names
        fileSystemProvider: [ 
            // ...
            // Data objects that represent files and directories
            // ...
        ]
    });
});

View Demo

Remote

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

Export: default
Type:

Object

Set the endpointUrl option 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 options: nameExpr, sizeExpr, dateModifiedExpr, and so on.

The following code shows how to bind the FileManager to the Remote file system provider:

jQuery
index.js
$(function() {
    $("#fileManagerContainer").dxFileManager({
        fileSystemProvider: new DevExpress.fileManagement.RemoteFileSystemProvider({
            endpointUrl: "https://mydomain.com/api/files",
            thumbnailExpr: "icon",
            // ...
        })
    });
});

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