Upload Files by Using External Button

By default, when the autoUpload option is set to false, the Upload component renders the Clear and Upload buttons under the selected files.

To hide the default buttons, apply custom CSS.

  1. Set the Angular ViewEncapsulation to None. Otherwise, the custom styles will not be applied unless they are provided on a global level.

    .k-action-buttons {
     display: none
    }
  2. Create custom buttons to upload and clear the selected files by utilizing the uploadFiles and clearFiles methods in the click handler function.

The following example demonstrates the full implementation of the suggested approach.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-upload',
  encapsulation: ViewEncapsulation.None,
  styles: [`
    .k-action-buttons {
      display: none
    }
 `],
  template: `
  <kendo-upload #upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [autoUpload]="false"
    (select)="onSelectEvent($event)"
    (upload)="onUploadEvent($event)"
    (remove)="onRemoveEvent($event, upload)">
  </kendo-upload>
  <div *ngIf="fileCount > 0" style="text-align: center; margin: 20px auto;">
    <button kendoButton [primary]="true" [icon]="'close-outline'" [look]="'outline'"
    (click)="onClearButtonClick(upload)">Clear</button>
    <button kendoButton [primary]="true" [icon]="'check-outline'"
    (click)="onUploadButtonClick(upload)" style="margin-left: 3px;">Upload</button>
  </div>
  `
})
export class UploadComponent {
  uploadSaveUrl = 'saveUrl'; // should represent an actual API endpoint
  uploadRemoveUrl = 'removeUrl'; // should represent an actual API endpoint
  public fileCount = 0;


  public onUploadButtonClick(upload) {
    upload.uploadFiles();
  }

  public onClearButtonClick(upload) {
    this.fileCount = 0;
    upload.clearFiles();
  }

  public onSelectEvent(e) {
    this.fileCount += 1;
  }

  public onUploadEvent(e) {
    this.fileCount = 0;
  }

  public onRemoveEvent(e, upload) {
    if (this.fileCount > 0) {
      this.fileCount -= 1;
    }
  }
}
import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpProgressEvent, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable, of, concat } from 'rxjs';
import { delay } from 'rxjs/operators';

@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 { ButtonsModule } from '@progress/kendo-angular-buttons';

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

@NgModule({
    imports: [BrowserModule, HttpClientModule, UploadModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, ButtonsModule],
    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