FileManager

• Sep 09, 2024
• 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.

View Example: File Manager - How to use it in ASP.NET Core Razor Pages

Run Demo: ASP.NET Core File Manager Demos

Features

Connection to File Systems

Object File System Provider

See 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

See 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

See 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

See demo

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.

Validation

See demo

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.

Custom Thumbnails

See demo

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