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.
<template>
<DxFileManager
:file-system-provider="remoteProvider"
:allowed-file-extensions="allowedFileExtensions"
:height="550"
current-path="Documents/Reports"
>
<DxPermissions
:create="true"
:copy="true"
:move="true"
:delete="true"
:rename="true"
/>
<DxItemView>
<DxDetails>
<DxColumn data-field="thumbnail"/>
<DxColumn data-field="name"/>
<DxColumn
data-field="dateModified"
caption="Modified"
/>
<DxColumn
data-field="created"
caption="Created"
data-type="date"
/>
<DxColumn
data-field="modifiedBy"
caption="Modified By"
:visible-index="2"
/>
</DxDetails>
</DxItemView>
</DxFileManager>
</template>
<script>
import {
DxFileManager, DxPermissions, DxItemView, DxDetails, DxColumn,
} from 'devextreme-vue/file-manager';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
const remoteProvider = new RemoteFileSystemProvider({
endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-db',
});
const allowedFileExtensions = [];
export default {
components: {
DxFileManager,
DxPermissions,
DxItemView,
DxDetails,
DxColumn,
},
data() {
return {
remoteProvider,
allowedFileExtensions,
};
},
};
</script>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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/23.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx-gantt.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme-vue': 'npm:devextreme-vue@23.1.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/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/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);
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);
}
}
}