From b5e927c2c85b69dc036b951a492849a4e46e97ee Mon Sep 17 00:00:00 2001
From: Sammy Chang <sammychang2185@gmail.com>
Date: Wed, 16 Nov 2022 10:22:10 -0800
Subject: [PATCH] [PS-1783] Fix file selector input bug from PS-1465 ( #3502 )
 (#3928)

* Fix file selector input

* Add file selector state changes back

* Remove async pipe
---
 .../app/tools/import-export/import.component.html | 15 +++++++++++++++
 .../app/tools/import-export/import.component.ts   |  6 ++++++
 2 files changed, 21 insertions(+)

diff --git a/apps/web/src/app/tools/import-export/import.component.html b/apps/web/src/app/tools/import-export/import.component.html
index 26d820b518..92441600cb 100644
--- a/apps/web/src/app/tools/import-export/import.component.html
+++ b/apps/web/src/app/tools/import-export/import.component.html
@@ -291,11 +291,26 @@
     <div class="col-6">
       <div class="form-group">
         <label for="file">2. {{ "selectImportFile" | i18n }}</label>
+        <br />
+        <div class="file-selector">
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            (click)="fileSelector.click()"
+            [disabled]="importBlockedByPolicy"
+          >
+            {{ "chooseFile" | i18n }}
+          </button>
+          {{ this.fileSelected ? this.fileSelected.name : ("noFileChosen" | i18n) }}
+        </div>
         <input
+          #fileSelector
           type="file"
           id="file"
           class="form-control-file"
           name="file"
+          (change)="setSelectedFile($event)"
+          hidden
           [disabled]="importBlockedByPolicy"
         />
       </div>
diff --git a/apps/web/src/app/tools/import-export/import.component.ts b/apps/web/src/app/tools/import-export/import.component.ts
index f20b62517c..3abaebe2bc 100644
--- a/apps/web/src/app/tools/import-export/import.component.ts
+++ b/apps/web/src/app/tools/import-export/import.component.ts
@@ -25,6 +25,7 @@ export class ImportComponent implements OnInit {
   importOptions: ImportOption[];
   format: ImportType = null;
   fileContents: string;
+  fileSelected: File;
   formPromise: Promise<ImportError>;
   loading = false;
   importBlockedByPolicy = false;
@@ -179,6 +180,11 @@ export class ImportComponent implements OnInit {
     });
   }
 
+  setSelectedFile(event: Event) {
+    const fileInputEl = <HTMLInputElement>event.target;
+    this.fileSelected = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;
+  }
+
   private async error(error: Error) {
     await Swal.fire({
       heightAuto: false,