New to Kendo UI for Angular? Start a free 30-day trial

Displaying a Download URL Link on a File Upload


ProductProgress® Kendo UI® Upload for Angular


How can I show a download URL link after a successful file upload when using Kendo UI for Angular Upload?


To display a URL link after successfully uploading a file:

  1. Handle the success event of the Upload component.

    <kendo-upload (success)="onSuccess($event)" >...</kendo-upload>
  2. To access the download URL link returned from the server, use the SuccessEvent response.body property in the success event handler.

    public onSuccess(ev: SuccessEvent): void {
        let urlLink: string = ev.response.body;
  3. Pass the URL link to a custom field of the uploaded file (downloadUrl in this case).

    let file: any = ev.files[0];
    file.downloadUrl = urlLink ;
  4. Use the kendoUploadFileInfoTemplate directive to customize the content of the uploaded file and access the URL link in the template.

    <ng-template kendoUploadFileInfoTemplate let-files ...>
       <a href="{{ files[0].downloadUrl }}">{{ files[0].name }}</a>
  5. Depending on the state field passed by the kendoUploadFileInfoTemplate, switch between the default file text and the anchor link.

    <ng-template kendoUploadFileInfoTemplate ... let-state="state">
        <span *ngIf="!isUploaded(state)"> {{ files[0].name }} </span>
        <a ... *ngIf="isUploaded(state)"> {{ files[0].name }} </a>
    public isUploaded(state: FileState): boolean {
        return state === FileState.Uploaded ? true : false;

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

View Source
Change Theme:

In this article

Not finding the help you need?