Templates

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

@Component({
    selector: 'my-app',
    template: `
    <kendo-fileselect
        #myFileSelect="kendoFileSelect">
        <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;">
                Remove
            </button>
        </ng-template>
    </kendo-fileselect>
    `
})
export class AppComponent {
    public remove(fileSelect, uid: string) {
        fileSelect.removeFileByUid(uid);
    }

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

@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