Multiple selection in Angular File Manager component
12 Sep 20259 minutes to read
The File Manager allows you to select multiple files and folders simultaneously for batch operations. This feature enables efficient file management by letting users perform actions on several items at once.
Enabling multiple selection
By default, the multiple selection feature is enabled in File Manager. You can control this behavior using the allowMultiSelection property. When enabled, users can select multiple items using any of these methods:
- Hold
Ctrl
key while clicking individual items to select/deselect them - Hold
Shift
key while clicking to select a range of items - Use checkboxes next to each item (when visible)
- Press
Ctrl + A
to select all files and folders in the current directory
Selected items are visually highlighted with a different background color, and their checkboxes (if enabled) will be checked.
The fileSelect event triggers whenever items are selected or deselected, providing information about the current selection state.
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
import { FileSelectEventArgs } from '@syncfusion/ej2-filemanager';
@Component({
imports: [FileManagerModule,],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
standalone: true,
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: `<ejs-filemanager id='multi' [ajaxSettings]='ajaxSettings' [allowMultiSelection]='allowMultiSelection' (fileSelect)='onFileSelect($event)' height="375px">
</ejs-filemanager>`
})
export class AppComponent {
public ajaxSettings?: object;
public allowMultiSelection?: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.allowMultiSelection = true;
}
// File Manager's file select event function
onFileSelect(args: FileSelectEventArgs | any) {
console.log(args.fileDetails.name + " has been " + args.action + "ed");
}
}
@import 'node_modules/@syncfusion/ej2-base/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-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Note: You can programmatically select specific files and folders either initially or dynamically by providing their names in the selectedItems property.
Range Selection
The File Manager supports selecting files and folders in specific ranges through mouse drag operations, similar to desktop file explorers. This feature is particularly useful when users need to select a large group of adjacent items quickly.
Enabling Range Selection
To enable range selection, set the enableRangeSelection property to true
and ensure that multi-selection is allowed using the allowMultiSelection property.
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
import { FileSelectEventArgs } from '@syncfusion/ej2-filemanager';
@Component({
imports: [FileManagerModule,],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
standalone: true,
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: `<ejs-filemanager id='multi' [ajaxSettings]='ajaxSettings' [allowMultiSelection]='allowMultiSelection' [enableRangeSelection]='enableRangeSelection' (fileSelect)='onFileSelect($event)' height="375px">
</ejs-filemanager>`
})
export class AppComponent {
public ajaxSettings?: object;
public allowMultiSelection?: boolean;
public enableRangeSelection?: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.allowMultiSelection = true;
this.enableRangeSelection = true;
}
// File Manager's file select event function
onFileSelect(args: FileSelectEventArgs | any) {
console.log(args.fileDetails.name + " has been " + args.action + "ed");
}
}
@import 'node_modules/@syncfusion/ej2-base/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-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Disable Multi selection
There are two ways to control multiple selection capabilities in the File Manager:
-
Partial restriction: Setting the allowMultiSelection property to
false
will disable keyboard-based multiple selection methods (Ctrl+click, Shift+click, Ctrl+A). However, users can still select multiple items using checkboxes if they are visible. -
Complete restriction: To fully disable all multiple selection capabilities, set both allowMultiSelection and showItemCheckBoxes properties to
false
. This ensures users can select only one item at a time.
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
@Component({
imports: [FileManagerModule,],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
standalone: true,
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: `<ejs-filemanager id='disable' [ajaxSettings]='ajaxSettings' [allowMultiSelection]='allowMultiSelection' [showItemCheckBoxes]='showItemCheckBoxes' height="375px">
</ejs-filemanager>`
})
export class AppComponent {
public ajaxSettings?: object;
public allowMultiSelection?: boolean;
public showItemCheckBoxes?: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.allowMultiSelection = false;
this.showItemCheckBoxes = false;
}
}
@import 'node_modules/@syncfusion/ej2-base/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-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));