Free Trial Buy
    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    ASP.NET Core

    ASP.NET MVC

    Backend API

    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/21.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.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="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; }