Your search did not match any results.
File Manager

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.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import FileManager, { Permissions } from 'devextreme-react/file-manager'; import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider'; import { LoadPanel } from 'devextreme-react/load-panel'; const fileSystemProvider = new RemoteFileSystemProvider({ endpointUrl: 'https://js.devexpress.com/Demos/Mvc/api/file-manager-azure' }); const allowedFileExtensions = []; const loadPanelPosition = { of: '#file-manager' }; class App extends React.Component { constructor() { super(); this.state = { loadPanelVisible: true, wrapperClassName: '' }; this.checkAzureStatus(); } render() { return ( <div id="wrapper" className={this.state.wrapperClassName}> <LoadPanel visible={this.state.loadPanelVisible} position={loadPanelPosition} /> <FileManager id="file-manager" fileSystemProvider={fileSystemProvider} allowedFileExtensions={allowedFileExtensions}> {/* uncomment the code below to enable file/directory management */} <Permissions // create={true} // copy={true} // move={true} // delete={true} // rename={true} // upload={true} download={true}> </Permissions> </FileManager> <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/React/Light/" target="_blank" rel="noopener noreferrer"> https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureServerBinding/React/Light/</a> to see the demo online. </div> </div> ); } checkAzureStatus() { fetch('https://js.devexpress.com/Demos/Mvc/api/file-manager-azure-status?widgetType=fileManager') .then(response => response.json()) .then(result => { const className = result.active ? 'show-widget' : 'show-message'; this.setState({ wrapperClassName: className, loadPanelVisible: false }); }); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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.min.css" /> <link rel="stylesheet" type="text/css" href="styles.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>
#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; }
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.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-react': 'npm:devextreme-react@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', // SystemJS plugins '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': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });