Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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