feat(components/forms): file drop add control value accessor

apps/code-examples/src/app/code-examples/forms/file-drop/basic/demo.component.html

@@ -1,17 +1,18 @@
-<sky-file-drop
-  linkUploadHintText="Start with http:// or https://"
-  [acceptedTypes]="acceptedTypes"
-  [allowLinks]="true"
-  [hintText]="hintText"
-  [helpPopoverContent]="inlineHelpContent"
-  [labelText]="labelText"
-  [maxFileSize]="maxFileSize"
-  [required]="required"
-  [stacked]="stacked"
-  [validateFn]="validateFile"
-  (filesChanged)="onFilesChanged($event)"
-  (linkChanged)="onLinkChanged($event)"
-/>
-@for (file of allItems; track file) {
+<form [formGroup]="formGroup">
+  <sky-file-drop
+    linkUploadHintText="Start with http:// or https://"
+    formControlName="fileDrop"
+    [acceptedTypes]="acceptedTypes"
+    [allowLinks]="true"
+    [hintText]="hintText"
+    [helpPopoverContent]="inlineHelpContent"
+    [labelText]="labelText"
+    [maxFileSize]="maxFileSize"
+    [stacked]="stacked"
+    [validateFn]="validateFile"
+  />
+</form>
+
+@for (file of fileDrop.value; track file) {
   <sky-file-item [fileItem]="file" (deleteFile)="deleteFile($event)" />
 }

apps/code-examples/src/app/code-examples/forms/file-drop/basic/demo.component.ts

@@ -1,17 +1,27 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import {
-  SkyFileDropChange,
-  SkyFileDropModule,
-  SkyFileItem,
-  SkyFileLink,
-} from '@skyux/forms';
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { SkyFileDropModule, SkyFileItem, SkyFileLink } from '@skyux/forms';
 import { SkyStatusIndicatorModule } from '@skyux/indicators';
 
 @Component({
   standalone: true,
   selector: 'app-demo',
   templateUrl: './demo.component.html',
-  imports: [SkyFileDropModule, SkyStatusIndicatorModule],
+  imports: [
+    SkyFileDropModule,
+    SkyStatusIndicatorModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
 export class DemoComponent {
   protected acceptedTypes = 'image/png,image/jpeg';
@@ -22,45 +32,34 @@ export class DemoComponent {
   protected labelText = 'Logo image';
   protected maxFileSize = 5242880;
   protected rejectedFiles: SkyFileItem[] = [];
-  protected required = true;
   protected stacked = 'true';
 
-  #filesToUpload: SkyFileItem[] = [];
-  #linksToUpload: SkyFileLink[] = [];
+  protected formGroup: FormGroup;
+  protected fileDrop: FormControl<
+    (SkyFileItem | SkyFileLink)[] | null | undefined
+  >;
 
-  protected deleteFile(file: SkyFileItem | SkyFileLink): void {
-    this.#removeFromArray(this.allItems, file);
-    this.#removeFromArray(this.#filesToUpload, file);
-    this.#removeFromArray(this.#linksToUpload, file);
+  constructor(formBuilder: FormBuilder) {
+    this.fileDrop = new FormControl(undefined, Validators.required);
+    this.formGroup = formBuilder.group({
+      fileDrop: this.fileDrop,
+    });
   }
 
-  protected onFilesChanged(change: SkyFileDropChange): void {
-    this.#filesToUpload = this.#filesToUpload.concat(change.files);
-    this.rejectedFiles = change.rejectedFiles;
-    this.allItems = this.allItems.concat(change.files);
-  }
+  protected deleteFile(file: SkyFileItem | SkyFileLink): void {
+    const index = this.fileDrop.value?.indexOf(file);
 
-  protected onLinkChanged(change: SkyFileLink): void {
-    this.#linksToUpload = this.#linksToUpload.concat(change);
-    this.allItems = this.allItems.concat(change);
+    if (index !== undefined && index !== -1) {
+      this.fileDrop.value?.splice(index, 1);
+    }
+    if (this.fileDrop.value?.length === 0) {
+      this.fileDrop.setValue(null);
+    }
   }
 
   protected validateFile(file: SkyFileItem): string | undefined {
     return file.file.name.startsWith('a')
       ? 'Upload a file that does not begin with the letter "a"'
       : undefined;
   }
-
-  #removeFromArray(
-    items: (SkyFileItem | SkyFileLink)[],
-    obj: SkyFileItem | SkyFileLink,
-  ): void {
-    if (items) {
-      const index = items.indexOf(obj);
-
-      if (index !== -1) {
-        items.splice(index, 1);
-      }
-    }
-  }
 }

apps/playground/src/app/components/forms/file-attachment/file-attachment.component.html

@@ -1,35 +1,31 @@
-<sky-file-drop
-  hintText="Really long hint text that should wrap and be confined to below the file drop element. We set the text to have a small margin below the drop and link controls, and if there are any errors (shown below) there will be a slight spacing between this element and those errors."
-  labelText="File attachment field"
-  linkUploadHintText="Start with http:// or https://"
-  helpKey="help.html"
-  [acceptedTypes]="acceptedTypes"
-  [allowLinks]="true"
-  [maxFileSize]="maxFileSize"
-  [minFileSize]="minFileSize"
-  [required]="required"
-  [validateFn]="validateFile"
-  [stacked]="true"
-  (filesChanged)="filesUpdated($event)"
-  (linkChanged)="linkAdded($event)"
-/>
-@for (file of allItems; track file) {
-  <sky-file-item [fileItem]="file" (deleteFile)="deleteFile($event)"
-    ><input type="text"
-  /></sky-file-item>
-}
-
 <form [formGroup]="formGroup">
-  <sky-file-attachment
+  <sky-file-drop
+    hintText="Really long hint text that should wrap and be confined to below the file drop element. We set the text to have a small margin below the drop and link controls, and if there are any errors (shown below) there will be a slight spacing between this element and those errors."
+    labelText="File attachment field"
+    linkUploadHintText="Start with http:// or https://"
+    helpKey="help.html"
     formControlName="attachment"
-    helpPopoverContent="Sample help content"
-    helpPopoverTitle="Inline help"
-    hintText="Sample hint text"
-    labelText="Single file attachment"
-    required="true"
     [acceptedTypes]="acceptedTypes"
+    [allowLinks]="true"
     [maxFileSize]="maxFileSize"
+    [required]="required"
     [validateFn]="validateFile"
-    (fileChange)="onFileChange($event)"
+    [stacked]="true"
   />
 </form>
+
+@for (file of attachment.value; track file) {
+  <sky-file-item [fileItem]="file" (deleteFile)="deleteFile($event)" />
+}
+
+Values
+<div>Touched: {{ attachment.touched }}</div>
+<div>Dirty: {{ attachment.dirty }}</div>
+<div>Value: {{ attachment.value | json }}</div>
+
+<button class="sky-btn sky-btn-primary" type="button" (click)="markTouched()">
+  mark touched
+</button>
+<button class="sky-btn sky-btn-primary" type="button" (click)="setFiles()">
+  set files
+</button>

apps/playground/src/app/components/forms/file-attachment/file-attachment.component.ts

@@ -1,17 +1,11 @@
 import { Component, inject } from '@angular/core';
 import {
-  AbstractControl,
   FormBuilder,
   FormControl,
   FormGroup,
   Validators,
 } from '@angular/forms';
-import {
-  SkyFileAttachmentChange,
-  SkyFileDropChange,
-  SkyFileItem,
-  SkyFileLink,
-} from '@skyux/forms';
+import { SkyFileItem, SkyFileLink } from '@skyux/forms';
 
 @Component({
   selector: 'app-file-attachment-demo',
@@ -22,49 +16,29 @@ export class FileAttachmentComponent {
 
   public allItems: (SkyFileItem | SkyFileLink)[];
 
-  public filesToUpload: SkyFileItem[];
-
-  public linksToUpload: SkyFileLink[];
-
   public maxFileSize = 4000000;
   public minFileSize = 300000;
 
-  public rejectedFiles: SkyFileItem[];
-
-  protected attachment: FormControl<SkyFileItem>;
+  protected attachment: FormControl<(SkyFileItem | SkyFileLink)[]>;
   protected formGroup: FormGroup;
   protected required = true;
 
-  get #reactiveFile(): AbstractControl | null {
-    return this.formGroup.get('attachment');
-  }
-
   constructor() {
-    this.filesToUpload = [];
-    this.rejectedFiles = [];
     this.allItems = [];
-    this.linksToUpload = [];
     this.attachment = new FormControl(undefined, Validators.required);
     this.formGroup = inject(FormBuilder).group({
       attachment: this.attachment,
     });
   }
 
   public deleteFile(file: SkyFileItem | SkyFileLink): void {
-    this.#removeFromArray(this.allItems, file);
-    this.#removeFromArray(this.filesToUpload, file);
-    this.#removeFromArray(this.linksToUpload, file);
-  }
-
-  public filesUpdated(result: SkyFileDropChange): void {
-    this.filesToUpload = this.filesToUpload.concat(result.files);
-    this.rejectedFiles = result.rejectedFiles;
-    this.allItems = this.allItems.concat(result.files);
-  }
-
-  public linkAdded(result: SkyFileLink): void {
-    this.linksToUpload = this.linksToUpload.concat(result);
-    this.allItems = this.allItems.concat(result);
+    const index = this.attachment.value.indexOf(file);
+    if (index !== -1) {
+      this.attachment.value.splice(index, 1);
+    }
+    if (this.attachment.value.length === 0) {
+      this.attachment.setValue(null);
+    }
   }
 
   public validateFile(file: SkyFileItem): string {
@@ -73,23 +47,20 @@ export class FileAttachmentComponent {
     }
   }
 
-  protected onFileChange(result: SkyFileAttachmentChange): void {
-    const file = result.file;
-
-    if (file && file.errorType) {
-      this.#reactiveFile?.setValue(undefined);
-    } else {
-      this.#reactiveFile?.setValue(file);
-    }
+  public markTouched(): void {
+    this.attachment.markAsTouched();
   }
 
-  #removeFromArray(items: any[], obj: SkyFileItem | SkyFileLink): void {
-    if (items) {
-      const index = items.indexOf(obj);
+  public setFiles(): void {
+    const file: SkyFileItem = {
+      file: new File([], 'foo.bar', { type: 'image/png' }),
+      url: 'foo.bar.bar',
+    };
 
-      if (index !== -1) {
-        items.splice(index, 1);
-      }
-    }
+    const link: SkyFileLink = {
+      url: 'foo.foo',
+    };
+
+    this.attachment.setValue([file, link]);
   }
 }

apps/playground/src/app/components/forms/file-attachment/file-attachment.module.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SkyFileAttachmentsModule } from '@skyux/forms';
@@ -11,6 +12,7 @@ import { FileAttachmentComponent } from './file-attachment.component';
 
 @NgModule({
   imports: [
+    CommonModule,
     FileAttachmentRoutingModule,
     FormsModule,
     ReactiveFormsModule,

libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html

@@ -167,7 +167,7 @@
 
 <sky-form-errors
   [id]="errorId"
-  [errors]="ngControl?.errors ?? fileErrorValidation"
+  [errors]="ngControl?.errors"
   [labelText]="labelText"
   [touched]="ngControl?.touched"
   [dirty]="ngControl?.dirty"

libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts

@@ -594,8 +594,18 @@ export class SkyFileAttachmentComponent
     }
   }
 
-  #handleFiles(files?: FileList | null): void {
-    if (files) {
+  #handleFiles(fileList?: FileList | null): void {
+    if (fileList) {
+      const files: SkyFileItem[] = [];
+
+      if ('item' in fileList) {
+        for (let index = 0; index < fileList.length; index++) {
+          files.push({
+            file: fileList.item(index),
+          } as SkyFileItem);
+        }
+      }
+
       const processedFiles = this.#fileAttachmentService.checkFiles(
         files,
         this.minFileSize,

libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.service.ts

@@ -9,19 +9,15 @@ import { SkyFileValidateFn } from '../shared/file-validate-function';
 @Injectable()
 export class SkyFileAttachmentService {
   public checkFiles(
-    files: FileList,
+    files: SkyFileItem[],
     minFileSize: number,
     maxFileSize: number,
     acceptedTypes?: string,
     validateFn?: SkyFileValidateFn,
   ): SkyFileItem[] {
     const fileResults: SkyFileItem[] = [];
 
-    for (let index = 0; index < files.length; index++) {
-      const fileItem = {
-        file: files.item(index),
-      } as SkyFileItem;
-
+    files.forEach((fileItem) => {
       if (fileItem.file.size < minFileSize) {
         fileItem.errorType = 'minFileSize';
         fileItem.errorParam = minFileSize.toString();
@@ -45,7 +41,7 @@ export class SkyFileAttachmentService {
       } else {
         fileResults.push(fileItem);
       }
-    }
+    });
     return fileResults;
   }