This section explains how to create and configure the simple File Manager component.
To get started quickly with React File Manager, you can check the video below.
The following list of dependencies are required to use the File Manager component in your application.
|-- @syncfusion/ej2-react-filemanager
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-grids
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-layouts
|-- @syncfusion/ej2-navigations
You can use create-react-app
to setup the applications.
To install create-react-app
run the following command.
npm install -g create-react-app
React
sample use following commands.create-react-app quickstart --scripts-version=react-scripts-ts
cd quickstart
create-react-app quickstart
cd quickstart
All the available Essential JS 2 packages are published in npmjs.com
public registry.
You can choose the component that you want to install. For this application, we are going to use File Manager
component.
To install File Manager component, use the following command
npm install @syncfusion/ej2-react-filemanager --save
To render the File Manager component, need to import File Manager and its dependent component’s styles as given below in App.css
.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-react-filemanager/styles/material.css";
Note: If you want to refer the combined component styles, please make use of our CRG
(Custom Resource Generator) in your application.
File Manager can be initialized using the <FileManagerComponent>
tag. Now, you can start adding Essential JS 2 File Manager component to the application.
FileManagerComponent
from ej2-react-filemanager
package in App.tsx
.[src/App.tsx]
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" ajaxSettings = {{
url: hostUrl + "api/FileManager/FileOperations"
}} />
</div>
);
}
export default App;
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" ajaxSettings={{
url: hostUrl + "api/FileManager/FileOperations"
}}/>
</div>);
}
export default App;
Now run the npm start
command in the console, it will run your application and open the browser window.
npm start
The following sample, shows the basic File Manager component.
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" ajaxSettings={{
url: hostUrl + "api/FileManager/FileOperations"
}}/>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" ajaxSettings = {{
url: hostUrl + "api/FileManager/FileOperations"
}} />
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
To perform the download operation, initialize the downloadUrl
property in a ajaxSettings of File Manager component.
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" ajaxSettings = {{
url: hostUrl + "api/FileManager/FileOperations",
downloadUrl: hostUrl + 'api/FileManager/Download'
}} />
</div>
);
}
export default App;
To perform the upload operation, initialize the uploadUrl
property in a ajaxSettings of File Manager Component.
import { FileManagerComponent } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" ajaxSettings = {{
url: hostUrl + "api/FileManager/FileOperations",
uploadUrl: hostUrl + 'api/FileManager/Upload'
}} />
</div>
);
}
export default App;
To perform the image preview support in the File Manager component, need to initialize the getImageUrl
property in a ajaxSettings of File Manager component.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings={{
getImageUrl: hostUrl + "api/FileManager/GetImage",
url: hostUrl + "api/FileManager/FileOperations"
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings = {{
getImageUrl: hostUrl + "api/FileManager/GetImage",
url: hostUrl + "api/FileManager/FileOperations"
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
By default, the File Manager component not having any extra module. You can configure NavigationPane
, Toolbar
, ContextMenu
module using Inject.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings = {{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
Note: The appearance of the File Manager can be customized by using cssClass property. This adds a css class to the root of the File Manager which can be used to add new styles or override existing styles to the File Manager.
The initial view of the File Manager can be changed to details or largeicons view with the help of view property. By default, the File Manager will be rendered in large icons view. When the File Manager is initially rendered, created will be triggered. This event can be utilized for performing operations once the File Manager has been successfully created.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
function onCreated(args) {
console.log("File Manager has been created successfully");
}
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} created={onCreated.bind(this)}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
function onCreated(args: any) {
console.log("File Manager has been created successfully");
}
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings = {{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} created = {onCreated.bind(this)}>
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
The File Manager supports maintaining the component state on page reload. This can be achieved by enabling enablePersistence property which maintains the following,
For every operation in File Manager, ajax request will be sent to the server which then processes the request and sends back the response. When the ajax request is success, success event will be triggered and failure event will be triggered if the request gets failed.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
function onSuccess(args) {
console.log("Ajax request successful");
}
function onFailure(args) {
console.log("Ajax request has failed");
}
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" enablePersistence={true} ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} success={onSuccess.bind(this)} failure={onFailure.bind(this)}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject, SuccessEventArgs, FailureEventArgs } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
function onSuccess(args: SuccessEventArgs) {
console.log("Ajax request successful");
}
function onFailure(args: FailureEventArgs) {
console.log("Ajax request has failed");
}
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" enablePersistence={true} ajaxSettings = {{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} success={onSuccess.bind(this)} failure={onFailure.bind(this)} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
Note: The files of the current folder opened in the File manager can be refreshed programatically by calling refreshFiles method.
It is possible to render the File Manager in right-to-left direction by setting the enableRtl API to true.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" enableRtl={true} ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" enableRtl={true} ajaxSettings = {{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
The current path of the File Manager can be specified initially or dynamically using the path property.
The following code snippet demonstrates specifying the current path in File Manager on rendering.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
FileManagerComponent.Inject(DetailsView, NavigationPane, Toolbar);
function App() {
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
return (
<div className="control-section">
<FileManagerComponent id="file" ajaxSettings = {{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} path ='/Food' />
</div>
);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
FileManagerComponent.Inject(DetailsView, NavigationPane, Toolbar);
function App() {
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
return (<div className="control-section">
<FileManagerComponent id="file" ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} path='/Food'/>
</div>);
}
export default App;
N> You can refer to our React File Manager feature tour page for its groundbreaking feature representations. You can also explore our React File Manager example that shows you how to render the File Manager in React.