Your search did not match any results.
File Manager

Azure Server-Side Binding

This demo illustrates how to configure the FileManager widget to manage files and folders in Microsoft Azure Blob Storage. To access the Azure Blob Storage, the widget uses the Remote File Provider. This file 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 provider to implement the IFileProvider interface.

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(); } }); $("#file-manager").dxFileManager({ name: "fileManager", fileProvider: new DevExpress.fileProviders.Remote({ endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-azure" }), permissions: { download: true // uncomment the code below to enable file/directory management /* create: true, copy: true, move: true, remove: true, rename: true, upload: true */ }, allowedFileExtensions: [] }); });
<!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> <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; }