Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
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 System Provider allows you to implement custom APIs to handle file operations (add, delete, rename, etc.). All APIs that implement access to Azure Blob Storage on the client are stored in the azure-file-system.js file. On the server, configure the Shared Access Signature (SAS) to grant access to blobs in the storage.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(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";
gateway = new AzureGateway(endpointUrl, onRequestExecuted);
azure = new AzureFileSystem(gateway);
var provider = new DevExpress.fileManagement.CustomFileSystemProvider({
getItems: getItems,
createDirectory: createDirectory,
renameItem: renameItem,
deleteItem: deleteItem,
copyItem: copyItem,
moveItem: moveItem,
uploadFileChunk: uploadFileChunk,
downloadItems: downloadItems
});
$("#file-manager").dxFileManager({
fileSystemProvider: provider,
allowedFileExtensions: [],
upload: {
maxFileSize: 1048576
},
permissions: {
download: true
// uncomment the code below to enable file/directory management
/* create: true,
copy: true,
move: true,
delete: true,
rename: true,
upload: true */
}
});
});
function getItems(parentDirectory) {
return azure.getItems(parentDirectory.path);
}
function createDirectory(parentDirectory, name) {
return azure.createDirectory(parentDirectory.path, name);
}
function renameItem(item, name) {
return item.isDirectory ? azure.renameDirectory(item.path, name) : azure.renameFile(item.path, name);
}
function deleteItem(item) {
return item.isDirectory ? azure.deleteDirectory(item.path) : azure.deleteFile(item.path);
}
function copyItem(item, destinationDirectory) {
var destinationPath = destinationDirectory.path ? destinationDirectory.path + "/" + item.name : item.name;
return item.isDirectory ? azure.copyDirectory(item.path, destinationPath) : azure.copyFile(item.path, destinationPath);
}
function moveItem(item, destinationDirectory) {
var destinationPath = destinationDirectory.path ? destinationDirectory.path + "/" + item.name : item.name;
return item.isDirectory ? azure.moveDirectory(item.path, destinationPath) : azure.moveFile(item.path, destinationPath);
}
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
var deferred = null;
if(uploadInfo.chunkIndex === 0) {
var filePath = destinationDirectory.path ? destinationDirectory.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.promise();
}
function downloadItems(items) {
azure.downloadFile(items[0].path);
}
function onRequestExecuted(e) {
$("<div>").addClass("request-info").append(
createParameterInfoDiv("Method:", e.method),
createParameterInfoDiv("Url path:", e.urlPath),
createParameterInfoDiv("Query string:", e.queryString),
$("<br>")
)
.prependTo("#request-panel");
}
function createParameterInfoDiv(name, value) {
return $("<div>").addClass("parameter-info").append(
$("<div>").addClass("parameter-name").text(name),
$("<div>").addClass("parameter-value dx-theme-accent-as-text-color").text(value).attr("title", value)
);
}
var gateway = null;
var azure = null;
<!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>
<script src="../azure-file-system.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.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="widget-area">
<div id="file-manager"></div>
<div id="request-panel"></div>
</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/AzureClientBinding/jQuery/Light/" target="_blank">
https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureClientBinding/jQuery/Light/</a>
to see the demo online.
</div>
</div>
</div>
</body>
</html>
#widget-area {
visibility: hidden;
}
#message-box {
display: none;
}
.show-widget #widget-area {
visibility: visible;
}
.show-message #widget-area {
display: none;
}
.show-message #message-box {
display: block;
}
#request-panel {
min-width: 505px;
height: 400px;
overflow-x: hidden;
overflow-y: auto;
padding: 18px;
margin-top: 40px;
background-color: rgba(191, 191, 191, 0.15);
}
#request-panel .parameter-info {
display: flex;
}
.request-info .parameter-name {
flex: 0 0 100px;
}
.request-info .parameter-name,
.request-info .parameter-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}