feat: introduce File Uploader component (#2947)

* [ci skip] Fix(File Uploader):Introduncing new fiori3 file uploader component

* [ci skip]Fix:File uploader adding unit test case and review comments fix

* [ci skip]Fix:File uploader fixing lint errors

* [ci skip] Fix(File Uploader):Introduncing new fiori3 file uploader component

* [ci skip]Fix:(File uploader) changes to fix lint error after rebasing

* [ci skip]Fix:(File uploader) changes to fix merge issue

* [ci skip] Fix(file uploader): reomve insline style

* [ci skip] Fix(file uploader): resolve conflicts

* [ci skip] Fix(file uploader): adding unique id's to example pages

* Fix(Core)File Uploader: Introducing new file uploader component

* Fix(File Uploader):Changes contains fix for file uploader review comments given by Edrez and Mikerodonnel

* Fix(File uploader):Adding @hidden annotation

* Fix(File Uploader):fix for build error

* Fix(file uploader):update new style version

* Fix(file uploader):test case fix

* Fix(file uploader): remove changelog.md file

* Fix(File Uploader): Modifieing the description for compact file uploader example

* Fix(File uploader) Changing to SharedDocumetationPage module

apps/docs/src/app/core/api-files.ts

@@ -40,6 +40,7 @@ export const API_FILES = {
     datetimePicker: ['DatetimePickerComponent', 'FdDateTime', 'DateTimeFormatParser', 'DateTimeFormatParserDefault'],
     dropdown: ['PopoverDropdownComponent'],
     fileInput: ['FileInputComponent', 'FileSelectDirective', 'FileDragndropDirective'],
+    fileUploader: ['FileUploaderComponent', 'FileUploaderSelectDirective', 'FileUploaderDragndropDirective'],
     form: [
         'FormControlDirective',
         'FormGroupComponent',

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-compact-example/file-uploader-compact-example.component.html

@@ -0,0 +1,21 @@
+<fd-file-uploader
+    #fileUploaderCompact
+    [id]="fileUploaderCompact"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Choose File to upload'"
+    [buttonLabel]="'Browse...'"
+    [buttonAriaLabel]="'browse file'"
+    [(ngModel)]="files"
+    [multiple]="true"
+    [accept]="'.png,.jpg'"
+    [compact]="true"
+>
+</fd-file-uploader>
+
+<br /><br />
+Files Selected:
+<br />
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br />
+</span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-compact-example/file-uploader-compact-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-compact-example/file-uploader-compact-example.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-compact-example',
+    templateUrl: './file-uploader-compact-example.component.html',
+    styleUrls: ['./file-uploader-compact-example.component.scss']
+})
+export class FileUploaderCompactExampleComponent {
+
+    files: File[];
+
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-drag-disabled-example/file-uploader-drag-disabled-example.component.html

@@ -0,0 +1,30 @@
+<fd-file-uploader
+    #fileUploaderDrag
+    [id]="fileUploaderDrag"
+    [(ngModel)]="files"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Choose File to upload'"
+    [buttonLabel]="'Drag a .jpg file on me!'"
+    [buttonAriaLabel]="'browse file'"
+    (selectedFilesChanged)="handleFileSection()"
+    (selectedInvalidFiles)="handleInvalidFiles($event)"
+    [accept]="'.png'"
+>
+</fd-file-uploader>
+
+<br /><br />
+
+Files Selected:
+<br />
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br />
+</span>
+
+<br />
+
+Invalid Files:
+<br />
+<span *ngFor="let file of invalidFiles">
+    <span class="red">{{ file.name }} </span><br
+/></span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-drag-disabled-example/file-uploader-drag-disabled-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-drag-disabled-example/file-uploader-drag-disabled-example.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-drag-disabled-example',
+    templateUrl: './file-uploader-drag-disabled-example.component.html',
+    styleUrls: ['./file-uploader-drag-disabled-example.component.scss']
+})
+export class FileUploaderDragDisabledExampleComponent {
+
+    files: File[];
+    invalidFiles: File[];
+
+    handleFileSection(): void {
+        alert('Files selected successfully!!!');
+    }
+
+    handleInvalidFiles($event): void {
+        alert(' Invalid file selection ');
+        this.invalidFiles = $event;
+    }
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-example/file-uploader-example.component.html

@@ -0,0 +1,22 @@
+<fd-file-uploader
+    #fileUploader
+    [id]="fileUploader"
+    [(ngModel)]="files"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Select the file '"
+    [buttonLabel]="'Browse'"
+    [buttonAriaLabel]="'browse file'"
+    [multiple]="true"
+    [accept]="'.png,.jpg'"
+    (selectedFilesChanged)="handleFileSection()"
+>
+</fd-file-uploader>
+
+<br /><br />
+Files Selected:
+<br />
+
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br />
+</span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-example/file-uploader-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-example/file-uploader-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-example',
+    templateUrl: './file-uploader-example.component.html',
+    styleUrls: ['./file-uploader-example.component.scss']
+})
+export class FileUploaderExampleComponent {
+
+    files: File[];
+
+    handleFileSection(): void {
+        alert('Files selected successfully!!!');
+    }
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-max-example/file-uploader-max-example.component.html

@@ -0,0 +1,30 @@
+<fd-file-uploader
+    #fileUploaderMax
+    [id]="fileUploaderMax"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Choose File to upload'"
+    [buttonLabel]="'Browse...'"
+    [buttonAriaLabel]="'browse file'"
+    [multiple]="true"
+    [(ngModel)]="files"
+    (selectedFilesChanged)="handleFileSection()"
+    (selectedInvalidFiles)="handleInvalidFiles($event)"
+    [maxFileSize]="'1MB'"
+></fd-file-uploader>
+
+<br />
+<br />
+Selected Files:
+<br />
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br
+/></span>
+
+<br />
+
+Invalid Files:
+<br />
+<span *ngFor="let file of invalidFiles">
+    <span class="red">{{ file.name }} </span><br
+/></span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-max-example/file-uploader-max-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-max-example/file-uploader-max-example.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-max-example',
+    templateUrl: './file-uploader-max-example.component.html',
+    styleUrls: ['./file-uploader-max-example.component.scss']
+})
+export class FileUploaderMaxExampleComponent {
+    files: File[];
+    invalidFiles: File[];
+
+    handleFileSection(): void {
+
+        alert('Files selected successfully!!!');
+
+    }
+
+    handleInvalidFiles($event): void {
+        alert(' Invalid file selection ');
+        this.invalidFiles = $event;
+    }
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-min-and-max-size-example/file-uploader-min-and-max-size-example.component.html

@@ -0,0 +1,32 @@
+<fd-file-uploader
+    #fileUploaderMinAndMax
+    [id]="fileUploaderMinAndMax"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Choose File to upload'"
+    [buttonLabel]="'Browse...'"
+    [buttonAriaLabel]="'browse file'"
+    [(ngModel)]="files"
+    [multiple]="true"
+    (selectedFilesChanged)="handleFileSection()"
+    (selectedInvalidFiles)="handleInvalidFiles($event)"
+    [minFileSize]="'1KB'"
+    [maxFileSize]="'1MB'"
+>
+</fd-file-uploader>
+
+<br /><br />
+
+Files Selected:
+<br />
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br
+/></span>
+
+<br />
+
+Invalid Files:
+<br />
+<span *ngFor="let file of invalidFiles">
+    <span class="red">{{ file.name }} </span><br
+/></span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-min-and-max-size-example/file-uploader-min-and-max-size-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-min-and-max-size-example/file-uploader-min-and-max-size-example.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-min-and-max-size-example',
+    templateUrl: './file-uploader-min-and-max-size-example.component.html',
+    styleUrls: ['./file-uploader-min-and-max-size-example.component.scss']
+})
+export class FileUploaderMinAndMaxSizeExampleComponent {
+    files: File[];
+    invalidFiles: File[];
+
+    handleFileSection(): void {
+        alert('Files selected successfully!!!');
+    }
+
+    handleInvalidFiles($event): void {
+        alert(' Invalid file selection ');
+        this.invalidFiles = $event;
+    }
+
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-min-example/file-uploader-min-example.component.html

@@ -0,0 +1,31 @@
+<fd-file-uploader
+    #fileUploaderMin
+    [id]="fileUploaderMin"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Choose File to upload'"
+    [buttonLabel]="'Browse...'"
+    [buttonAriaLabel]="'browse file'"
+    [multiple]="true"
+    [(ngModel)]="files"
+    (selectedFilesChanged)="handleFileSection()"
+    (selectedInvalidFiles)="handleInvalidFiles($event)"
+    [minFileSize]="'3KB'"
+>
+</fd-file-uploader>
+
+<br /><br />
+
+Files Selected:
+<br />
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br
+/></span>
+
+<br />
+
+Invalid Files:
+<br />
+<span *ngFor="let file of invalidFiles">
+    <span class="red">{{ file.name }} </span><br />
+</span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-min-example/file-uploader-min-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-min-example/file-uploader-min-example.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-min-example',
+    templateUrl: './file-uploader-min-example.component.html',
+    styleUrls: ['./file-uploader-min-example.component.scss']
+})
+export class FileUploaderMinExampleComponent {
+
+    files: File[];
+    invalidFiles: File[];
+    handleFileSection(): void {
+
+        alert('Files selected successfully!!!');
+
+    }
+
+    handleInvalidFiles($event): void {
+        alert(' Invalid file selection ');
+        this.invalidFiles = $event;
+    }
+
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-truncation-example/file-uploader-truncation-example.component.html

@@ -0,0 +1,22 @@
+<fd-file-uploader
+    #fileUploaderTruncation
+    [id]="fileUploaderTruncation"
+    [ariaLabel]="'Choose file'"
+    [ariaLabelledBy]="'Choose file'"
+    [placeholder]="'Choose file to upload to the server '"
+    [buttonLabel]="'Browse'"
+    [buttonAriaLabel]="'browse file'"
+    [multiple]="true"
+    [(ngModel)]="files"
+    [accept]="'.png,.jpg'"
+    (selectedFilesChanged)="this.files = $event"
+>
+</fd-file-uploader>
+
+<br /><br />
+Files Selected:
+<br />
+
+<span *ngFor="let file of files">
+    <span class="green">{{ file.name }} </span><br />
+</span>

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-truncation-example/file-uploader-truncation-example.component.scss

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.green {
+  color: seagreen;
+}

apps/docs/src/app/core/component-docs/file-uploader/examples/file-uploader-truncation-example/file-uploader-truncation-example.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-file-uploader-truncation-example',
+    templateUrl: './file-uploader-truncation-example.component.html',
+    styleUrls: ['./file-uploader-truncation-example.component.scss']
+})
+export class FileUploaderTruncationExampleComponent {
+
+    files: File[];
+}