Set download file name

README.md

@@ -93,6 +93,8 @@ Each `object` of `album` array inside your component may contains 3 properties :
 | src        | Required    | The source image to your thumbnail that you want to with use lightbox when user click on `thumbnail` image         |
 | caption    | Optional    | Your caption corresponding with your image                                                                         |
 | thumb      | Optional    | Source of your thumbnail. It is being used inside your component markup so this properties depends on your naming. |
+| downloadUrl | Optional   | Download url other than `src`. For ex. high resolution image url. |
+| downloadName | Optional  | Name for downloaded file. If it's not set, it will be taken from `src` url. |
 
 3. Listen to lightbox event
 

src/lightbox-event.service.ts

@@ -12,6 +12,7 @@ export interface IAlbum {
   caption?: string;
   thumb: string;
   downloadUrl?: string;
+  downloadName?: string;
 }
 
 export const LIGHTBOX_EVENT = {

src/lightbox.component.ts

@@ -196,10 +196,19 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
 
   public download($event: any): void {
     $event.stopPropagation();
-    const url = this.album[this.currentImageIndex].src;
-    const downloadUrl = this.album[this.currentImageIndex].downloadUrl;
-    const parts = url.split('/');
-    const fileName = parts[parts.length - 1];
+
+    const file = this.album[this.currentImageIndex];
+    const url = file.src;
+    const downloadUrl = file.downloadUrl;
+
+    let fileName = '';
+    if (file.downloadName) {
+      fileName = file.downloadName;
+    } else {
+      const parts = url.split('/');
+      fileName = parts[parts.length - 1];
+    }
+
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     const preloader = new Image();