Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Your search did not match any results.
File Manager

Physical File System


The FileManager UI component can work with a file system located on the server. To connect the component with the file system items, assign the Remote File System Provider to the fileSystemProvider property. Pass the endpointUrl to the remote file system provider object to specify the Url at which the component can access the file system items.

Configure the built-in server-side helper methods to process the FileManager UI component's AJAX requests on the ASP.NET MVC and ASP.NET Core back-end:

  1. Create an instance of the FileSystemConfiguration class to create a file system provider and configure its interaction with file system items.
  2. Use the FileSystemProvider property to specify a file system provider. For a physical file system, configure a file system provider of the PhysicalFileSystemProvider type.
  3. Use the FileSystemCommandProcessor class to process commands and request parameters that the component passes to the file system.

This demo contains commented out code lines that enable file modification operations. You can uncomment them and configure if necessary.

Copy to CodeSandBox
import React from 'react'; import FileManager, { Permissions } from 'devextreme-react/file-manager'; import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider'; const remoteProvider = new RemoteFileSystemProvider({ endpointUrl: '' }); const allowedFileExtensions = ['.js', '.json', '.css']; class App extends React.Component { render() { return ( <FileManager fileSystemProvider={remoteProvider} 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> ); } } 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="" /> <link rel="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': '' }, 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.5', 'devextreme-react': 'npm:devextreme-react@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/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 } });