feat(components/forms): file attachment automatically creates downloa…

…d link for file uploads (#2608)
blackbaud · Aug 15, 2024 · 321e93a · 321e93a
1 parent dd59411
commit 321e93a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html b/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html
@@ -97,10 +97,12 @@
     />
     <span
       *ngIf="value || currentThemeName === 'default'"
-      class="sky-file-attachment-name"
+      class="sky-file-attachment-file-link"
     >
       <a
         *ngIf="value; else noFileRef"
+        [href]="isData ? value.url : undefined"
+        [download]="isData ? value.file.name : undefined"
         [attr.title]="fileName"
         (click)="emitClick()"
       >

diff --git a/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.scss b/...ents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.scss
@@ -38,7 +38,7 @@
   }
 }
 
-.sky-file-attachment-name {
+.sky-file-attachment-file-link {
   padding: 0 5px;
 
   a {
@@ -105,7 +105,7 @@
       display: flex;
       align-items: flex-start;
 
-      .sky-file-attachment-name {
+      .sky-file-attachment-file-link {
         margin: $sky-theme-modern-space-sm $sky-theme-modern-space-sm 0 0;
         padding: 0;
       }

diff --git a/...s/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts b/...s/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts
@@ -101,11 +101,13 @@ describe('File attachment', () => {
   }
 
   function getFileNameLinkEl(): HTMLElement | null {
-    return el.querySelector('.sky-file-attachment-name a');
+    return el.querySelector('.sky-file-attachment-file-link a');
   }
 
   function getFileNameText(): string | undefined {
-    return el.querySelector('.sky-file-attachment-name')?.textContent?.trim();
+    return el
+      .querySelector('.sky-file-attachment-file-link')
+      ?.textContent?.trim();
   }
 
   function getDeleteEl(): HTMLElement | null {
@@ -689,7 +691,9 @@ describe('File attachment', () => {
     expect(getFileNameText()).toBe('abcdefghijklmnopqrstuvwxyz...');
 
     expect(
-      el.querySelector('.sky-file-attachment-name > a')?.getAttribute('title'),
+      el
+        .querySelector('.sky-file-attachment-file-link > a')
+        ?.getAttribute('title'),
     ).toBe(
       'abcdefghijklmnopqrstuvwxyz12345.png',
       'Expected the anchor title to display the full file name.',

diff --git a/...onents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts b/...onents/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts
@@ -214,8 +214,7 @@ export class SkyFileAttachmentComponent
   public fileChange = new EventEmitter<SkyFileAttachmentChange>();
 
   /**
-   * Fires when users select the file name link. Make sure to bind the event.
-   * If you do not, the file name link will be a dead link.
+   * Fires when users select the file name link.
    */
   @Output()
   public fileClick = new EventEmitter<SkyFileAttachmentClick>();
@@ -244,8 +243,10 @@ export class SkyFileAttachmentComponent
 
     if (isNewValue) {
       if (value) {
+        this.isData = value.url?.startsWith('data:');
         this.isImage = this.#fileItemService.isImage(value);
       } else {
+        this.isData = false;
         this.isImage = false;
       }
       this.#setFileName(value);
@@ -278,6 +279,8 @@ export class SkyFileAttachmentComponent
 
   public isImage = false;
 
+  protected isData = false;
+
   protected get isRequired(): boolean {
     return (
       this.required ||