Your search did not match any results.
File Manager

Azure Client-Side Binding

This demo illustrates how to use the custom file provider to connect the FileManager widget to the Azure Blob Storage on the client side. The Custom File Provider allows you to implement custom APIs to handle file operations (add, delete, rename, etc.). All APIs that implement access to Azure Blob Storage on the client are stored in the azure-file-system.js file. On the server, configure the Shared Access Signature (SAS) to grant access to blobs in the storage.

Copy to CodeSandBox
Apply
Reset
<div id="wrapper" [class]="wrapperClassName"> <dx-load-panel [position]="{ of: '#file-manager' }" [(visible)]="loadPanelVisible"> </dx-load-panel> <div id="widget-area"> <dx-file-manager id="file-manager" [fileProvider]="fileProvider" [allowedFileExtensions]="allowedFileExtensions"> <!-- uncomment the code below to enable file/directory management --> <!-- <dxo-permissions create="true" copy="true" move="true" remove="true" rename="true" upload="true" download="true"> </dxo-permissions> --> </dx-file-manager> <div id="request-panel"> <div class="request-info" *ngFor="let request of requests"> <div class="parameter-info"> <div class="parameter-name">Method:</div> <div class="parameter-value dx-theme-accent-as-text-color">{{request.method}}</div> </div> <div class="parameter-info"> <div class="parameter-name">Url path:</div> <div class="parameter-value dx-theme-accent-as-text-color">{{request.urlPath}}</div> </div> <div class="parameter-info"> <div class="parameter-name">Query string:</div> <div class="parameter-value dx-theme-accent-as-text-color">{{request.queryString}}</div> </div> <br /> </div> </div> </div> <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="https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureClientBinding/Angular/Light/" target="_blank"> https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureClientBinding/Angular/Light/</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 CustomFileProvider from 'devextreme/ui/file_manager/file_provider/custom'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], preserveWhitespaces: true }) export class AppComponent { allowedFileExtensions: string[]; fileProvider: CustomFileProvider; requests: any[]; wrapperClassName: string; loadPanelVisible: boolean; constructor(http: HttpClient) { const endpointUrl = 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-access'; gateway = new AzureGateway(endpointUrl, this.onRequestExecuted.bind(this)); azure = new AzureFileSystem(gateway); this.allowedFileExtensions = []; this.fileProvider = new CustomFileProvider({ getItems, createDirectory, renameItem, deleteItem, copyItem, moveItem, uploadFileChunk, downloadItems }); this.requests = []; this.wrapperClassName = ''; this.loadPanelVisible = true; this.checkAzureStatus(http); } onRequestExecuted({method, urlPath, queryString}) { const request = { method, urlPath, queryString }; this.requests.unshift(request); } checkAzureStatus(http: HttpClient) { http.get('https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-status?widgetType=fileManager') .toPromise() .then(result => { this.wrapperClassName = result.active ? 'show-widget' : 'show-message'; this.loadPanelVisible = false; }); } } function getItems(pathInfo) { const path = getPath(pathInfo); return azure.getItems(path); } function createDirectory(parentDirectory, name) { const path = getPath(parentDirectory.getFullPathInfo()); return azure.createDirectory(path, name); } function renameItem(item, name) { const path = getPath(item.getFullPathInfo()); return item.isDirectory ? azure.renameDirectory(path, name) : azure.renameFile(path, name); } function deleteItem(item) { const path = getPath(item.getFullPathInfo()); return item.isDirectory ? azure.deleteDirectory(path) : azure.deleteFile(path); } function copyItem(item, destinationDirectory) { const sourcePath = getPath(item.getFullPathInfo()); const destinationDirPath = getPath(destinationDirectory.getFullPathInfo()); const destinationPath = destinationDirPath ? destinationDirPath + '/' + item.name : item.name; return item.isDirectory ? azure.copyDirectory(sourcePath, destinationPath) : azure.copyFile(sourcePath, destinationPath); } function moveItem(item, destinationDirectory) { const sourcePath = getPath(item.getFullPathInfo()); const destinationDirPath = getPath(destinationDirectory.getFullPathInfo()); const destinationPath = destinationDirPath ? destinationDirPath + '/' + item.name : item.name; return item.isDirectory ? azure.moveDirectory(sourcePath, destinationPath) : azure.moveFile(sourcePath, destinationPath); } function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { let promise = null; if(uploadInfo.chunkIndex === 0) { const path = getPath(destinationDirectory.getFullPathInfo()); const filePath = path ? path + '/' + fileData.name : fileData.name; promise = gateway.getUploadAccessUrl(filePath).done(accessUrl => { uploadInfo.customData.accessUrl = accessUrl; }); } else { promise = Promise.resolve(); } promise = promise.then(() => gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob)); if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { promise = promise.then(() => gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount)); } return promise; } function downloadItems(items) { const item = items[0]; const path = getPath(item.getFullPathInfo()); azure.downloadFile(path); } function getPath(pathInfo) { return pathInfo.map(part => part.name).join('/'); } let gateway = null; let azure = null; @NgModule({ imports: [ BrowserModule, DxFileManagerModule, DxLoadPanelModule, HttpClientModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
#widget-area { visibility: hidden; } #message-box { display: none; } .show-widget #widget-area { visibility: visible; } .show-message #widget-area { display: none; } .show-message #message-box { display: block; } #request-panel { min-width: 505px; height: 400px; overflow-x: hidden; overflow-y: auto; padding: 18px; margin-top: 40px; background-color: rgba(191, 191, 191, 0.15); } #request-panel .parameter-info { display: flex; } .request-info .parameter-name { flex: 0 0 100px; } .request-info .parameter-name, .request-info .parameter-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
// 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: "system", 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': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', '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@0.1.54', 'devexpress-gantt': 'npm:devexpress-gantt@0.0.29', 'devextreme-angular': 'npm:devextreme-angular@19.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@19.2/*/package.json", "npm:devextreme-angular@19.2/ui/*/package.json", ] });
<!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.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.7/css/dx-gantt.css" /> <script src="js/azure-file-system.js"></script> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/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>