Your search did not match any results.
File Manager

Azure Server-Side Binding

This demo illustrates how to configure the FileManager to manage files and folders in Microsoft Azure Blob Storage. To access the Azure Blob Storage, the component uses the Remote File System Provider. This file system provider allows you to access the storage's file system on the client side. To process the HTTP requests on the server, create your own file system provider that implements the IFileSystemItemLoader, IFileSystemItemEditor, IFileUploader and IFileContentProvider interfaces.

Copy to CodeSandBox
<div id="wrapper" [class]="wrapperClassName"> <dx-load-panel [position]="{ of: '#file-manager' }" [(visible)]="loadPanelVisible"> </dx-load-panel> <dx-file-manager id="file-manager" [fileSystemProvider]="fileSystemProvider" [allowedFileExtensions]="allowedFileExtensions"> <!-- uncomment the code below to enable file/directory management --> <!-- <dxo-permissions create="true" copy="true" move="true" delete="true" rename="true" upload="true" download="true"> </dxo-permissions> --> </dx-file-manager> <div id="message-box"> To run the demo locally, specify your Azure storage account name, access key and container name in the web.config file. Refer to the <a href="" target="_blank"></a> to see the demo online. </div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { DxFileManagerModule, DxLoadPanelModule } from 'devextreme-angular'; import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider'; if(!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true }) export class AppComponent { allowedFileExtensions: string[]; fileSystemProvider: RemoteFileSystemProvider; wrapperClassName: string; loadPanelVisible: boolean; constructor(http: HttpClient) { this.allowedFileExtensions = []; this.fileSystemProvider = new RemoteFileSystemProvider({ endpointUrl: "" }); this.wrapperClassName = ''; this.loadPanelVisible = true; this.checkAzureStatus(http); } checkAzureStatus(http: HttpClient) { http.get('') .toPromise() .then(result => { this.wrapperClassName = ? 'show-widget' : 'show-message'; this.loadPanelVisible = false; }); } } @NgModule({ imports: [ BrowserModule, DxFileManagerModule, DxLoadPanelModule, HttpClientModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
#wrapper #file-manager { visibility: hidden; } #wrapper #message-box { display: none; } #file-manager { visibility: visible; } #file-manager { display: none; } #message-box { display: block; }
// 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: // System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': '' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.2.0/tslib.js', 'rxjs': 'npm:rxjs@6.4.0', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.7', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.23', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.29', 'devextreme-angular': 'npm:devextreme-angular@20.2.6', 'preact': 'npm:preact@10.5.13/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.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' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns=""> <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="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></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>