Entity Framework ORM
The FileManager component allows you to manage file system items that use the Entity Framework ORM to link to a database. You can use the Remote File System Provider to connect to the file system on the client side. To process the component's HTTP requests on the server, create your own file system provider, which implements the IFileSystemItemLoader and IFileSystemItemEditor interfaces.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-file-manager
id="fileManager"
[fileSystemProvider]="remoteProvider"
currentPath="Documents/Reports"
[allowedFileExtensions]="allowedFileExtensions"
height="550"
>
<dxo-permissions
[create]="true"
[copy]="true"
[move]="true"
[delete]="true"
[rename]="true"
>
</dxo-permissions>
<dxo-item-view>
<dxo-details>
<dxi-column dataField="thumbnail"></dxi-column>
<dxi-column dataField="name"></dxi-column>
<dxi-column dataField="dateModified" caption="Modified"></dxi-column>
<dxi-column
dataField="created"
caption="Created"
dataType="date"
></dxi-column>
<dxi-column
dataField="modifiedBy"
caption="Modified By"
visibleIndex="2"
></dxi-column>
</dxo-details>
</dxo-item-view>
</dx-file-manager>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxFileManagerModule } from 'devextreme-angular';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
styleUrls: ['app/app.component.css'],
selector: 'demo-app',
templateUrl: 'app/app.component.html',
preserveWhitespaces: true,
})
export class AppComponent {
allowedFileExtensions: string[];
remoteProvider: RemoteFileSystemProvider;
constructor() {
this.allowedFileExtensions = [];
this.remoteProvider = new RemoteFileSystemProvider({
endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-db',
});
}
}
@NgModule({
imports: [
BrowserModule,
DxFileManagerModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.16',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.16',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.16',
'@angular/forms': 'npm:@angular/forms@12.2.16',
'@angular/common': 'npm:@angular/common@12.2.16',
'@angular/compiler': 'npm:@angular/compiler@12.2.16',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.1.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@22.1.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.63',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.32',
'devextreme-angular': 'npm:devextreme-angular@22.1.5',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.16/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@22.1.5/*/package.json',
'npm:devextreme-angular@22.1.5/ui/*/package.json',
'npm:devextreme-angular@22.1.5/package.json',
'npm:devexpress-diagram@2.1.63/package.json',
'npm:devexpress-gantt@4.1.32/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx-gantt.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.11.4/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>
using DevExtreme.AspNet.Mvc.FileManagement;
using DevExtreme.MVC.Demos.Models.FileManagement;
using System;
using System.Web;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class FileManagerDbProviderApiController : ApiController {
[AcceptVerbs("GET", "POST")]
[Route("api/file-manager-db", Name = "FileManagerDBProviderApi")]
public object Process(FileSystemCommand command, string arguments) {
var request = new HttpContextWrapper(HttpContext.Current).Request;
var config = new FileSystemConfiguration {
Request = request,
FileSystemProvider = new DbFileProvider(),
AllowCopy = true,
AllowCreate = true,
AllowMove = true,
AllowDelete = true,
AllowRename = true,
AllowedFileExtensions = new string[0]
};
var processor = new FileSystemCommandProcessor(config);
var result = processor.Execute(command, arguments);
return Ok(result.GetClientCommandResult());
}
}
}
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using DevExtreme.AspNet.Mvc.FileManagement;
namespace DevExtreme.MVC.Demos.Models.FileManagement {
public class DbFileProvider : IFileSystemItemLoader, IFileSystemItemEditor {
const int GuestPersonId = 1;
public DbFileProvider() {
FileManagementDbContext = new InMemoryFileManagementDataContext();
}
InMemoryFileManagementDataContext FileManagementDbContext { get; }
public IEnumerable<FileSystemItem> GetItems(FileSystemLoadItemOptions options) {
int parentId = ParseKey(options.Directory.Key);
var fileItems = GetDirectoryContents(parentId);
var hasSubDirectoriesInfo = GetHasSubDirectoriesInfo(fileItems);
var clientItemList = new List<FileSystemItem>();
foreach(var item in fileItems) {
var clientItem = new FileSystemItem {
Key = item.Id.ToString(),
Name = item.Name,
IsDirectory = item.IsDirectory,
DateModified = item.Modified
};
if(item.IsDirectory) {
clientItem.HasSubDirectories = hasSubDirectoriesInfo.ContainsKey(item.Id) && hasSubDirectoriesInfo[item.Id];
}
clientItem.CustomFields["modifiedBy"] = item.ModifiedBy.FullName;
clientItem.CustomFields["created"] = item.Created;
clientItemList.Add(clientItem);
}
return clientItemList;
}
public void CreateDirectory(FileSystemCreateDirectoryOptions options) {
var parentDirectory = options.ParentDirectory;
if(!IsFileItemExists(parentDirectory))
ThrowItemNotFoundException(parentDirectory);
var directory = new FileItem {
Name = options.DirectoryName,
Modified = DateTime.Now,
Created = DateTime.Now,
IsDirectory = true,
ParentId = ParseKey(parentDirectory.Key),
ModifiedById = GuestPersonId
};
FileManagementDbContext.FileItems.Add(directory);
FileManagementDbContext.SaveChanges();
}
public void RenameItem(FileSystemRenameItemOptions options) {
var item = options.Item;
if(!IsFileItemExists(item))
ThrowItemNotFoundException(item);
var fileItem = GetFileItem(item);
fileItem.Name = options.ItemNewName;
fileItem.ModifiedById = GuestPersonId;
fileItem.Modified = DateTime.Now;
FileManagementDbContext.SaveChanges();
}
public void MoveItem(FileSystemMoveItemOptions options) {
var item = options.Item;
var destinationDirectory = options.DestinationDirectory;
if(!IsFileItemExists(item))
ThrowItemNotFoundException(item);
if(!IsFileItemExists(destinationDirectory))
ThrowItemNotFoundException(destinationDirectory);
if(!AllowCopyOrMove(item, destinationDirectory))
ThrowNoAccessException();
var fileItem = GetFileItem(item);
fileItem.ParentId = ParseKey(destinationDirectory.Key);
fileItem.Modified = DateTime.Now;
fileItem.ModifiedById = GuestPersonId;
FileManagementDbContext.SaveChanges();
}
public void CopyItem(FileSystemCopyItemOptions options) {
var item = options.Item;
var destinationDirectory = options.DestinationDirectory;
if(!IsFileItemExists(item))
ThrowItemNotFoundException(item);
if(!IsFileItemExists(destinationDirectory))
ThrowItemNotFoundException(destinationDirectory);
if(!AllowCopyOrMove(item, destinationDirectory))
ThrowNoAccessException();
var sourceFileItem = GetFileItem(item);
var copyFileItem = CreateCopy(sourceFileItem);
copyFileItem.ParentId = ParseKey(destinationDirectory.Key);
copyFileItem.Name = GenerateCopiedFileItemName(copyFileItem.ParentId, copyFileItem.Name, copyFileItem.IsDirectory);
FileManagementDbContext.FileItems.Add(copyFileItem);
if(copyFileItem.IsDirectory)
CopyDirectoryContentRecursive(sourceFileItem, copyFileItem);
FileManagementDbContext.SaveChanges();
}
void CopyDirectoryContentRecursive(FileItem sourcePathInfo, FileItem destinationPathInfo) {
foreach(var fileItem in GetDirectoryContents(sourcePathInfo.Id)) {
var copyItem = CreateCopy(fileItem);
copyItem.Parent = destinationPathInfo;
FileManagementDbContext.FileItems.Add(copyItem);
if(fileItem.IsDirectory)
CopyDirectoryContentRecursive(fileItem, copyItem);
}
}
public void DeleteItem(FileSystemDeleteItemOptions options) {
var item = options.Item;
if(!IsFileItemExists(item))
ThrowItemNotFoundException(item);
var fileItem = GetFileItem(item);
FileManagementDbContext.FileItems.Remove(fileItem);
if(fileItem.IsDirectory)
RemoveDirectoryContentRecursive(fileItem.Id);
FileManagementDbContext.SaveChanges();
}
void RemoveDirectoryContentRecursive(int parenDirectoryKey) {
var itemsToRemove = FileManagementDbContext
.FileItems
.Where(item => item.ParentId == parenDirectoryKey)
.Select(item => new FileItem {
Id = item.Id,
IsDirectory = item.IsDirectory
});
foreach(var item in itemsToRemove) {
FileManagementDbContext.FileItems.Remove(item);
}
foreach(var item in itemsToRemove) {
if(!item.IsDirectory) continue;
RemoveDirectoryContentRecursive(item.Id);
}
}
IEnumerable<FileItem> GetDirectoryContents(int parentKey) {
return FileManagementDbContext.FileItems
.OrderByDescending(item => item.IsDirectory)
.ThenBy(item => item.Name)
.Where(items => items.ParentId == parentKey);
}
IDictionary<int, bool> GetHasSubDirectoriesInfo(IEnumerable<FileItem> fileItems) {
var keys = fileItems.Select(i => i.Id).ToArray();
return FileManagementDbContext.FileItems
.Where(item => item.IsDirectory)
.GroupBy(i => i.ParentId)
.Where(i => keys.Contains(i.Key))
.ToDictionary(group => group.Key, group => group.Any());
}
FileItem GetFileItem(FileSystemItemInfo item) {
var itemId = ParseKey(item.Key);
return FileManagementDbContext.FileItems.FirstOrDefault(i => i.Id == itemId);
}
bool IsFileItemExists(FileSystemItemInfo itemInfo) {
var pathKeys = itemInfo.PathKeys.Select(key => ParseKey(key)).ToArray();
var foundEntries = FileManagementDbContext.FileItems
.Where(item => pathKeys.Contains(item.Id))
.Select(item => new { item.Id, item.ParentId, item.Name, item.IsDirectory });
var pathNames = itemInfo.Path.Split(new[] { Path.DirectorySeparatorChar }, StringSplitOptions.RemoveEmptyEntries);
var isDirectoryExists = true;
for(var i = 0; i < pathKeys.Length && isDirectoryExists; i++) {
var entry = foundEntries.FirstOrDefault(e => e.Id == pathKeys[i]);
isDirectoryExists = entry != null && entry.Name == pathNames[i] &&
(i == 0 && entry.ParentId == 0 || entry.ParentId == pathKeys[i - 1]);
if(isDirectoryExists && i < pathKeys.Length - 1)
isDirectoryExists = entry.IsDirectory;
}
return isDirectoryExists;
}
static bool AllowCopyOrMove(FileSystemItemInfo item, FileSystemItemInfo destinationDirectory) {
if(destinationDirectory.PathKeys.Length < item.PathKeys.Length)
return true;
var isValid = false;
for(var i = 0; i < destinationDirectory.PathKeys.Length && !isValid; i++) {
isValid = destinationDirectory.PathKeys[i] != item.PathKeys[i];
}
return isValid;
}
static FileItem CreateCopy(FileItem fileItem) {
return new FileItem {
Name = fileItem.Name,
Created = DateTime.Now,
Modified = DateTime.Now,
IsDirectory = fileItem.IsDirectory,
ModifiedById = GuestPersonId
};
}
static int ParseKey(string key) {
return string.IsNullOrEmpty(key) ? 0 : int.Parse(key);
}
string GenerateCopiedFileItemName(int parentDirKey, string copiedFileItemName, bool isDirectory) {
var dirNames = GetDirectoryContents(parentDirKey)
.Where(i => i.IsDirectory == isDirectory)
.Select(i => i.Name);
string newName;
var fileExtension = isDirectory ? "" : "." + Path.GetExtension(copiedFileItemName);
var copyNamePrefix =
isDirectory ? copiedFileItemName : Path.GetFileNameWithoutExtension(copiedFileItemName);
var index = -1;
do {
var pathPostfix = index < 1 ? string.Empty : $" {index}{fileExtension}";
newName = $"{copyNamePrefix} {(index < 0 ? "" : "copy")}{pathPostfix}";
index++;
} while(dirNames.Contains(newName));
return newName;
}
void ThrowItemNotFoundException(FileSystemItemInfo item) {
var itemType = item.IsDirectory ? "Directory" : "File";
var errorCode = item.IsDirectory ? FileSystemErrorCode.DirectoryNotFound : FileSystemErrorCode.FileNotFound;
string message = $"{itemType} '{item.Path}' not found.";
throw new FileSystemException(errorCode, message);
}
void ThrowNoAccessException() {
string message = "Access denied. The operation cannot be completed.";
throw new FileSystemException(FileSystemErrorCode.NoAccess, message);
}
}
}