Search results

Multiple Selection in React FileManager component

The file manager allows you to select multiple files by enabling the allowMultiSelection property (enabled by default). The multiple selection can be done by pressing the Ctrl key or Shift key and selecting the files. The check box can also be used to do multiple selection. Ctrl + A can be used to select all files in the current directory. The fileSelect event will be triggered when the items of file manager control is selected or unselected.

Source
Preview
App.tsx
index.tsx
index.html
App.jsx
index.jsx
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 onFileSelect(args: any) {
    console.log(args.fileDetails.name + " has been " + args.action + "ed");
  }

  public render() {
    return (
      <div className="control-section">
          <FileManagerComponent id="file" view="Details" allowMultiSelection={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"
              }} fileSelect={this.onFileSelect.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, 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/";
    }
    onFileSelect(args) {
        console.log(args.fileDetails.name + " has been " + args.action + "ed");
    }
    render() {
        return (<div className="control-section">
          <FileManagerComponent id="file" view="Details" allowMultiSelection={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"
        }} fileSelect={this.onFileSelect.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'));

Note: The File Manager has support to select files and folders initially or dynamically by specifying their names in selectedItems property.