fix issue with upload of the same file (#391)

* fix the issue with upload of the same file
AbsaOSS · Jul 2, 2024 · 801d327 · 801d327
1 parent 73a2c16
commit 801d327
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 9 deletions.
diff --git a/projects/composition/src/app/api-data/cps-file-upload.json b/projects/composition/src/app/api-data/cps-file-upload.json
@@ -44,6 +44,22 @@
                         "type": "Function",
                         "default": "undefined",
                         "description": "Callback for uploaded file processing."
+                    },
+                    {
+                        "name": "fileNameTooltipPosition",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "CpsTooltipPosition",
+                        "default": "top",
+                        "description": "Position of file name tooltip, it can be 'top', 'bottom', 'left' or 'right'."
+                    },
+                    {
+                        "name": "fileNameTooltipOffset",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "number",
+                        "default": "12",
+                        "description": "File name tooltip offset for styling."
                     }
                 ]
             },

diff --git a/projects/composition/src/app/api-data/cps-tooltip.json b/projects/composition/src/app/api-data/cps-tooltip.json
@@ -75,6 +75,14 @@
                         "type": "string",
                         "default": "cps-tooltip-content",
                         "description": "Tooltip content class for styling."
+                    },
+                    {
+                        "name": "tooltipOffset",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "number",
+                        "default": "8",
+                        "description": "Tooltip offset for styling."
                     }
                 ]
             }

diff --git a/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html b/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html
@@ -7,14 +7,14 @@ <h2 class="section-title">File upload component with the dependency on selected
         label="File extension"
         [options]="fileUploadOptions"
         [value]="selectedFileUploadType.value"
-        (valueChanged)="onFileExtensionChanged($event)"
-        [mandatory]="false">
+        (valueChanged)="onFileExtensionChanged($event)">
       </cps-button-toggle>
       <br/>
       <cps-file-upload
         [extensions]="[selectedFileUploadType.value]"
         [fileDesc]="selectedFileUploadType!.label || ''"
         width="400"
+        fileNameTooltipPosition="bottom"
         [fileProcessingCallback]="processUploadedFile"
         (fileUploadFailed)="onFileUploadFailed($event)"
         (fileUploaded)="onFileUploaded($event)"
@@ -33,6 +33,7 @@ <h2 class="section-title">File upload component with extra info</h2>
         [fileInfo]="fileInfo"
         fileDesc="Pictures or PDFs"
         width="500"
+        fileNameTooltipOffset="15"
         [fileProcessingCallback]="processUploadedFile"
         (fileUploadFailed)="onFileUploadFailed($event)"
         (fileUploaded)="onFileUploaded($event)"

diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html
@@ -12,6 +12,7 @@
     (mouseleave)="isDragoverFile = false"
     (drop)="tryUploadFile($event)">
     <input
+      #fileInput
       (change)="tryUploadFile($event)"
       type="file"
       [accept]="extensionsString"
@@ -51,7 +52,11 @@
           [icon]="isProcessingFile ? 'pending' : 'toast-success'"
           [color]="isProcessingFile ? 'warn' : 'success'">
         </cps-icon>
-        <div class="cps-file-upload-uploaded-file-name">
+        <div class="cps-file-upload-uploaded-file-name"
+             cpsTooltip="{{ uploadedFile.name }}"
+             [tooltipPosition]="fileNameTooltipPosition"
+             [tooltipOffset]="fileNameTooltipOffset"
+             tooltipOpenOn="hover">
           {{ uploadedFile.name }}
         </div>
       </div>

diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss
@@ -80,14 +80,22 @@ $text-color-darkest: var(--cps-color-text-darkest);
         .cps-file-upload-uploaded-file-title {
           display: flex;
           align-items: center;
+          flex: 1;
+          min-width: 0;
           .cps-file-upload-uploaded-file-name {
             color: $text-color-darkest;
             font-size: 20px;
             margin: 0 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: calc(100% - 60px);
           }
         }
         .cps-file-upload-uploaded-file-remove-icon {
           cursor: pointer;
+          flex-shrink: 0;
+          margin-left: 8px;
           &:hover {
             ::ng-deep .cps-icon {
               color: var(--cps-color-error-darken1) !important;

diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts
@@ -1,16 +1,23 @@
 import { CommonModule } from '@angular/common';
 import {
   Component,
+  ElementRef,
   EventEmitter,
   Input,
+  numberAttribute,
   OnChanges,
   OnInit,
   Output,
-  SimpleChanges
+  SimpleChanges,
+  ViewChild
 } from '@angular/core';
 import { catchError, Observable, of, take } from 'rxjs';
 import { convertSize } from '../../utils/internal/size-utils';
 import { CpsIconComponent } from '../cps-icon/cps-icon.component';
+import {
+  CpsTooltipDirective,
+  CpsTooltipPosition
+} from '../../directives/cps-tooltip/cps-tooltip.directive';
 import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-linear.component';
 
 /**
@@ -20,7 +27,12 @@ import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-
 @Component({
   selector: 'cps-file-upload',
   standalone: true,
-  imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent],
+  imports: [
+    CommonModule,
+    CpsIconComponent,
+    CpsProgressLinearComponent,
+    CpsTooltipDirective
+  ],
   templateUrl: './cps-file-upload.component.html',
   styleUrls: ['./cps-file-upload.component.scss']
 })
@@ -56,6 +68,18 @@ export class CpsFileUploadComponent implements OnInit, OnChanges {
   @Input() fileProcessingCallback?: (file: File) => Observable<boolean> =
     undefined;
 
+  /**
+   * Position of file name tooltip, it can be 'top', 'bottom', 'left' or 'right'.
+   * @group Props
+   */
+  @Input() fileNameTooltipPosition: CpsTooltipPosition = 'top';
+
+  /**
+   * File name tooltip offset for styling.
+   * @group Props
+   */
+  @Input({ transform: numberAttribute }) fileNameTooltipOffset: number = 12;
+
   /**
    * Callback to invoke when file is uploaded.
    * @param {File} File
@@ -77,6 +101,8 @@ export class CpsFileUploadComponent implements OnInit, OnChanges {
    */
   @Output() uploadedFileRemoved = new EventEmitter<string>();
 
+  @ViewChild('fileInput') fileInput?: ElementRef<HTMLInputElement>;
+
   isDragoverFile = false;
   uploadedFile?: File;
   extensionsString = '';
@@ -150,6 +176,10 @@ export class CpsFileUploadComponent implements OnInit, OnChanges {
     const name = this.uploadedFile?.name ?? '';
     this.uploadedFile = undefined;
     this.uploadedFileRemoved.emit(name);
+
+    if (this.fileInput) {
+      this.fileInput.nativeElement.value = '';
+    }
   }
 
   private _isFileExtensionValid(file?: File) {

diff --git a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts
@@ -84,6 +84,12 @@ export class CpsTooltipDirective implements OnDestroy {
    */
   @Input() tooltipContentClass = 'cps-tooltip-content';
 
+  /**
+   * Tooltip offset for styling.
+   * @group Props
+   */
+  @Input() tooltipOffset: number = 8;
+
   private _popup?: HTMLDivElement;
   private _showTimeout?: any;
   private _hideTimeout?: any;
@@ -216,19 +222,23 @@ export class CpsTooltipDirective implements OnDestroy {
             targetElRect.left +
             this.window.scrollX +
             (targetEl.offsetWidth - popupRect.width) / 2,
-          top: targetElRect.bottom + this.window.scrollY + 8
+          top: targetElRect.bottom + this.window.scrollY + this.tooltipOffset
         };
       case 'left':
         return {
-          left: targetElRect.left - this.window.scrollX - popupRect.width - 8,
+          left:
+            targetElRect.left -
+            this.window.scrollX -
+            popupRect.width -
+            this.tooltipOffset,
           top:
             targetElRect.top +
             this.window.scrollY +
             (targetEl.offsetHeight - popupRect.height) / 2
         };
       case 'right':
         return {
-          left: targetElRect.right + this.window.scrollX + 8,
+          left: targetElRect.right + this.window.scrollX + this.tooltipOffset,
           top:
             targetElRect.top +
             this.window.scrollY +
@@ -240,7 +250,11 @@ export class CpsTooltipDirective implements OnDestroy {
             targetElRect.left +
             this.window.scrollX +
             (targetEl.offsetWidth - popupRect.width) / 2,
-          top: targetElRect.top + this.window.scrollY - popupRect.height - 8
+          top:
+            targetElRect.top +
+            this.window.scrollY -
+            popupRect.height -
+            this.tooltipOffset
         };
     }
   }