You can control the way the FileSelect displays the file list by using a template.

To define the template, nest a <ng-template> tag with the kendoFileSelectFileTemplate directive applied to it inside the <kendo-fileselect> selector.

In the template, you can:

  • Get a reference to the files which are associated with the current item by using the let-files directive.
  • Get a reference to the current state of each file by using the let-state directive.
  • Get a reference to the instance of the FileSelect component. It is exported as kendoFileSelect by using the exportAs metadata property.
import { Component } from '@angular/core';
import { FileState } from '@progress/kendo-angular-upload';

    selector: 'my-app',
    template: `
        <ng-template kendoFileSelectFileTemplate let-files let-state="state">
            <div>Name: {{files[0].name}} Size: {{files[0].size}} bytes</div>
            <button *ngIf="showButton(state)"
                (click)="remove(myFileSelect, files[0].uid)"
                class="k-button" style="position: absolute; right: .2em;">
export class AppComponent {
    public remove(fileSelect, uid: string) {

    public showButton(state: FileState): boolean {
        return (state === FileState.Selected) ? true : false;
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';

    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';


const platform = platformBrowserDynamic();

In this article