FileManager

• Jul 09, 2021
• 3 minutes to read

The DevExpress ASP.NET Core FileManager control allows you to display and manage files and directories for different file systems.

Note

Refer to Razor Syntax for more information on how to configure the ASP.NET Core controls.

Features

Connection to File Systems

Object File System Provider

Online demo

Pass an array of hierarchical JSON objects to the FileSystemProvider(JS) method.

CSHTML

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(new JS("fileSystem"))
    //...
)

JS

//File System Structure
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
                }
            ]
        }
    ],
    // ...
];

Remote File System Provider

Online demo

Use the FileSystemProvider(Func<FileSystemProviderFactory, OptionsOwnerBuilder>) method to specify a remote file system provider and pass an URL to an action method that returns file system items.

CSHTML

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Remote()
        // 
        .Url(Url.RouteUrl("FileManagementFileSystemApi")))
    //...
)

Use the FileSystemConfiguration class to configure interaction between the file system provider and file system items. The FileSystemCommandProcessor object allows you to process commands and request parameters that the file manager passes to the file system.

CS

// Controller code
[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();
}

To implement server-side interaction with a file system, pass a class that uses the file management interfaces to the FileSystemProvider property:

CS

// Controller code
public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        Request = Request,
        FileSystemProvider = AzureFileProvider,
        AllowCreate = true,
        //...
}
// Provider code
public class AzureBlobFileProvider : IFileSystemItemLoader, IFileSystemItemEditor, IFileUploader, IFileContentProvider {

    public IEnumerable<FileSystemItem> GetItems(FileSystemLoadItemOptions options) {
        // your code
    }
    public void CreateDirectory(FileSystemCreateDirectoryOptions options) {
        // your code
    }

}

Custom File System Provider

Online demo

A custom file system provider allows you to handle each file operation.

Use the FileSystemProvider(Func<FileSystemProviderFactory, OptionsOwnerBuilder>) method to specify a custom file system provider. Specify functions to get file system items and handle file operations.

CSHTML

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Custom()
        .GetItems("getItems")
        .CreateDirectory("createDirectory")
        //...
    )
)

<script>
function getItems(parentDirectory){
    // your code
}

function createDirectory(parentDirectory, name) {
    // your code
}        
</script>

To implement server-side interaction with a file system, pass a class that uses the file management interfaces to the FileSystemProvider property.

Toolbar and Context Menu

The FileManager control supports default and custom context-invariant and context-sensitive toolbar and context menu items that can be visible or hidden depending on the user’s action.

(See demo)

Validation

You can specify whether a user is allowed to copy, create, download, move, remove, rename, or upload files and folders in the FileManager widget.

The control also supports the following restrictions: allowed file extensions, maximum upload file, and chunk sizes.

(See demo)

Custom Thumbnails

The control allows you to use custom thumbnails for a file system items.

(See demo)

Online Demos

(ASP.NET Core File Manager Demos)