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 CodePen
$(function() { var loadPanel = $("#load-panel").dxLoadPanel({ position: { of: "#file-manager" } }).dxLoadPanel("instance"); $.ajax({ url: "", success: function(result) { var className = ? "show-widget" : "show-message"; $("#wrapper").addClass(className); loadPanel.hide(); } }); var provider = new DevExpress.fileManagement.RemoteFileSystemProvider({ endpointUrl: "" }); $("#file-manager").dxFileManager({ name: "fileManager", fileSystemProvider: provider, permissions: { download: true // uncomment the code below to enable file/directory management /* create: true, copy: true, move: true, delete: true, rename: true, upload: true */ }, allowedFileExtensions: [] }); });
<!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" /> <script src=""></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></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="" target="_blank"></a> to see the demo online. </div> </div> </div> </body> </html>
#wrapper #file-manager { visibility: hidden; } #wrapper #message-box { display: none; } #file-manager { visibility: visible; } #file-manager { display: none; } #message-box { display: block; }