Multiple selection in Angular File manager component
19 Sep 20245 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.
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)'>
</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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Note: The File Manager has support to select files and folders initially or dynamically by specifying their names in selectedItems property.
Range Selection
The File Manager supports for selecting files and folders in specific ranges through mouse drag as like File Explorer. This is particularly useful in scenarios where users need to select a large group of files quickly without manually clicking each one.
Enabling Range Selection
To enable range selection, you need to 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)'>
</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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));