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 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);
$("#file-manager").dxFileManager({
fileProvider: new DevExpress.fileProviders.Custom({
getItems: getItems,
createDirectory: createDirectory,
renameItem: renameItem,
deleteItem: deleteItem,
copyItem: copyItem,
moveItem: moveItem,
uploadFileChunk: uploadFileChunk,
downloadItems: downloadItems
}),
allowedFileExtensions: [],
upload: {
maxFileSize: 1048576
},
permissions: {
download: true
// uncomment the code below to enable file/directory management
/* create: true,
copy: true,
move: true,
remove: true,
rename: true,
upload: true */
}
});
});
function getItems(pathInfo) {
var path = getPath(pathInfo);
return azure.getItems(path);
}
function createDirectory(parentDirectory, name) {
var path = getPath(parentDirectory.getFullPathInfo());
return azure.createDirectory(path, name);
}
function renameItem(item, name) {
var path = getPath(item.getFullPathInfo());
return item.isDirectory ? azure.renameDirectory(path, name) : azure.renameFile(path, name);
}
function deleteItem(item) {
var path = getPath(item.getFullPathInfo());
return item.isDirectory ? azure.deleteDirectory(path) : azure.deleteFile(path);
}
function copyItem(item, destinationDirectory) {
var sourcePath = getPath(item.getFullPathInfo());
var destinationDirPath = getPath(destinationDirectory.getFullPathInfo());
var destinationPath = destinationDirPath ? destinationDirPath + "/" + item.name : item.name;
return item.isDirectory ? azure.copyDirectory(sourcePath, destinationPath) : azure.copyFile(sourcePath, destinationPath);
}
function moveItem(item, destinationDirectory) {
var sourcePath = getPath(item.getFullPathInfo());
var destinationDirPath = getPath(destinationDirectory.getFullPathInfo());
var destinationPath = destinationDirPath ? destinationDirPath + "/" + item.name : item.name;
return item.isDirectory ? azure.moveDirectory(sourcePath, destinationPath) : azure.moveFile(sourcePath, destinationPath);
}
function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
var deferred = null;
if(uploadInfo.chunkIndex === 0) {
var path = getPath(destinationDirectory.getFullPathInfo());
var filePath = path ? 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;
}
function downloadItems(items) {
var item = items[0];
var path = getPath(item.getFullPathInfo());
azure.downloadFile(path);
}
function getPath(pathInfo) {
return pathInfo.map(function(part) { return part.name; }).join("/");
}
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.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="js/azure-file-system.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.2.6/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;
}