File Management

  • 4 minutes to read

This topic describes how to use the DevExtreme.AspNet.Mvc.FileManagement API in an ASP.NET Core or ASP.NET Core MVC application. The API allows you to interact with a file system on the server side.

Configure Interaction with File System

Use the following classes to configure file system interaction:

  • FileSystemConfiguration - Allows you to specify a file system provider and file system configuration settings.

    public object FileSystem(FileSystemCommand command, string arguments) {
        // Configure File System Options
        var config = new FileSystemConfiguration {
            Request = Request,
            FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot"),
            AllowDownload = true,
            AllowUpload = true,
            UploadConfiguration = new UploadConfiguration {
                MaxFileSize = 1048576
            },
        };
    }
    
  • FileSystemCommandProcessor - Allows you to process commands and request parameters passed to a file system.

    public object FileSystem(FileSystemCommand command, string arguments) {
        var config = new FileSystemConfiguration {
            // ...
        };
        var processor = new FileSystemCommandProcessor(config);
    }
    
  • FileSystemCommandResult - Provides information on the execution results of file management commands.

    public object FileSystem(FileSystemCommand command, string arguments) {
        // ...
        var result = processor.Execute(command, arguments);
        return result.GetClientCommandResult();
    }
    
  • FileSystemCommand - Lists item-processing command names.

    public object FileSystem(FileSystemCommand command, string arguments) {
        if(command == FileSystemCommand.Download) {
            // ...
        }
    }
    

File System Provider

Use the FileSystemProvider property to specify a file system provider.

Available types of file system providers:

  • PhysicalFileSystemProvider - Allows you to interact with a physical file system.

    var config = new FileSystemConfiguration {
        FileSystemProvider = new PhysicalFileSystemProvider(_hostingEnvironment.ContentRootPath + "/wwwroot")
        //...
    };
    
  • Custom file system provider. Assign a custom class that implements any of the following file management interfaces to the FileSystemProvider property:

    Interface

    Description

    IFileSystemItemLoader

    Defines APIs to get files and folders from a file system.

    IFileSystemItemEditor

    Defines APIs to modify files and folders in a file system.

    IFileUploader

    Defines APIs to upload files to a file system.

    IFileContentProvider

    Defines APIs to download files.

    // Controller code
    public object FileSystem(FileSystemCommand command, string arguments) {
        var config = new FileSystemConfiguration {
            FileSystemProvider = MyFileSystemProvider,
            //...
        }
    }
    // Provider code
    public class MyFileSystemProvider : IFileSystemItemLoader, IFileUploader {
        public IEnumerable<FileSystemItem> GetItems(FileSystemLoadItemOptions options) {
            // your code
        }
        public void UploadFile(FileSystemUploadFileOptions options) {
            // your code
        }
    }
    

Examples

The following examples illustrate how to configure the dxFileManager and dxFileUploader widgets to manage files and folders in a server-side storage.

Add server-side file management functionality to File Manager

This examples uses two file system providers:

  • Remote File System Provider - Allows a client to remotely access an Azure Blob Storage file system.

  • Custom File System Provider - Processes HTTP requests on the server. This custom provider implements two interfaces: IFileSystemItemLoader and IFileUploader.

NOTE

Refer to the FileManager - Azure Server-Side Binding online demo to obtain the complete code.

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider.Remote()
        .Url(Url.RouteUrl("FileManagerAzureProviderApi")))
    .Permissions(permissions => {
        permissions.Download(true);
        permissions.Upload(true);
    })
    //...
}
// Controller code
[Route("api/file-manager-azure", Name = "FileManagerAzureProviderApi")]
public object FileSystem(FileSystemCommand command, string arguments) {
    var config = new FileSystemConfiguration {
        Request = Request,
        FileSystemProvider = AzureFileProvider,
        AllowUpload = true,
        AllowDownload = true,
        TempDirectory = HostingEnvironment.ContentRootPath + "/UploadTemp"
    };
    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);
    return result.GetClientCommandResult();
}

// File System Provider implementation

public class AzureBlobFileProvider : IFileSystemItemLoader, IFileUploader {
    // ...
    public IEnumerable<FileSystemItem> GetItems(FileSystemLoadItemOptions options) {
        var result = new List<FileSystemItem>();
        // your code
    }
    public void UploadFile(FileSystemUploadFileOptions options) {
        string destinationKey = $"{options.DestinationDirectory.Path}/{options.FileName}";
        // your code
    }
}

Add server-side file management functionality to File Uploader

Use the uploadChunk and abortUpload functions to implement the dxFileUploader widget's file system provider functionality on the client side.

@(Html.DevExtreme().FileUploader()
    .ID("file-uploader")
    .ChunkSize(200000)
    .MaxFileSize(1048576)
    .UploadChunk("uploadChunk")
    .AbortUpload("abortUpload")
)
<script>
    var provider = new DevExpress.fileManagement.RemoteFileSystemProvider({
        endpointUrl: "@Url.RouteUrl("FileManagementFileSystemApi")"
    });
    var uploadDirectory = new DevExpress.fileManagement.FileSystemItem("images", true);
    function uploadChunk(file, uploadInfo) {
        return provider.uploadFileChunk(file, uploadInfo, uploadDirectory);
    }
    function abortUpload(file, uploadInfo) {
        return provider.abortFileUpload(file, uploadInfo, uploadDirectory);
    }
</script>
// 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"),
        AllowUpload = true,
        AllowedFileExtensions = new[] { ".jpg", ".jpeg", ".gif", ".png" },
        UploadConfiguration = new UploadConfiguration {
            MaxFileSize = 1000000,
            ChunkSize = 200000
        },
        TempDirectory = "Temp"
    };
    var processor = new FileSystemCommandProcessor(config);
    var result = processor.Execute(command, arguments);
    return result.GetClientCommandResult();

Online Demo

FileManager - Azure Server-Side Binding