Improve captions UX (at least I've tried)

3 files changed, 7 insertions, 1 deletions

diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts
index 441ec8203..e4f7481b5 100644
--- a/client/src/app/shared/forms/form-reactive.ts
+++ b/client/src/app/shared/forms/form-reactive.ts
@@ -10,6 +10,7 @@ export type FormReactiveValidationMessages = {
 
 export abstract class FormReactive {
   protected abstract formValidatorService: FormValidatorService
+  protected formChanged = false
 
   form: FormGroup
   formErrors: FormReactiveErrors
@@ -31,6 +32,8 @@ export abstract class FormReactive {
       this.formErrors[ field ] = ''
       const control = this.form.get(field)
 
+      if (control.dirty) this.formChanged = true
+
       // Don't care if dirty on force check
       const isDirty = control.dirty || forceCheck === true
       if (control && isDirty && !control.valid) {
diff --git a/client/src/app/shared/forms/reactive-file.component.html b/client/src/app/shared/forms/reactive-file.component.html
index 9fb1c9e3e..7d691059d 100644
--- a/client/src/app/shared/forms/reactive-file.component.html
+++ b/client/src/app/shared/forms/reactive-file.component.html
@@ -4,7 +4,7 @@
     <input
       type="file"
       [name]="inputName" [id]="inputName" [accept]="extensions"
-      (change)="fileChange($event)"
+      (change)="fileChange($event)" [(ngModel)]="fileInputValue"
     />
   </div>
 
diff --git a/client/src/app/shared/forms/reactive-file.component.ts b/client/src/app/shared/forms/reactive-file.component.ts
index f5758b643..8d22aa56c 100644
--- a/client/src/app/shared/forms/reactive-file.component.ts
+++ b/client/src/app/shared/forms/reactive-file.component.ts
@@ -25,6 +25,7 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
   @Output() fileChanged = new EventEmitter<Blob>()
 
   allowedExtensionsMessage = ''
+  fileInputValue: any
 
   private file: File
 
@@ -63,6 +64,8 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
 
   writeValue (file: any) {
     this.file = file
+
+    if (!this.file) this.fileInputValue = null
   }
 
   registerOnChange (fn: (_: any) => void) {