The file manager component allows customizing its functionalities like, context menu, searching, uploading, toolbar using APIs. Given below are some of the functionalities that can be customized in the File Manager,
The context menu settings like, items to be displayed on files, folders and layout click and visibility can be customized using contextMenuSettings property.
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public fileObj: FileManagerComponent;
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div>
<div className="control-section">
<FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file" view="Details"
ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}}
contextMenuSettings = {{
file: ['Open', '|', 'Details'],
folder: ['Open', '|', 'Details'],
layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|']
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div>
<div className="control-section">
<FileManagerComponent ref={s => (this.fileObj = s)} id="file" view="Details" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} contextMenuSettings={{
file: ['Open', '|', 'Details'],
folder: ['Open', '|', 'Details'],
layout: ['SortBy', 'View', 'Refresh', '|', 'Details', '|']
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The details view settings like, column width, header text, template for each field can be customized using detailsViewSettings property.
import { DetailsView, FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div className="control-section">
<FileManagerComponent id="file" view="Details" ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}}
detailsViewSettings ={
{
columns : [
{field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' },template: '${name}'},
{field: 'size', headerText: 'File Size',minWidth: 50, width: '110', template: '${size}'},
{ field: '_fm_modified', headerText: 'Date Modified',minWidth: 50, width: '190'}
]
}
}>
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div className="control-section">
<FileManagerComponent id="file" view="Details" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} detailsViewSettings={{
columns: [
{ field: 'name', headerText: 'File Name', minWidth: 120, width: 'auto', customAttributes: { class: 'e-fe-grid-name' }, template: '${name}' },
{ field: 'size', headerText: 'File Size', minWidth: 50, width: '110', template: '${size}' },
{ field: '_fm_modified', headerText: 'Date Modified', minWidth: 50, width: '190' }
]
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The navigation pane settings like, minimum and maximum width and visibility can be customized using navigationPaneSettings property.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} navigationPaneSettings ={{ maxWidth: '850px', minWidth: '140px', visible: true }} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} navigationPaneSettings={{ maxWidth: '850px', minWidth: '140px', visible: true }}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The file extensions are displayed in the File Manager by default. This can be hidden by disabling the showFileExtension property.
In File Manager fileLoad and fileOpen events are triggered before the file/folder is rendered and before the file/folder is opened respectively. These events can be utilized to perform operations before a file/folder is rendered or opened.
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public onBeforeFileLoad(args: any) {
console.log(args.fileDetails.name + " is loading");
}
public onBeforeFileOpen(args: any) {
console.log(args.fileDetails.name + " is opened");
}
public render() {
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" showFileExtension={false} ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} fileLoad={this.onBeforeFileLoad.bind(this)} fileOpen={this.onBeforeFileOpen.bind(this)} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
onBeforeFileLoad(args) {
console.log(args.fileDetails.name + " is loading");
}
onBeforeFileOpen(args) {
console.log(args.fileDetails.name + " is opened");
}
render() {
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" showFileExtension={false} ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} fileLoad={this.onBeforeFileLoad.bind(this)} fileOpen={this.onBeforeFileOpen.bind(this)}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The File Manager provides support to show/hide the hidden items by enabling/disabling the showHiddenItems property.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" showHiddenItems={true} ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" showHiddenItems={true} ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The thumbnail images are displayed in the File Manager’s large icons view by default. This can be hidden by disabling the showThumbnail property.
import { DetailsView, FileManagerComponent, NavigationPane, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" showThumbnail={false} ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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, Inject, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" showThumbnail={false} ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The toolbar settings like, items to be displayed in toolbar and visibility can be customized using toolbarSettings property.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public fileObj: FileManagerComponent;
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div>
<div className="control-section">
<FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file" view="Details"
ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}}
toolbarSettings = {
{ items: ['NewFolder', 'Refresh', 'View', 'Details']}
} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div>
<div className="control-section">
<FileManagerComponent ref={s => (this.fileObj = s)} id="file" view="Details" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} toolbarSettings={{ items: ['NewFolder', 'Refresh', 'View', 'Details'] }}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The upload settings like, minimum and maximum file size and enabling auto upload can be customized using uploadSettings property.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
public render() {
return (
<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} uploadSettings={{ maxFileSize: 233332, minFileSize: 120, autoUpload: true}}>
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
}
render() {
return (<div className="control-section">
<FileManagerComponent id="file" view="LargeIcons" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} uploadSettings={{ maxFileSize: 233332, minFileSize: 120, autoUpload: true }}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The tooltip value can be customized by adding extra content to the title of the toolbar, navigation pane, details view and large icons of the file manager element.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
import { getValue, select } from '@syncfusion/ej2-base';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
export default class App extends React.Component<{}, {}> {
public fileObj: FileManagerComponent;
public tooltipObj: TooltipComponent;
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
constructor(props: any) {
super(props);
this.onTooltipBeforeRender = this.onTooltipBeforeRender.bind(this);
this.fileLoad = this.fileLoad.bind(this);
}
public onTooltipBeforeRender(args: TooltipEventArgs): void {
const buttonId: string = select('button', args.target).id;
let description: string = '';
switch (buttonId) {
case this.fileObj.element.id + '_tb_newfolder':
description = 'Create a new folder';
break;
case this.fileObj.element.id + '_tb_upload':
description = 'Upload new files';
break;
case this.fileObj.element.id + '_tb_cut':
description = 'Cut files and folders from the current location';
break;
case this.fileObj.element.id + '_tb_copy':
description = 'Copy files and folders from the current location';
break;
case this.fileObj.element.id + '_tb_paste':
description = 'Paste files and folders in the current location';
break;
case this.fileObj.element.id + '_tb_delete':
description = 'Delete selected files and folders';
break;
case this.fileObj.element.id + '_tb_download':
description = 'Download selected files and folders';
break;
case this.fileObj.element.id + '_tb_rename':
description = 'Rename selected file or folder';
break;
case this.fileObj.element.id + '_tb_sortby':
description = 'Change the file sorting order';
break;
case this.fileObj.element.id + '_tb_refresh':
description = 'Refresh the current location';
break;
case this.fileObj.element.id + '_tb_selection':
description = 'Following items are currently selected:';
for (let i: number = 0; i < this.fileObj.selectedItems.length; i++) {
description = description + '</br>' + this.fileObj.selectedItems[i];
}
break;
case this.fileObj.element.id + '_tb_view':
description = 'Switch the layout view';
break;
case this.fileObj.element.id + '_tb_details':
description = 'Get the details of the seletced items';
break;
default:
description = '';
break;
}
this.tooltipObj.content = args.target.getAttribute('title') + '</br>' + description;
}
public fileLoad(args: any): void {
const target: Element = args.element;
if (args.module==='DetailsView') {
const element: Element = select('[title]', args.element);
const title: string = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
element.setAttribute('title', title);
} else if (args.module==='LargeIconsView') {
const title: string = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
target.setAttribute('title', title);
}
}
public render() {
return (
<TooltipComponent id="template-tootip" ref={ s => (this.tooltipObj = s as TooltipComponent)} target="#file_toolbar [title]" beforeRender={this.onTooltipBeforeRender} >
<div className="filemanager-container">
{/* Filemanager element */}
<FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file"
ajaxSettings = {{
downloadUrl: this.hostUrl +'api/FileManager/Download',
getImageUrl: this.hostUrl +'api/FileManager/GetImage',
uploadUrl: this.hostUrl +'api/FileManager/Upload',
url: this.hostUrl + 'api/FileManager/FileOperations'
}} fileLoad={this.fileLoad}>
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
</TooltipComponent>
);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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';
import { getValue, select } from '@syncfusion/ej2-base';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
export default class App extends React.Component {
constructor(props) {
super(props);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
this.onTooltipBeforeRender = this.onTooltipBeforeRender.bind(this);
this.fileLoad = this.fileLoad.bind(this);
}
onTooltipBeforeRender(args) {
const buttonId = select('button', args.target).id;
let description = '';
switch (buttonId) {
case this.fileObj.element.id + '_tb_newfolder':
description = 'Create a new folder';
break;
case this.fileObj.element.id + '_tb_upload':
description = 'Upload new files';
break;
case this.fileObj.element.id + '_tb_cut':
description = 'Cut files and folders from the current location';
break;
case this.fileObj.element.id + '_tb_copy':
description = 'Copy files and folders from the current location';
break;
case this.fileObj.element.id + '_tb_paste':
description = 'Paste files and folders in the current location';
break;
case this.fileObj.element.id + '_tb_delete':
description = 'Delete selected files and folders';
break;
case this.fileObj.element.id + '_tb_download':
description = 'Download selected files and folders';
break;
case this.fileObj.element.id + '_tb_rename':
description = 'Rename selected file or folder';
break;
case this.fileObj.element.id + '_tb_sortby':
description = 'Change the file sorting order';
break;
case this.fileObj.element.id + '_tb_refresh':
description = 'Refresh the current location';
break;
case this.fileObj.element.id + '_tb_selection':
description = 'Following items are currently selected:';
for (let i = 0; i < this.fileObj.selectedItems.length; i++) {
description = description + '</br>' + this.fileObj.selectedItems[i];
}
break;
case this.fileObj.element.id + '_tb_view':
description = 'Switch the layout view';
break;
case this.fileObj.element.id + '_tb_details':
description = 'Get the details of the seletced items';
break;
default:
description = '';
break;
}
this.tooltipObj.content = args.target.getAttribute('title') + '</br>' + description;
}
fileLoad(args) {
const target = args.element;
if (args.module === 'DetailsView') {
const element = select('[title]', args.element);
const title = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
element.setAttribute('title', title);
}
else if (args.module === 'LargeIconsView') {
const title = getValue('name', args.fileDetails) +
'\n' + getValue('dateModified', args.fileDetails);
target.setAttribute('title', title);
}
}
render() {
return (<TooltipComponent id="template-tootip" ref={s => (this.tooltipObj = s)} target="#file_toolbar [title]" beforeRender={this.onTooltipBeforeRender}>
<div className="filemanager-container">
<FileManagerComponent ref={s => (this.fileObj = s)} id="file" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + 'api/FileManager/FileOperations'
}} fileLoad={this.fileLoad}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>
</TooltipComponent>);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));