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

Creating a Download Link for an Uploaded File


ProductProgress® Kendo UI for Angular Upload


How can I create a download link for an uploaded file by using Kendo UI for Angular Upload?


To display a download link after the file has been successfully uploaded:

  1. Handle the success event of the component:

    1. Return the download URL as a response from the server.
    2. In the event handler, assign the download URL to a custom field of the uploaded file.
      public onSuccess(ev: SuccessEvent): void {
         let file: FileInfo | any = ev.files[0];
         file.downloadURL = 'myURL';
  2. To change the default file name to a download link, use the FileInfoTemplate. To access the download URL, get the files field of the template.

        <ng-template kendoUploadFileInfoTemplate let-files>
            <span *ngIf="!isUploaded(state)">{{ files[0].name }}</span>
            <a href="{{ files[0].downloadURL }}" *ngIf="isUploaded(state)">{{ files[0].name }}</a>
  3. To toggle the visibility of the file name and the download link based on the file upload status, use the *ngIf Angular directive.

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

The following example demonstrates the suggested approach.

View Source
Change Theme:

In this article

Not finding the help you need?