Your search did not match any results.
File Manager

Entity Framework ORM

The File Manager widget allows you to manage file system items that use the Entity Framework ORM to link to a database. You can use the Remote File Provider to connect to the file system on the client side. To process the widget's HTTP requests on the server, create your own file provider, which implements the IFileProvider interface.

Copy to CodeSandBox
Apply
Reset
<dx-file-manager id="fileManager" [fileProvider]="remoteProvider" currentPath="Documents/Reports" [allowedFileExtensions]="allowedFileExtensions" [customizeDetailColumns]="customizeDetailColumns"> <dxo-permissions create="true" copy="true" move="true" remove="true" rename="true"> </dxo-permissions> </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 RemoteFileProvider from 'devextreme/ui/file_manager/file_provider/remote'; 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: RemoteFileProvider; constructor() { this.allowedFileExtensions = []; this.remoteProvider = new RemoteFileProvider({ endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-db" }); } customizeDetailColumns(columns){ var fileSizeColumn = columns.filter(function(c) { return c.dataField === "fileSize"; })[0]; columns.splice(columns.indexOf(fileSizeColumn), 1); var modifiedColumn = columns.filter(function(c) { return c.dataField === "dateModified"; })[0]; modifiedColumn.caption = "Modified"; columns.push({ caption: "Created", dataField: "created", dataType: "date" }); columns.push({ visibleIndex: 2, caption: "Modified By", dataField: "modifiedBy" }); return columns; } } @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/ System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular/core': 'npm:@angular/core@8.0.0/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@8.0.0/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@8.0.0/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@8.0.0/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@8.0.0/bundles/platform-browser-dynamic.umd.js', '@angular/router': 'npm:@angular/router@8.0.0/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@8.0.0/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@8.0.0/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@6.3.3', 'rxjs/operators': 'npm:rxjs@6.3.3/operators', 'devextreme': 'npm:devextreme@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt@0.0.8/dist/dx-gantt.js', 'devextreme-angular': 'npm:devextreme-angular@19.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'rxjs': { main: 'index.js', defaultExtension: 'js' }, 'rxjs/operators': { main: 'index.js', defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/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.6.25/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>