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"; var gateway = new AzureGateway(endpointUrl); var azure = new AzureFileSystem(gateway); var getItems = function(pathInfo) { var path = getPath(pathInfo); return azure.getItems(path); }; var createDirectory = function(parentDirectory, name) { var path = getPath(parentDirectory.getFullPathInfo()); return azure.createDirectory(path, name); }; var renameItem = function(item, name) { var path = getPath(item.getFullPathInfo()); return item.isDirectory ? azure.renameDirectory(path, name) : azure.renameFile(path, name); }; var deleteItem = function(item) { var path = getPath(item.getFullPathInfo()); return item.isDirectory ? azure.deleteDirectory(path) : azure.deleteFile(path); }; var copyItem = function(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); }; var moveItem = function(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); }; var uploadFileChunk = function(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; }; var downloadItems = function(items) { var item = items[0]; var path = getPath(item.getFullPathInfo()); azure.downloadFile(path); }; var getPath = function(pathInfo) { return pathInfo.map(function(part) { return part.name; }).join("/"); }; $("#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 */ } }); });
<!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.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.3/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="file-manager"></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>
#wrapper #file-manager { visibility: hidden; } #wrapper #message-box { display: none; } #wrapper.show-widget #file-manager { visibility: visible; } #wrapper.show-message #file-manager { display: none; } #wrapper.show-message #message-box { display: block; }