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

Environment

ProductProgress® Kendo UI for Angular Upload

Description

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

Solution

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.

    <kendo-upload
        [saveUrl]="uploadSaveUrl"
        [removeUrl]="uploadRemoveUrl">
        <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>
        </ng-template>
    </kendo-upload>
  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.

Example
View Source
Change Theme:

In this article

Not finding the help you need?