All Components

Templates

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

To define the template, nest a <ng-template> tag with the kendoUploadFileTemplate directive applied to it inside the <kendo-upload> 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. If the batch option of the Upload is set to true, let-state reflects the state of the whole batch.
  • Get a reference to the instance of the Upload component. It is exported as kendoUpload by using the exportAs metadata property.
import { Component } from '@angular/core';
import { FileState } from '@progress/kendo-angular-upload';

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    #myUpload="kendoUpload"
    [autoUpload]="false"
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl">
     <ng-template kendoUploadFileTemplate let-files let-state="state">
        <div>Name: {{files[0].name}} Size: {{files[0].size}} bytes</div>
        <button *ngIf="showButton(state)"
            (click)="remove(myUpload, files[0].uid)"
            class="k-button" style="position: absolute; right: .2em;">
            Remove
        </button>
     </ng-template>
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl = 'saveUrl'; // should represent an actual API endpoint
  uploadRemoveUrl = 'removeUrl'; // should represent an actual API endpoint

  public remove(upload, uid: string) {
    upload.removeFilesByUid(uid);
  }

  public showButton(state: FileState): boolean {
    return (state === FileState.Uploaded) ? true : false;
  }
}

import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpProgressEvent, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { of } from 'rxjs/observable/of';
import { concat } from 'rxjs/observable/concat';
import { delay } from 'rxjs/operators/delay';

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

/*
  Mocked backend service.
  For further details, check
  https://angular.io/guide/http#writing-an-interceptor
*/

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === 'saveUrl') {
      const events: Observable<HttpEvent<any>>[] = [0, 30, 60, 100].map((x) => of(<HttpProgressEvent>{
        type: HttpEventType.UploadProgress,
        loaded: x,
        total: 100
      }).pipe(delay(1000)));

      const success = of(new HttpResponse({ status: 200 })).pipe(delay(1000));
      events.push(success);

      return concat(...events);
    }

    if (req.url === 'removeUrl') {
        return of(new HttpResponse({ status: 200 }));
    }

    return next.handle(req);
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadModule } from '@progress/kendo-angular-upload';
import { UploadComponent } from './upload.component';
import { UploadInterceptor } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import 'hammerjs';

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

@NgModule({
    imports:      [ BrowserModule, HttpClientModule, UploadModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule ],
    declarations: [ AppComponent, UploadComponent ],
    bootstrap:    [ AppComponent ],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: UploadInterceptor,
        multi: true
      }
    ]
  })

  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