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 UI 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.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

ASP.NET Core

ASP.NET MVC

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 provider = new DevExpress.fileManagement.RemoteFileSystemProvider({ endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-azure" }); $("#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="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.5.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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.2.5/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/" target="_blank"> 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; }