Merge branch 'master' into label-issue

Author: zvonimirfras

src/file-uploader/file-uploader.component.spec.ts

@@ -120,5 +120,26 @@ describe("FileUploader", () => {
 
 		expect(element.nativeElement.querySelector(".bx--file__state-container .bx--file--invalid")).toBeTruthy();
 	});
+
+	it("should correctly update this.files when onFilesAdded is called", () => {
+		fixture = TestBed.createComponent(FileUploader);
+		wrapper = fixture.componentInstance;
+		fixture.detectChanges();
+
+		const fileAlreadyAdded = new File([""], "test-filename-added", {type: "text/html"});
+		const currentFiles = new Set().add(wrapper.createFileItem(fileAlreadyAdded));
+		wrapper.files = currentFiles;
+		fixture.detectChanges();
+		expect(wrapper.value).toBe(currentFiles);
+
+		const dataTransfer = new DataTransfer();
+		const fileToAdd = new File(["test file"], "test-filename", {type: "text/html"});
+		dataTransfer.items.add(fileToAdd);
+		wrapper.fileInput.nativeElement.files = dataTransfer.files;
+		fixture.detectChanges();
+		wrapper.onFilesAdded();
+		const filesArray: FileItem[] = Array.from(wrapper.files);
+		expect(!!filesArray.find((fileItem: FileItem) => fileItem.file.name === fileToAdd.name)).toBe(true);
+	});
 });
 

src/file-uploader/file-uploader.component.ts

@@ -6,7 +6,7 @@ import {
 	EventEmitter,
 	TemplateRef
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { I18n } from "carbon-components-angular/i18n";
 import { FileItem } from "./file-item.interface";
@@ -90,7 +90,7 @@ const noop = () => { };
 		}
 	]
 })
-export class FileUploader {
+export class FileUploader implements ControlValueAccessor {
 	/**
 	 * Counter used to create unique ids for file-uploader components
 	 */
@@ -212,16 +212,17 @@ export class FileUploader {
 	}
 
 	onFilesAdded() {
+		const newFiles = new Set<FileItem>(this.files);
 		if (!this.multiple) {
-			this.files.clear();
+			newFiles.clear();
 		}
 		for (let file of this.fileList) {
 			const fileItem = this.createFileItem(file);
-			this.files.add(fileItem);
+			newFiles.add(fileItem);
 		}
 
-		this.filesChange.emit(this.files);
-		this.value = this.files;
+		this.value = newFiles;
+		this.filesChange.emit(newFiles);
 	}
 
 	onDragOver(event) {
@@ -287,4 +288,15 @@ export class FileUploader {
 	registerOnChange(fn: any) {
 		this.onChangeCallback = fn;
 	}
+
+	/**
+	 * `ControlValueAccessor` method to programmatically disable the checkbox.
+	 *
+	 * ex: `this.formGroup.get("myFileUploader").disable();`
+	 *
+	 * @param isDisabled `true` to disable the file uploader
+	 */
+	setDisabledState(isDisabled: boolean) {
+		this.disabled = isDisabled;
+	}
 }

src/file-uploader/file-uploader.stories.ts

@@ -295,11 +295,29 @@ class NgModelFileUploaderStory {
 				Upload
 			</button>
 		</form>
+		<form [formGroup]="disabledFormGroup" (ngSubmit)="onUpload()">
+			<ibm-file-uploader
+				[title]="title"
+				[description]="description"
+				[buttonText]="buttonText"
+				[buttonType]="buttonType"
+				[accept]="accept"
+				[multiple]="multiple"
+				[skeleton]="skeleton"
+				[size]="size"
+				formControlName="files">
+			</ibm-file-uploader>
+			<div [id]="notificationId" style="width: 300px; margin-top: 20px"></div>
+			<button ibmButton *ngIf="disabledFormGroup.get('files').value && disabledFormGroup.get('files').value.size > 0" type="submit">
+				Upload
+			</button>
+		</form>
 	`
 })
 class ReactiveFormsStory implements OnInit {
 	static notificationCount = 0;
 	public formGroup: FormGroup;
+	public disabledFormGroup: FormGroup;
 
 	@Input() notificationId = `notification-${FileUploaderStory.notificationCount}`;
 	@Input() title;
@@ -325,6 +343,10 @@ class ReactiveFormsStory implements OnInit {
 		this.formGroup = this.formBuilder.group({
 			files: new FormControl(new Set<any>(), [Validators.required])
 		});
+		this.disabledFormGroup = this.formBuilder.group({
+			files: new FormControl(new Set<any>(), [Validators.required])
+		});
+		this.disabledFormGroup.disable();
 	}
 
 	onUpload() {