fix: added a delete button to remove the uploaded text file

Author: sergeleger

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

@@ -58,6 +58,23 @@ <h1 i18n="Title for text box" class="title">Text</h1>
               <!-- </div> -->
             </div>
           </div>
+          @if (studioService.textControl$.value !== null) {
+            <div class="row">
+              <div class="col-12 offset-xl-8 col-xl-4">
+                <button
+                  mat-button
+                  i18n="Text delete button"
+                  class="audioControl"
+                  (click)="deleteTextUpload()"
+                  color="warn"
+                  aria-label="Delete button"
+                >
+                  <mat-icon class="mat-icon-lg">delete</mat-icon>
+                  Delete
+                </button>
+              </div>
+            </div>
+          }
         </div>
         <div *ngIf="studioService.inputMethod.text === 'edit'">
           <div class="d-flex flex-row justify-content-between p-0">

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

@@ -587,6 +587,11 @@ Please check it to make sure all words are spelled out completely, e.g. write "4
     );
   }
 
+  deleteTextUpload() {
+    this.textInputElement.nativeElement.value = "";
+    this.studioService.textControl$.setValue(null);
+  }
+
   onTextFileSelected(event: Event) {
     const el = event.target as HTMLInputElement;
     if (!el.files || el.files.length !== 1) {

packages/studio-web/src/i18n/messages.json

@@ -140,6 +140,7 @@
     "8550195538234658887": " In order to make a ReadAlong, we just need some {$START_BOLD_TEXT}text{$CLOSE_BOLD_TEXT}, and corresponding {$START_BOLD_TEXT}audio{$CLOSE_BOLD_TEXT}. ",
     "6162693758764653365": "Text",
     "323794992596449638": "Select a plain text file (.txt) or a ReadAlong Studio temporary file (.readalong)",
+    "5050307465636924350": "{$START_TAG_MAT_ICON}delete{$CLOSE_TAG_MAT_ICON} Delete ",
     "6329500169661407619": " Write or paste your text here ",
     "887019029800317757": "{$START_TAG_MAT_ICON}help_outline{$CLOSE_TAG_MAT_ICON} Format ",
     "4289685560479120097": "{$START_TAG_MAT_ICON}save{$CLOSE_TAG_MAT_ICON} Save a copy ",
@@ -153,7 +154,6 @@
     "6543643564103016190": "Recording",
     "8066570559817495723": "{$START_TAG_MAT_ICON}stop_circle{$CLOSE_TAG_MAT_ICON} Stop ",
     "6710230498600005462": "{$START_TAG_MAT_ICON}play_circle{$CLOSE_TAG_MAT_ICON} Play ",
-    "5050307465636924350": "{$START_TAG_MAT_ICON}delete{$CLOSE_TAG_MAT_ICON} Delete ",
     "7273199130532280751": " Optional: Change language settings ",
     "643724100310033610": " Most of the time, you should just use the default selected below. You can also select a specific language if it is supported for improved results. If the default does not work well for you and your language is not supported, have a look at {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} this blog post series{$CLOSE_LINK} to understand how you might get support for your language, or {$START_LINK_1}{$START_TAG_MAT_ICON}mail{$CLOSE_TAG_MAT_ICON} contact us{$CLOSE_LINK} for more info! ",
     "7777031358286609836": "Default (should work with most languages)",