fix: fix files validation on file uploader, add unique ID (#3207)

BREAKING CHANGES:
file-uploader-dragndrop.directive.ts removed invalidFileDrop event, fileChanged event now throws all of dropped files wrapped in proper interface

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

@@ -55,9 +55,8 @@ export const API_FILES = {
     checkbox: ['CheckboxComponent'],
     datePicker: ['DatePickerComponent', 'DateFormatParser', 'DateFormatParserDefault', 'FdDate'],
     datetimePicker: ['DatetimePickerComponent', 'FdDateTime', 'DateTimeFormatParser', 'DateTimeFormatParserDefault'],
-    dropdown: ['PopoverDropdownComponent'],
-    fileInput: ['FileInputComponent', 'FileInputSelectDirective', 'FileInputDragndropDirective'],
-    fileUploader: ['FileUploaderComponent', 'FileUploaderSelectDirective', 'FileUploaderDragndropDirective'],
+    fileInput: ['FileInputComponent', 'FileSelectDirective', 'FileDragndropDirective'],
+    fileUploader: ['FileUploaderComponent', 'FileUploaderSelectDirective', 'FileUploaderDragndropDirective', 'FileUploaderService'],
     fixedCardLayout: ['FixedCardLayoutComponent', 'CardDefinitionDirective'],
     form: [
         'FormControlComponent',

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

@@ -1,6 +1,4 @@
 <fd-file-uploader
-    #fileUploaderCompact
-    [id]="fileUploaderCompact"
     [ariaLabel]="'Choose file'"
     [ariaLabelledBy]="'Choose file'"
     [placeholder]="'Choose File to upload'"

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

@@ -1,13 +1,11 @@
 <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!'"
+    [buttonLabel]="'Drag a .png file on me!'"
     [buttonAriaLabel]="'browse file'"
-    (selectedFilesChanged)="handleFileSection()"
+    (selectedFilesChanged)="handleFileSelection($event)"
     (selectedInvalidFiles)="handleInvalidFiles($event)"
     [accept]="'.png'"
 >

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

@@ -10,12 +10,12 @@ export class FileUploaderDragDisabledExampleComponent {
     files: File[];
     invalidFiles: File[];
 
-    handleFileSection(): void {
-        alert('Files selected successfully!!!');
+    handleFileSelection(files: File[]): void {
+        alert(files.length + ' Files selected successfully!!!');
     }
 
-    handleInvalidFiles($event): void {
-        alert(' Invalid file selection ');
-        this.invalidFiles = $event;
+    handleInvalidFiles(files: File[]): void {
+        alert(files.length + ' Invalid files selected ');
+        this.invalidFiles = files;
     }
 }

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

@@ -1,6 +1,4 @@
 <fd-file-uploader
-    #fileUploader
-    [id]="fileUploader"
     [(ngModel)]="files"
     [ariaLabel]="'Choose file'"
     [ariaLabelledBy]="'Choose file'"
@@ -9,7 +7,7 @@
     [buttonAriaLabel]="'browse file'"
     [multiple]="true"
     [accept]="'.png,.jpg'"
-    (selectedFilesChanged)="handleFileSection()"
+    (selectedFilesChanged)="handleFileSelection($event)"
 >
 </fd-file-uploader>
 

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

@@ -9,7 +9,7 @@ export class FileUploaderExampleComponent {
 
     files: File[];
 
-    handleFileSection(): void {
-        alert('Files selected successfully!!!');
+    handleFileSelection(files: File[]): void {
+        alert(files.length + ' Files selected successfully!!!');
     }
 }

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

@@ -1,14 +1,12 @@
 <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()"
+    (selectedFilesChanged)="handleFileSelection($event)"
     (selectedInvalidFiles)="handleInvalidFiles($event)"
     [maxFileSize]="'1MB'"
 ></fd-file-uploader>

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

@@ -9,14 +9,12 @@ export class FileUploaderMaxExampleComponent {
     files: File[];
     invalidFiles: File[];
 
-    handleFileSection(): void {
-
-        alert('Files selected successfully!!!');
-
+    handleFileSelection(files: File[]): void {
+        alert(files.length + ' Files selected successfully!!!');
     }
 
-    handleInvalidFiles($event): void {
-        alert(' Invalid file selection ');
-        this.invalidFiles = $event;
+    handleInvalidFiles(files: File[]): void {
+        alert(files.length + ' Invalid files selected ');
+        this.invalidFiles = files;
     }
 }

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

@@ -1,14 +1,12 @@
 <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()"
+    (selectedFilesChanged)="handleFileSelection($event)"
     (selectedInvalidFiles)="handleInvalidFiles($event)"
     [minFileSize]="'3KB'"
 >

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

@@ -9,15 +9,14 @@ export class FileUploaderMinExampleComponent {
 
     files: File[];
     invalidFiles: File[];
-    handleFileSection(): void {
-
-        alert('Files selected successfully!!!');
 
+    handleFileSelection(files: File[]): void {
+        alert(files.length + ' Files selected successfully!!!');
     }
 
-    handleInvalidFiles($event): void {
-        alert(' Invalid file selection ');
-        this.invalidFiles = $event;
+    handleInvalidFiles(files: File[]): void {
+        alert(files.length + ' Invalid files selected ');
+        this.invalidFiles = files;
     }
 
 }

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

@@ -1,6 +1,4 @@
 <fd-file-uploader
-    #fileUploaderTruncation
-    [id]="fileUploaderTruncation"
     [ariaLabel]="'Choose file'"
     [ariaLabelledBy]="'Choose file'"
     [placeholder]="'Choose file to upload to the server '"

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

@@ -16,7 +16,7 @@
 <component-example>
     <fd-file-uploader-truncation-example></fd-file-uploader-truncation-example>
 </component-example>
-<code-example [exampleFiles]="fileUpladerExample"></code-example>
+<code-example [exampleFiles]="fileTruncation"></code-example>
 
 <separator></separator>
 
@@ -48,22 +48,6 @@
 
 <separator></separator>
 
-<fd-docs-section-title [id]="'file-uploader-minMaxSize'" [componentName]="'file-uploader'">
-    Min and Max File Size
-</fd-docs-section-title>
-<description>
-    It is possible to control the size of the file through the input <code>minFileSize</code> and
-    <code>maxFileSize</code>. The size you can specify in Byte, KB, MB, GB, TB. This feature allows the user to specify
-    the minimum and maximum size, but someone knowledgeable enough could potentially bypass this. <br /><br />
-    <strong>NOTE: It is possible to bypass this client-side limit so a server-side check is still necessary.</strong>
-</description>
-<component-example>
-    <fd-file-uploader-min-and-max-size-example></fd-file-uploader-min-and-max-size-example>
-</component-example>
-<code-example [exampleFiles]="fileMinMaxSize"></code-example>
-
-<separator></separator>
-
 <fd-docs-section-title [id]="'file-uploader-minSize'" [componentName]="'file-uploader'">
     Min File Size
 </fd-docs-section-title>

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

@@ -19,10 +19,6 @@ import * as fileUploaderMaxH from '!raw-loader!./examples/file-uploader-max-exam
 import * as fileUploaderMinT from '!raw-loader!./examples/file-uploader-min-example/file-uploader-min-example.component.ts';
 import * as fileUploaderMinH from '!raw-loader!./examples/file-uploader-min-example/file-uploader-min-example.component.html';
 
-import * as fileUploaderMinMaxT from '!raw-loader!./examples/file-uploader-min-and-max-size-example/file-uploader-min-and-max-size-example.component.ts';
-import * as fileUploaderMinMaxH from '!raw-loader!./examples/file-uploader-min-and-max-size-example/file-uploader-min-and-max-size-example.component.html';
-
-
 import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
 
 @Component({
@@ -73,20 +69,6 @@ export class FileUploaderDocsComponent {
         }
     ];
 
-    fileMinMaxSize: ExampleFile[] = [
-        {
-            language: 'html',
-            code: fileUploaderMinMaxH,
-            fileName: 'file-uploader-min-and-max-example'
-        },
-        {
-            language: 'typescript',
-            component: 'FileUploaderMinMaxExampleComponent',
-            code: fileUploaderMinMaxT,
-            fileName: 'file-uploader-min-and-max-example'
-        }
-    ];
-
     fileMaxSize: ExampleFile[] = [
         {
             language: 'html',

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

@@ -11,7 +11,6 @@ import { FileUploaderMaxExampleComponent } from './examples/file-uploader-max-ex
 import { FileUploaderModule } from '@fundamental-ngx/core'
 import { FileUploaderCompactExampleComponent } from './examples/file-uploader-compact-example/file-uploader-compact-example.component';
 import { FileUploaderMinExampleComponent } from './examples/file-uploader-min-example/file-uploader-min-example.component';
-import { FileUploaderMinAndMaxSizeExampleComponent } from './examples/file-uploader-min-and-max-size-example/file-uploader-min-and-max-size-example.component';
 import { FileUploaderTruncationExampleComponent } from './examples/file-uploader-truncation-example/file-uploader-truncation-example.component';
 
 const routes: Routes = [
@@ -36,7 +35,6 @@ const routes: Routes = [
         FileUploaderDragDisabledExampleComponent,
         FileUploaderCompactExampleComponent,
         FileUploaderMinExampleComponent,
-        FileUploaderMinAndMaxSizeExampleComponent,
         FileUploaderTruncationExampleComponent
     ]
 })

libs/core/src/lib/file-uploader/directives/file-uploader-dragndrop.directive.ts

@@ -1,10 +1,11 @@
 import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { FileUploaderService, FileUploadOutput } from '../file-uploader.service';
 
 /**
  * Directive that handles the drag and drop feature of the file input.
  */
 @Directive({
-    selector: '[fdFileDragnDrop]'
+    selector: '[fdFileDragnDrop], [fd-file-drag-n-drop]'
 })
 export class FileUploaderDragndropDirective {
     /** Whether multiple files can be dropped at once. */
@@ -15,6 +16,14 @@ export class FileUploaderDragndropDirective {
     @Input()
     accept: string;
 
+    /** Max file size in bytes that the input will accept. */
+    @Input()
+    maxFileSize = '';
+
+    /** Min file size in bytes that the input will accept. */
+    @Input()
+    minFileSize = '';
+
     /** Whether selecting of new files is disabled. */
     @Input()
     disabled = false;
@@ -23,13 +32,9 @@ export class FileUploaderDragndropDirective {
     @Input()
     dragndrop = true;
 
-    /** Event emitted when files are selected. Passes back an array of files. */
+    /** Event emitted when files are dropped. Passes back an array of files. */
     @Output()
-    readonly fileChanged = new EventEmitter<File[]>();
-
-    /** Event emitted when invalid files are selected. Passes back an array of files. */
-    @Output()
-    readonly invalidFileDrop = new EventEmitter<File[]>();
+    readonly fileChanged = new EventEmitter<FileUploadOutput>();
 
     /** Event emitted when the dragged file enters the dropzone. */
     @Output()
@@ -41,6 +46,10 @@ export class FileUploaderDragndropDirective {
 
     private elementStateCounter = 0;
 
+    constructor(
+        private _fileUploadService: FileUploaderService,
+    ) {}
+
     /** @hidden */
     @HostListener('dragover', ['$event'])
     public onDragover(event: Event): void {
@@ -81,32 +90,18 @@ export class FileUploaderDragndropDirective {
         const files: File[] = Array.from(rawFiles);
 
         if (!this.multiple && files.length > 1) {
-            this.invalidFileDrop.emit(files);
+            this.fileChanged.emit({
+                validFiles: [],
+                invalidFiles: files
+            });
             return;
         }
 
-        const validFiles: File[] = [];
-        const invalidFiles: File[] = [];
-        if (files.length > 0) {
-            if (!this.accept) {
-                files.forEach((file: File) => {
-                    validFiles.push(file);
-                });
-            } else {
-                const allowedExtensions = this.accept.toLocaleLowerCase().replace(/[\s.]/g, '').split(',');
-                files.forEach((file: File) => {
-                    const extension = file.name.split('.')[file.name.split('.').length - 1];
-                    if (allowedExtensions.lastIndexOf(extension) !== -1) {
-                        validFiles.push(file);
-                    } else {
-                        invalidFiles.push(file);
-                    }
-                });
-            }
-            this.fileChanged.emit(validFiles);
-            this.invalidFileDrop.emit(invalidFiles);
+        const fileOutput: FileUploadOutput = this._fileUploadService.validateFiles(
+            files, this.minFileSize, this.maxFileSize, this.accept
+        )
 
-        }
+        this.fileChanged.emit(fileOutput);
     }
 
     /** @hidden */