feat update cps file upload component

README.md

@@ -79,3 +79,7 @@ Make sure `ng build cps-ui-kit --watch` is running, so the library will be rebui
 #### Generate API documentation
 
 Execute `npm run generate-json-api` to generate documentation for any changes in the components' API.
+
+#### Run cypress tests
+
+`npm run test`

projects/composition/src/app/api-data/cps-file-upload.json

@@ -29,6 +29,14 @@
                         "default": "100%",
                         "description": "Width of the component, a number denoting pixels or a string."
                     },
+                    {
+                        "name": "fileInfo",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Expected file info block, explaining some extra stuff about file."
+                    },
                     {
                         "name": "fileProcessingCallback",
                         "optional": true,

projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html

@@ -1,12 +1,44 @@
 <app-component-docs-viewer [componentData]="componentData">
   <!-- Example of component's usage -->
-  <cps-file-upload
-    [extensions]="['.jpg', '.png', 'pdf']"
-    fileDesc="Pictures or PDFs"
-    width="500"
-    [fileProcessingCallback]="processUploadedFile"
-    (fileUploadFailed)="onFileUploadFailed($event)"
-    (fileUploaded)="onFileUploaded($event)"
-    (uploadedFileRemoved)="onUploadedFileRemoved($event)">
-  </cps-file-upload>
+  <h2 class="section-title">File upload component with the dependency on selected file extension</h2>
+  <div>
+    <p>
+      <cps-button-toggle
+        label="File extension"
+        [options]="fileUploadOptions"
+        [value]="selectedFileUploadType.value"
+        (valueChanged)="onFileExtensionChanged($event)"
+        [mandatory]="false">
+      </cps-button-toggle>
+      <br/>
+      <cps-file-upload
+        [extensions]="[selectedFileUploadType.value]"
+        [fileDesc]="selectedFileUploadType!.label || ''"
+        width="400"
+        [fileProcessingCallback]="processUploadedFile"
+        (fileUploadFailed)="onFileUploadFailed($event)"
+        (fileUploaded)="onFileUploaded($event)"
+        (uploadedFileRemoved)="onUploadedFileRemoved($event)">
+      </cps-file-upload>
+    </p>
+  </div>
+
+  <cps-divider/>
+
+  <h2 class="section-title">File upload component with extra info</h2>
+  <div>
+    <p>
+      <cps-file-upload
+        [extensions]="['.jpg', '.png', 'pdf']"
+        [fileInfo]="fileInfo"
+        fileDesc="Pictures or PDFs"
+        width="500"
+        [fileProcessingCallback]="processUploadedFile"
+        (fileUploadFailed)="onFileUploadFailed($event)"
+        (fileUploaded)="onFileUploaded($event)"
+        (uploadedFileRemoved)="onUploadedFileRemoved($event)">
+      </cps-file-upload>
+    </p>
+  </div>
+
 </app-component-docs-viewer>

projects/composition/src/app/pages/file-upload-page/file-upload-page.component.ts

@@ -1,6 +1,12 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CpsFileUploadComponent } from 'cps-ui-kit';
+import {
+  CpsFileUploadComponent,
+  CpsButtonToggleComponent,
+  CpsButtonToggleOption,
+  CpsIconComponent,
+  CpsDividerComponent
+} from 'cps-ui-kit';
 import { Observable, catchError, from, map, of } from 'rxjs';
 
 import ComponentData from '../../api-data/cps-file-upload.json';
