Fix: file uploader valueChanges event to fire for dragAndDrop

Signed-off-by: anemonetea <[email protected]>

Author: anemonetea

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

@@ -172,7 +172,8 @@ export class FileUploader implements ControlValueAccessor {
 	}
 
 	/**
-	 * Specifies the property to be used as the return value to `ngModel`
+	 * Specifies the property to be used as the return value to `ngModel` and reactive forms.
+	 * Updates `this.files`.
 	 */
 	get value(): Set<FileItem> {
 		return this.files;
@@ -241,35 +242,37 @@ export class FileUploader implements ControlValueAccessor {
 		event.stopPropagation();
 		event.preventDefault();
 
-		const transferredFiles = Array.from(event.dataTransfer.files);
+		const transferredFiles: Array<File> = Array.from(event.dataTransfer.files);
+		const newFiles = new Set<FileItem>(this.files);
 
 		transferredFiles.filter(({ name, type }) => {
 			// Get the file extension and add a "." to the beginning.
 			const fileExtension = name.split(".").pop().replace(/^/, ".");
 			// Check if the accept array contains the mime type or extension of the file.
 			return this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;
 		}).forEach(file => {
-			if (!this.files.size || this.multiple) {
+			if (!newFiles.size || this.multiple) {
 				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);
 		this.dragOver = false;
 	}
 
 	removeFile(fileItem) {
-		let shouldEmit = true;
-		if (this.files) {
-			shouldEmit = this.files.has(fileItem);
-			this.files.delete(fileItem);
+		// Deleting an item from this.files removes the <ibm-file> component,
+		// which triggers its ngOnDestroy(), which fires the (remove) event again.
+		// So, (remove) may double-fire and we need to handle it here.
+		if (this.files && this.files.has(fileItem)) {
+			const newFiles = new Set<FileItem>(this.files);
+			newFiles.delete(fileItem);
+			this.filesChange.emit(newFiles);
+			this.value = newFiles;
 		}
 		this.fileInput.nativeElement.value = "";
-		if (shouldEmit) {
-			this.filesChange.emit(this.files);
-		}
 	}
 
 	public isTemplate(value) {

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 
 import { action } from "@storybook/addon-actions";
@@ -20,6 +20,7 @@ import { NotificationService } from "../notification/notification.service";
 import * as fileType from "file-type";
 import { DocumentationModule } from "../documentation-component/documentation.module";
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
+import { Subject, Subscription } from "rxjs";
 
 @Component({
 	selector: "app-file-uploader",
@@ -65,7 +66,7 @@ class FileUploaderStory {
 	}
 
 	onUpload() {
-		this.files.forEach(fileItem => {
+		this.files.forEach((fileItem: any) => {
 			if (!fileItem.uploaded) {
 				if (fileItem.file.size < this.maxSize) {
 					fileItem.state = "upload";
@@ -177,7 +178,7 @@ class DragAndDropStory {
 	}
 
 	onUpload() {
-		this.files.forEach(fileItem => {
+		this.files.forEach((fileItem: any) => {
 			if (!fileItem.uploaded) {
 				if (fileItem.file.size < this.maxSize) {
 					fileItem.state = "upload";
@@ -250,14 +251,14 @@ class NgModelFileUploaderStory {
 	}
 
 	onUpload() {
-		this.model.forEach(fileItem => {
+		this.model.forEach((fileItem: any) => {
 			if (!fileItem.uploaded) {
 				if (fileItem.file.size < this.maxSize) {
 					fileItem.state = "upload";
 					setTimeout(() => {
 						fileItem.state = "complete";
 						fileItem.uploaded = true;
-						console.log(fileItem);
+						console.log("Uploaded file:", fileItem);
 					}, 1500);
 				}
 
@@ -314,7 +315,7 @@ class NgModelFileUploaderStory {
 		</form>
 	`
 })
-class ReactiveFormsStory implements OnInit {
+class ReactiveFormsStory implements OnInit, OnDestroy {
 	static notificationCount = 0;
 	public formGroup: FormGroup;
 	public disabledFormGroup: FormGroup;
@@ -331,6 +332,7 @@ class ReactiveFormsStory implements OnInit {
 	@Input() disabled = false;
 
 	protected maxSize = 500000;
+	private subscribers: Subscription[] = [];
 
 	constructor(
 		protected notificationService: NotificationService,
@@ -347,6 +349,15 @@ class ReactiveFormsStory implements OnInit {
 			files: new FormControl(new Set<any>(), [Validators.required])
 		});
 		this.disabledFormGroup.disable();
+
+		const sub = this.formGroup.valueChanges.subscribe(this.fileChangesObserver);
+		this.subscribers.push(sub);
+	}
+
+	ngOnDestroy() {
+		this.subscribers.forEach(sub => {
+			sub.unsubscribe();
+		});
 	}
 
 	onUpload() {
@@ -357,6 +368,7 @@ class ReactiveFormsStory implements OnInit {
 					setTimeout(() => {
 						fileItem.state = "complete";
 						fileItem.uploaded = true;
+						console.log("Uploaded file:", fileItem);
 					}, 1500);
 				}
 
@@ -371,6 +383,10 @@ class ReactiveFormsStory implements OnInit {
 			}
 		});
 	}
+
+	private fileChangesObserver = (value: {files: Set<File>}) => {
+		console.log("files:", value.files);
+	}
 }