fix: corrected file element that loses the filename of the uploaded file

Author: sergeleger

packages/studio-web/src/app/studio/studio.component.ts

@@ -47,7 +47,7 @@ import { UploadComponent } from "../upload/upload.component";
 import { StepperSelectionEvent } from "@angular/cdk/stepper";
 import { HttpErrorResponse } from "@angular/common/http";
 import { DownloadService } from "../shared/download/download.service";
-import { StudioService } from "./studio.service";
+import { InputMethodType, StudioService } from "./studio.service";
 
 @Component({
   selector: "studio-component",
@@ -184,7 +184,7 @@ export class StudioComponent implements OnDestroy, OnInit {
     this.shepherdService.keyboardNavigation = false;
 
     const cachedTextInputMode = this.studioService.inputMethod.text;
-    const setTextInputMode = (mode: string) => {
+    const setTextInputMode = (mode: InputMethodType["text"]) => {
       return () => {
         if (this.upload) {
           this.studioService.inputMethod.text = mode;
@@ -202,7 +202,7 @@ export class StudioComponent implements OnDestroy, OnInit {
     };
 
     const cachedAudioInputMode = this.studioService.inputMethod.audio;
-    const setAudioInputMode = (mode: string) => {
+    const setAudioInputMode = (mode: InputMethodType["audio"]) => {
       return () => {
         if (this.upload) {
           this.studioService.inputMethod.audio = mode;

packages/studio-web/src/app/studio/studio.service.ts

@@ -8,6 +8,11 @@ export enum langMode {
   specific = "specific",
 }
 
+export interface InputMethodType {
+  audio: "mic" | "upload";
+  text: "edit" | "upload";
+}
+
 @Injectable({
   providedIn: "root",
 })
@@ -25,7 +30,7 @@ export class StudioService {
     { value: "und", disabled: this.langMode$.value !== "specific" },
     Validators.required,
   );
-  textControl$ = new FormControl<any>(null, Validators.required);
+  textControl$ = new FormControl<File | Blob | null>(null, Validators.required);
   audioControl$ = new FormControl<File | Blob | null>(
     null,
     Validators.required,
@@ -36,7 +41,7 @@ export class StudioService {
     text: this.textControl$,
     audio: this.audioControl$,
   });
-  inputMethod = {
+  inputMethod: InputMethodType = {
     audio: "mic",
     text: "edit",
   };

packages/studio-web/src/app/upload.service.ts

@@ -6,6 +6,6 @@ import { BehaviorSubject } from "rxjs";
 })
 export class UploadService {
   $currentAudio = new BehaviorSubject<Blob | File | null>(null);
-  $currentText = new BehaviorSubject<Blob | string | null>(null);
+  $currentText = new BehaviorSubject<Blob | File | null>(null);
   constructor() {}
 }

packages/studio-web/src/app/upload/upload.component.html

@@ -35,7 +35,7 @@ <h1 i18n="Title for text box" class="title">Text</h1>
             </mat-button-toggle-group>
           </div>
         </div>
-        <div *ngIf="studioService.inputMethod.text === 'upload'">
+        <div [class.d-none]="studioService.inputMethod.text !== 'upload'">
           <div class="row">
             <div class="mt-4 mb-3">
               <!-- <div class="container"> -->
@@ -47,7 +47,7 @@ <h1 i18n="Title for text box" class="title">Text</h1>
                 file (.readalong)</label
               >
               <input
-                #textInputElement
+                #textFileUpload
                 (change)="onTextFileSelected($event)"
                 class="form-control"
                 name="text"
@@ -155,7 +155,7 @@ <h1 i18n="Title for audio box" class="title">Audio</h1>
         </div>
 
         <div
-          *ngIf="studioService.inputMethod.audio === 'upload'"
+          [class.d-none]="studioService.inputMethod.audio !== 'upload'"
           class="row mb-3"
         >
           <h2 i18n="Title for upload box" class="subtitle">
@@ -289,6 +289,7 @@ <h2 i18n="Title for record box" class="subtitle">
               mat-button
               color="warn"
               aria-label="Delete button"
+              data-test-id="ras-audio-fileselector-delete-btn"
             >
               <mat-icon class="mat-icon-lg">delete</mat-icon>
               Delete