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
Defines APIs to get files and folders from a file system.
Defines APIs to modify files and folders in a file system.
Defines APIs to upload files to a file system.
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();