Preselect the items in React File Manager component

20 Jan 20255 minutes to read

You can preselect the items in the File Manager component by utilizing the fileLoad event. The required file and folder names must be stated in the declared string array variable. In the event handler, we have to assign the array of file and folder names to the selectedItems property.

The following example shows how to preselect the items.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let fileObj;
    let fileNames = [
        'Documents',
        'EJ2 File Manager.docx',
        'EJ2 File Manager.pdf',
        'File Manager PPT.pptx'
      ];
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/"; 
    function fileLoad(args) {
        // Set the array of file names to enable selection.
        fileObj.selectedItems = fileNames;
    }
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" height="375px" view="Details" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} fileLoad={fileLoad}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;

app.tsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject, FileLoadEventArgs } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let fileObj: FileManagerComponent;
  let fileNames: string[] = [
    'EJ2 File Manager.docx',
    'EJ2 File Manager.pdf',
    'File Manager PPT.pptx',
    'Documents'
  ];
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  function fileLoad(args: FileLoadEventArgs) {
    // Set the array of file names to enable selection.
    fileObj.selectedItems = fileNames;
  }
  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => ((fileObj as any) = s as FileManagerComponent)} id="file" height="375px" view="Details" 
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
              }} fileLoad={fileLoad}>
                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
          </FileManagerComponent>
      </div>
  </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);