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.). On the server, configure the Shared Access Signature (SAS) to grant access to blobs in the storage.

Copy to CodePen
Apply
Reset
$(function() { var loadPanel = $("#load-panel").dxLoadPanel({ position: { of: "#file-manager" } }).dxLoadPanel("instance"); $.ajax({ url: "https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-status?widgetType=fileManager", success: function(result) { var className = result.active ? "show-widget" : "show-message"; $("#wrapper").addClass(className); loadPanel.hide(); } }); var endpointUrl = "https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-access"; gateway = new AzureGateway(endpointUrl, onRequestExecuted); azure = new AzureFileSystem(gateway); $("#file-manager").dxFileManager({ fileProvider: new DevExpress.fileProviders.Custom({ getItems: getItems, createDirectory: createDirectory, renameItem: renameItem, deleteItem: deleteItem, copyItem: copyItem, moveItem: moveItem, uploadFileChunk: uploadFileChunk, downloadItems: downloadItems }), allowedFileExtensions: [], upload: { maxFileSize: 1048576 }, permissions: { download: true // uncomment the code below to enable file/directory management /* create: true, copy: true, move: true, remove: true, rename: true, upload: true */ } }); }); function getItems(pathInfo) { var path = getPath(pathInfo); return azure.getItems(path); } function createDirectory(parentDirectory, name) { var path = getPath(parentDirectory.getFullPathInfo()); return azure.createDirectory(path, name); } function renameItem(item, name) { var path = getPath(item.getFullPathInfo()); return item.isDirectory ? azure.renameDirectory(path, name) : azure.renameFile(path, name); } function deleteItem(item) { var path = getPath(item.getFullPathInfo()); return item.isDirectory ? azure.deleteDirectory(path) : azure.deleteFile(path); } function copyItem(item, destinationDirectory) { var sourcePath = getPath(item.getFullPathInfo()); var destinationDirPath = getPath(destinationDirectory.getFullPathInfo()); var destinationPath = destinationDirPath ? destinationDirPath + "/" + item.name : item.name; return item.isDirectory ? azure.copyDirectory(sourcePath, destinationPath) : azure.copyFile(sourcePath, destinationPath); } function moveItem(item, destinationDirectory) { var sourcePath = getPath(item.getFullPathInfo()); var destinationDirPath = getPath(destinationDirectory.getFullPathInfo()); var destinationPath = destinationDirPath ? destinationDirPath + "/" + item.name : item.name; return item.isDirectory ? azure.moveDirectory(sourcePath, destinationPath) : azure.moveFile(sourcePath, destinationPath); } function uploadFileChunk(fileData, uploadInfo, destinationDirectory) { var deferred = null; if(uploadInfo.chunkIndex === 0) { var path = getPath(destinationDirectory.getFullPathInfo()); var filePath = path ? path + "/" + fileData.name : fileData.name; deferred = gateway.getUploadAccessUrl(filePath).done(function(accessUrl) { uploadInfo.customData.accessUrl = accessUrl; }); } else { deferred = $.Deferred().resolve().promise(); } deferred = deferred.then(function() { return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob); }); if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) { deferred = deferred.then(function() { return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount); }); } return deferred; } function downloadItems(items) { var item = items[0]; var path = getPath(item.getFullPathInfo()); azure.downloadFile(path); } function getPath(pathInfo) { return pathInfo.map(function(part) { return part.name; }).join("/"); } function onRequestExecuted(e) { $("<div>").addClass("request-info").append( createParameterInfoDiv("Method:", e.method), createParameterInfoDiv("Url path:", e.urlPath), createParameterInfoDiv("Query string:", e.queryString), $("<br>") ) .prependTo("#request-panel"); } function createParameterInfoDiv(name, value) { return $("<div>").addClass("parameter-info").append( $("<div>").addClass("parameter-name").text(name), $("<div>").addClass("parameter-value dx-theme-accent-as-text-color").text(value).attr("title", value) ); } var gateway = null; var azure = null;
<!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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="utils/azure-file-system.js"></script> <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" /> <script src="https://cdn3.devexpress.com/jslib/19.2.4/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="wrapper"> <div id="widget-area"> <div id="file-manager"></div> <div id="request-panel"></div> </div> <div id="load-panel"></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/AzureServerBinding/jQuery/Light/"> https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureServerBinding/jQuery/Light/</a> to see the demo online. </div> </div> </div> </body> </html>
#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; }