@@ -9,14 +15,32 @@ import { ComponentDocsViewerComponent } from '../../components/component-docs-vi
 @Component({
   selector: 'app-file-upload-page',
   standalone: true,
-  imports: [CommonModule, CpsFileUploadComponent, ComponentDocsViewerComponent],
+  imports: [
+    CommonModule,
+    CpsIconComponent,
+    CpsButtonToggleComponent,
+    CpsFileUploadComponent,
+    ComponentDocsViewerComponent,
+    CpsDividerComponent
+  ],
   templateUrl: './file-upload-page.component.html',
   styleUrls: ['./file-upload-page.component.scss'],
   host: { class: 'composition-page' }
 })
 export class FileUploadPageComponent {
   componentData = ComponentData;
 
+  fileUploadOptions: CpsButtonToggleOption[] = [
+    { label: 'JPG image', value: '.jpg' },
+    { label: 'PDF document', value: '.pdf' },
+    { label: 'PNG image', value: '.png' }
+  ];
+
+  selectedFileUploadType: CpsButtonToggleOption = this.fileUploadOptions[0];
+
+  fileInfo: string =
+    'The file should be a small sample file to infer the schema, which will be shown in the next step';
+
   processUploadedFile(file: File): Observable<boolean> {
     return from(file.text()).pipe(
       map((fileContentsAsText) => {
@@ -41,4 +65,13 @@ export class FileUploadPageComponent {
   onUploadedFileRemoved(fileName: string) {
     console.log('File removed: ', fileName);
   }
+
+  onFileExtensionChanged(event: string) {
+    const foundSelectedItem = this.fileUploadOptions.find(
+      (item) => item.value === event
+    );
+    if (foundSelectedItem) {
+      this.selectedFileUploadType = foundSelectedItem;
+    }
+  }
 }

projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html

@@ -1,4 +1,4 @@
-<div class="cps-file-upload" [ngStyle]="{ width: width }">
+<div class="cps-file-upload" [ngStyle]="{ width: cvtWidth }">
   <div
     class="cps-file-upload-dropzone"
     [ngClass]="{
@@ -28,6 +28,12 @@
         extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''
       }}</span
     >
+    @if(fileInfo) {
+      <div class="cps-file-upload-dropzone-content">
+        <cps-icon color="calm" icon="info-circle" size="xsmall"></cps-icon>
+        {{fileInfo}}
+      </div>
+    }
     <cps-progress-linear
       *ngIf="isProcessingFile && uploadedFile"
       height="3"

projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss

@@ -51,6 +51,12 @@ $text-color-darkest: var(--cps-color-text-darkest);
         font-size: 18px;
         color: $text-color-dark;
       }
+
+      .cps-file-upload-dropzone-content {
+        margin-top: 16px;
+        font-size: 1rem;
+      }
+
       .cps-file-upload-progress-bar {
         position: absolute;
         bottom: -2px;

projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts

@@ -1,9 +1,17 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} 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 { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-linear.component';
-import { Observable, catchError, of, take } from 'rxjs';
 
 /**
  * CpsFileUploadComponent is an advanced uploader with dragdrop support.
@@ -16,7 +24,7 @@ import { Observable, catchError, of, take } from 'rxjs';
   templateUrl: './cps-file-upload.component.html',
   styleUrls: ['./cps-file-upload.component.scss']
 })
-export class CpsFileUploadComponent implements OnInit {
+export class CpsFileUploadComponent implements OnInit, OnChanges {
   /**
    * Expected extensions of a file to be uploaded. E.g. 'doc or .doc'.
    * @group Props
@@ -35,6 +43,12 @@ export class CpsFileUploadComponent implements OnInit {
    */
   @Input() width: number | string = '100%';
 
+  /**
+   * Expected file info block, explaining some extra stuff about file.
+   * @group Props
+   */
+  @Input() fileInfo: string = '';
+
   /**
    * Callback for uploaded file processing.
    * @group Props
@@ -67,11 +81,22 @@ export class CpsFileUploadComponent implements OnInit {
   uploadedFile?: File;
   extensionsString = '';
   extensionsStringAsterisks = '';
+  cvtWidth = '';
 
   isProcessingFile = false;
 
   ngOnInit(): void {
-    this.width = convertSize(this.width);
+    this.updateExtensionsString();
+    this.cvtWidth = convertSize(this.width);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.extensions) {
+      this.updateExtensionsString();
+    }
+  }
+
+  updateExtensionsString(): void {
     this.extensions = this.extensions.map((ext) =>
       ext.startsWith('.') ? ext : '.' + ext
     );