Keyboard Navigation

The keyboard navigation of the FileSelect is always available.

The FileSelect supports the following keyboard shortcuts.

SHORTCUT DESCRIPTION
Enter Opens the Select file dialog if the Select files button is focused.
Space Opens the Select file dialog if the Select files button is focused.
Delete Removes the highlighted file.
Tab Blurs the FileSelect and moves the focus to the next focusable element on page.
Down Arrow Highlights the next file.
Up Arrow Highlights the previous file or the Select files button.
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-fileselect></kendo-fileselect>
    `
})
export class AppComponent {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadsModule } from '@progress/kendo-angular-upload';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, HttpClientModule, UploadsModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article