Multiple selection in React File manager component

18 Jan 20234 minutes to read

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.

app.jsx

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 onFileSelect(args) {
        console.log(args.fileDetails.name + " has been " + args.action + "ed");
    }
    return (<div className="control-section">
        <FileManagerComponent id="file" view="Details" allowMultiSelection={true} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} fileSelect={onFileSelect.bind(this)}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

  return (
    <div className="control-section">
        <FileManagerComponent id="file" view="Details" allowMultiSelection={true} ajaxSettings = {{
              downloadUrl: hostUrl + 'api/FileManager/Download',
              getImageUrl: hostUrl + "api/FileManager/GetImage",
              uploadUrl: hostUrl + 'api/FileManager/Upload',
              url: hostUrl + "api/FileManager/FileOperations"
            }} fileSelect={onFileSelect.bind(this)} >
            <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
          </FileManagerComponent>
    </div>
  );
}
export default App;

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

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 File Manager has support to select files and folders initially or dynamically by specifying their names in selectedItems property.