Displaying a Download URL Link on a File Upload

Environment

Product

Progress® Kendo UI® Upload for Angular

Description

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

Solution

To display a URL link after successfully uploading a file:

1. Handle the success event of the Upload component.

   html

   <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.

   ts

   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).

   ts

   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.

   html

   <ng-template kendoUploadFileInfoTemplate let-files ...>
      <a href="{{ files[0].downloadUrl }}">{{ files[0].name }}</a>
   </ng-template>

5. Depending on the state field passed by the kendoUploadFileInfoTemplate, switch between the default file text and the anchor link.

   html

   <ng-template kendoUploadFileInfoTemplate ... let-state="state">
       <span *ngIf="!isUploaded(state)"> {{ files[0].name }} </span>
       <a ... *ngIf="isUploaded(state)"> {{ files[0].name }} </a>
   </ng-template>

   ts

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

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

Change Theme

Theme

Loading ...