Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Azure Server-Side Binding
This demo illustrates how to configure the FileManager widget to manage files and folders in Microsoft Azure Blob Storage. To access the Azure Blob Storage, the widget 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.
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.
<template>
<div
id="wrapper"
:class="wrapperClassName"
>
<DxLoadPanel
:position="loadPanelPosition"
v-model:visible="loadPanelVisible"
/>
<DxFileManager
id="file-manager"
:file-system-provider="fileSystemProvider"
:allowed-file-extensions="allowedFileExtensions"
>
<!-- uncomment the code below to enable file/directory management -->
<!-- <dx-permissions
:create="true"
:copy="true"
:move="true"
:delete="true"
:rename="true"
:upload="true"
:download="true"
/> -->
</DxFileManager>
<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/Vue/Light/"
target="_blank"
>
https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureServerBinding/Vue/Light/
</a>
to see the demo online.
</div>
</div>
</template>
<script>
import { DxFileManager, DxPermissions } from 'devextreme-vue/file-manager';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';
import { DxLoadPanel } from 'devextreme-vue/load-panel';
const fileSystemProvider = new RemoteFileSystemProvider({
endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure'
});
const allowedFileExtensions = [];
export default {
components: {
DxFileManager,
DxPermissions,
DxLoadPanel
},
data() {
return {
fileSystemProvider,
allowedFileExtensions,
loadPanelPosition: { of: '#file-manager' },
loadPanelVisible: true,
wrapperClassName: ''
};
},
created() {
fetch('https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-status?widgetType=fileManager')
.then(response => response.json())
.then(result => {
this.wrapperClassName = result.active ? 'show-widget' : 'show-message';
this.loadPanelVisible = false;
});
}
};
</script>
<style>
#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;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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" />
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx-gantt.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app">
</div>
</div>
</body>
</html>
System.config({
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader'
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.4',
'devextreme-vue': 'npm:devextreme-vue@20.2.4',
'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.7/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js'
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});