@model DevExtreme.MVC.Demos.Models.FileManagement.AzureStorageAccount
@if(!Model.IsEmpty()) {
@(Html.DevExtreme().FileManager()
.ID("file-manager")
.FileSystemProvider(provider => provider.Custom()
.GetItems("getItems")
.CreateDirectory("createDirectory")
.RenameItem("renameItem")
.DeleteItem("deleteItem")
.CopyItem("copyItem")
.MoveItem("moveItem")
.UploadFileChunk("uploadFileChunk")
.DownloadItems("downloadItems")
)
.Permissions(permissions => {
permissions.Download(true);
// uncomment the code below to enable file/folder management
// permissions.Create(true);
// permissions.Copy(true);
// permissions.Move(true);
// permissions.Delete(true);
// permissions.Rename(true);
// permissions.Upload(true);
})
.Upload(upload => upload.MaxFileSize(1048576))
.AllowedFileExtensions(new string[0])
)
<text>
<div id="request-panel"></div>
<script src="~/Scripts/utils/azure.file.system.js"></script>
<script>
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 promise = null;
if(uploadInfo.chunkIndex === 0) {
var filePath = destinationDirectory.path ? destinationDirectory.path + "/" + fileData.name : fileData.name;
promise = gateway.getUploadAccessUrl(filePath).then(function(accessUrls) {
uploadInfo.customData.accessUrl = accessUrls.url1;
});
} else {
promise = Promise.resolve();
}
promise = promise.then(function() {
return gateway.putBlock(uploadInfo.customData.accessUrl, uploadInfo.chunkIndex, uploadInfo.chunkBlob);
});
if(uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
promise = promise.then(function() {
return gateway.putBlockList(uploadInfo.customData.accessUrl, uploadInfo.chunkCount);
});
}
return 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 endpointUrl = '@Url.HttpRouteUrl("FileManagerAzureAccessApi", null)';
var gateway = new AzureGateway(endpointUrl, onRequestExecuted);
var azure = new AzureFileSystem(gateway);
</script>
</text>
}
else {
<text>
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/Mvc/Light/" target="_blank">
https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureClientBinding/Mvc/Light/
</a> to see the demo online.
</text>
}
using DevExtreme.MVC.Demos.Models.FileManagement;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class FileManagerController : Controller {
public ActionResult AzureClientBinding() {
return View(AzureStorageAccount.FileManager.Value);
}
}
}
using DevExtreme.MVC.Demos.Models.FileManagement;
using System;
using System.Net.Http;
using System.Web.Http;
using Azure.Storage;
using Azure.Storage.Sas;
using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Azure.Storage.Blobs.Specialized;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class FileManagerAzureAccessApiController : ApiController {
const string EmptyDirDummyBlobName = "aspxAzureEmptyFolderBlob";
const string ServiceUri = "https://{0}.blob.core.windows.net";
const long MaxBlobSize = 1048576;
public FileManagerAzureAccessApiController() {
AllowDownload = true;
//uncomment the code below to enable file/folder management
//AllowCreate = true;
//AllowRemove = true;
//AllowRenameOrMoveOrCopy = true;
//AllowUpload = true;
}
bool AllowCreate { get; }
bool AllowRemove { get; }
bool AllowRenameOrMoveOrCopy { get; }
bool AllowUpload { get; }
bool AllowDownload { get; }
BlobServiceClient _client;
BlobServiceClient Client {
get {
if(_client == null) {
AzureStorageAccount accountModel = AzureStorageAccount.FileManager.Value;
StorageSharedKeyCredential credential = new StorageSharedKeyCredential(accountModel.AccountName, accountModel.AccessKey);
_client = new BlobServiceClient(new Uri(string.Format(ServiceUri, accountModel.AccountName)), credential);
}
return _client;
}
}
BlobContainerClient _container;
BlobContainerClient Container {
get {
if(_container == null) {
AzureStorageAccount accountModel = AzureStorageAccount.FileManager.Value;
_container = Client.GetBlobContainerClient(accountModel.ContainerName);
}
return _container;
}
}
[HttpGet]
[Route("api/file-manager-azure-access", Name = "FileManagerAzureAccessApi")]
public HttpResponseMessage Process(string command, string blobName = null, string blobName2 = null) {
object result;
try {
result = ProcessCommand(command, blobName, blobName2);
} catch {
result = CreateErrorResult();
}
return Request.CreateResponse(result);
}
object ProcessCommand(string command, string blobName, string blobName2) {
switch(command) {
case "BlobList":
return GetBlobList();
case "CreateDirectory":
if(!AllowCreate)
return CreateErrorResult();
return CreateDirectory(blobName);
case "DeleteBlob":
if(!AllowRemove)
return CreateErrorResult();
return DeleteBlob(blobName);
case "CopyBlob":
if(!AllowRenameOrMoveOrCopy)
return CreateErrorResult();
return CopyBlob(blobName, blobName2);
case "UploadBlob":
if(!AllowUpload)
return CreateErrorResult();
return UploadBlob(blobName);
case "GetBlob":
if(!AllowDownload)
return CreateErrorResult();
return GetBlob(blobName);
}
return null;
}
object GetBlobList() {
if(Container.CanGenerateSasUri) {
var sasUri = Container.GenerateSasUri(BlobContainerSasPermissions.List, DateTimeOffset.UtcNow.AddHours(1));
return CreateSuccessResult(sasUri);
} else {
return CreateErrorResult("BlobContainerClient cannot generate SasUri");
}
}
object CreateDirectory(string directoryName) {
string blobName = $"{directoryName}/{EmptyDirDummyBlobName}";
var blob = Container.GetBlobClient(blobName);
if(blob.Exists()) {
return CreateErrorResult();
}
var sasUri = TryGetBlobUri(blob, BlobSasPermissions.Write);
if(sasUri != null) {
return CreateSuccessResult(sasUri);
} else {
return CreateErrorResult("BlobClient cannot generate SasUri");
}
}
object DeleteBlob(string blobName) {
var sasUri = TryGetBlobUri(blobName, BlobSasPermissions.Delete);
if(sasUri != null) {
return CreateSuccessResult(sasUri);
} else {
return CreateErrorResult("BlobClient cannot generate SasUri");
}
}
object CopyBlob(string sourceBlobName, string destinationBlobName) {
var sourceSasUri = TryGetBlobUri(sourceBlobName, BlobSasPermissions.Read);
var destinationSasUri = TryGetBlobUri(destinationBlobName, BlobSasPermissions.Create);
if(sourceSasUri != null && destinationSasUri != null) {
return CreateSuccessResult(sourceSasUri, destinationSasUri);
} else {
return CreateErrorResult("BlobClient cannot generate SasUri");
}
}
object UploadBlob(string blobName) {
if(blobName.EndsWith("/"))
return CreateErrorResult("Invalid blob name.");
var blob = Container.GetBlockBlobClient(blobName);
if(blob.Exists() && blob.GetProperties().Value.ContentLength > MaxBlobSize) {
return CreateErrorResult();
}
var sasUri = TryGetBlobUri(blobName, BlobSasPermissions.Write);
return CreateSuccessResult(sasUri);
}
object GetBlob(string blobName) {
var headers = new BlobHttpHeaders {
ContentType = "application/octet-stream"
};
var blob = Container.GetBlobClient(blobName);
blob.SetHttpHeaders(headers);
var sasUri = TryGetBlobUri(blob, BlobSasPermissions.Read);
return CreateSuccessResult(sasUri);
}
Uri TryGetBlobUri(string blobName, BlobSasPermissions permissions) {
if(!string.IsNullOrEmpty(blobName)) {
return TryGetBlobUri(Container.GetBlobClient(blobName), permissions);
} else {
return null;
}
}
Uri TryGetBlobUri(BlobClient blob, BlobSasPermissions permissions) {
if(blob.CanGenerateSasUri) {
return blob.GenerateSasUri(permissions, DateTimeOffset.UtcNow.AddHours(1));
} else {
return null;
}
}
object CreateSuccessResult(Uri uri, Uri uri2 = null) {
return new {
success = true,
accessUrl = uri.AbsoluteUri,
accessUrl2 = uri2 != null ? uri2.AbsoluteUri : null
};
}
object CreateErrorResult(string error = null) {
if(string.IsNullOrEmpty(error))
error = "Unspecified error.";
return new {
success = false,
error = error
};
}
}
}
class AzureFileSystem {
constructor(azureGateway) {
this.gateway = azureGateway;
this.EMPTY_DIR_DUMMY_BLOB_NAME = 'aspxAzureEmptyFolderBlob';
}
getItems(path) {
var prefix = this.getDirectoryBlobName(path);
return this.gateway.getBlobList(prefix).then((entries) => this.getDataObjectsFromEntries(entries, prefix));
}
createDirectory(path, name) {
var blobName = path ? `${path}/${name}` : name;
return this.gateway.createDirectoryBlob(blobName);
}
renameFile(path, name) {
var newPath = this.getPathWithNewName(path, name);
return this.moveFile(path, newPath);
}
renameDirectory(path, name) {
var newPath = this.getPathWithNewName(path, name);
return this.moveDirectory(path, newPath);
}
getPathWithNewName(path, name) {
var parts = path.split('/');
parts[parts.length - 1] = name;
return parts.join('/');
}
deleteFile(path) {
return this.gateway.deleteBlob(path);
}
deleteDirectory(path) {
var prefix = this.getDirectoryBlobName(path);
return this.executeActionForEachEntry(prefix, (entry) => this.gateway.deleteBlob(entry.name));
}
copyFile(sourcePath, destinationPath) {
return this.gateway.copyBlob(sourcePath, destinationPath);
}
copyDirectory(sourcePath, destinationPath) {
var prefix = this.getDirectoryBlobName(sourcePath);
var destinationKey = this.getDirectoryBlobName(destinationPath);
return this.executeActionForEachEntry(prefix, (entry) => this.copyEntry(entry, prefix, destinationKey));
}
copyEntry(entry, sourceKey, destinationKey) {
var restName = entry.name.substr(sourceKey.length);
var newDestinationKey = destinationKey + restName;
return this.gateway.copyBlob(entry.name, newDestinationKey);
}
moveFile(sourcePath, destinationPath) {
return this.gateway.copyBlob(sourcePath, destinationPath).then(() => this.gateway.deleteBlob(sourcePath));
}
moveDirectory(sourcePath, destinationPath) {
var prefix = this.getDirectoryBlobName(sourcePath);
var destinationKey = this.getDirectoryBlobName(destinationPath);
return this.executeActionForEachEntry(prefix, (entry) => this.copyEntry(entry, prefix, destinationKey).then(() => this.gateway.deleteBlob(entry.name)));
}
downloadFile(path) {
this.gateway.getBlobUrl(path).then((accessUrls) => {
window.location.href = accessUrls.url1;
});
}
executeActionForEachEntry(prefix, action) {
return this.gateway.getBlobList(prefix).then((entries) => {
var deferreds = entries.map((entry) => action(entry));
return Promise.all(deferreds);
});
}
getDataObjectsFromEntries(entries, prefix) {
var result = [];
var directories = {};
entries.forEach((entry) => {
var restName = entry.name.substr(prefix.length);
var parts = restName.split('/');
if (parts.length === 1) {
if (restName !== this.EMPTY_DIR_DUMMY_BLOB_NAME) {
var obj = {
name: restName,
isDirectory: false,
dateModified: entry.lastModified,
size: entry.length,
};
result.push(obj);
}
}
else {
var dirName = parts[0];
var directory = directories[dirName];
if (!directory) {
directory = {
name: dirName,
isDirectory: true,
};
directories[dirName] = directory;
result.push(directory);
}
if (!directory.hasSubDirectories) {
directory.hasSubDirectories = parts.length > 2;
}
}
});
result.sort(this.compareDataObjects);
return result;
}
compareDataObjects(obj1, obj2) {
if (obj1.isDirectory === obj2.isDirectory) {
var name1 = obj1.name.toLowerCase();
var name2 = obj2.name.toLowerCase();
if (name1 < name2) {
return -1;
}
return name1 > name2 ? 1 : 0;
}
return obj1.isDirectory ? -1 : 1;
}
getDirectoryBlobName(path) {
return path ? `${path}/` : path;
}
}
class AzureGateway {
constructor(endpointUrl, onRequestExecuted) {
this.endpointUrl = endpointUrl;
this.onRequestExecuted = onRequestExecuted;
}
getBlobList(prefix) {
return this.getAccessUrl('BlobList')
.then((accessUrls) => this.executeBlobListRequest(accessUrls.url1, prefix))
.then((xml) => this.parseEntryListResult(xml));
}
parseEntryListResult(xmlString) {
var xml = new DOMParser().parseFromString(xmlString, 'text/xml');
return Array.from(xml.querySelectorAll('Blob')).map(this.parseEntry);
}
parseEntry(xmlEntry) {
var entry = {};
entry.etag = xmlEntry.querySelector('Etag').textContent;
entry.name = xmlEntry.querySelector('Name').textContent;
var dateStr = xmlEntry.querySelector('Last-Modified').textContent;
entry.lastModified = new Date(dateStr);
var lengthStr = xmlEntry.querySelector('Content-Length').textContent;
entry.length = parseInt(lengthStr, 10);
return entry;
}
executeBlobListRequest(accessUrl, prefix) {
var params = {
restype: 'container',
comp: 'list',
};
if (prefix) {
params.prefix = prefix;
}
return this.executeRequest(accessUrl, params);
}
createDirectoryBlob(name) {
return this.getAccessUrl('CreateDirectory', name).then((accessUrls) => this.executeRequest({
url: accessUrls.url1,
method: 'PUT',
headers: {
'x-ms-blob-type': 'BlockBlob',
},
processData: false,
contentType: false,
}));
}
deleteBlob(name) {
return this.getAccessUrl('DeleteBlob', name).then((accessUrls) => this.executeRequest({
url: accessUrls.url1,
method: 'DELETE',
}));
}
copyBlob(sourceName, destinationName) {
return this.getAccessUrl('CopyBlob', sourceName, destinationName).then((accessUrls) => this.executeRequest({
url: accessUrls.url2,
method: 'PUT',
headers: {
'x-ms-copy-source': accessUrls.url1,
},
}));
}
putBlock(uploadUrl, blockIndex, blockBlob) {
var blockId = this.getBlockId(blockIndex);
var params = {
comp: 'block',
blockid: blockId,
};
return this.executeRequest({
url: uploadUrl,
method: 'PUT',
data: blockBlob,
processData: false,
contentType: false,
}, params);
}
putBlockList(uploadUrl, blockCount) {
var content = this.getBlockListContent(blockCount);
var params = {
comp: 'blocklist',
};
return this.executeRequest({
url: uploadUrl,
method: 'PUT',
data: content,
}, params);
}
getBlockListContent(blockCount) {
var contentParts = [
'<?xml version="1.0" encoding="utf-8"?>',
'<BlockList>',
];
for (var i = 0; i < blockCount; i++) {
var blockContent = ` <Latest>${this.getBlockId(i)}</Latest>`;
contentParts.push(blockContent);
}
contentParts.push('</BlockList>');
return contentParts.join('\n');
}
getBlockId(blockIndex) {
var res = `${blockIndex}`;
while (res.length < 10) {
res = `0${res}`;
}
return window.btoa(res);
}
getUploadAccessUrl(blobName) {
return this.getAccessUrl('UploadBlob', blobName);
}
getBlobUrl(blobName) {
return this.getAccessUrl('GetBlob', blobName);
}
getAccessUrl(command, blobName, blobName2) {
var url = `${this.endpointUrl}?command=${command}`;
if (blobName) {
url += `&blobName=${encodeURIComponent(blobName)}`;
}
if (blobName2) {
url += `&blobName2=${encodeURIComponent(blobName2)}`;
}
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve, reject) => {
await this.executeRequest(url).then((x) => {
if (x.success) {
resolve({ url1: x.accessUrl, url2: x.accessUrl2 });
}
else {
reject(x.error);
}
});
});
}
executeRequest(args, commandParams) {
var ajaxArgs = typeof args === 'string' ? { url: args } : args;
var method = ajaxArgs.method || 'GET';
var urlParts = ajaxArgs.url.split('?');
var urlPath = urlParts[0];
var restQueryString = urlParts[1];
var commandQueryString = commandParams
? this.getQueryString(commandParams)
: '';
var queryString = commandQueryString || '';
if (restQueryString) {
queryString += queryString ? `&${restQueryString}` : restQueryString;
}
ajaxArgs.url = queryString ? `${urlPath}?${queryString}` : urlPath;
return fetch(ajaxArgs.url, ajaxArgs)
.then((x) => {
var eventArgs = {
method,
urlPath,
queryString,
};
if (this.onRequestExecuted) {
this.onRequestExecuted(eventArgs);
}
return x;
})
.then(async (x) => {
if (x.status === 200) {
var text = await x.text();
try {
return Object.assign({ success: true }, JSON.parse(text));
}
catch (ex) {
return text;
}
}
else {
return { error: x.statusText };
}
});
}
getQueryString(params) {
return Object.keys(params)
.map((key) => `${key}=${encodeURIComponent(params[key])}`)
.join('&');
}
}
#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;
}