Creating a Download Link for an Uploaded File

Environment

Product

Progress® 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.
      ts

      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.

   html

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

   ts

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

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...