[DSC-2425] fix file handling for bulk import

Author: FrancescoMolinaro

src/app/bulk-import/bulk-import-page.component.html

@@ -7,7 +7,7 @@ <h2 class="mb-3">{{ 'bulk-import.title' | translate }}</h2>
     </div>
     <div class="form-group">
       <label for="file">{{ 'bulk-import.file' | translate }}</label>
-      <input type="file" formControlName="file" id="file" class="form-control-file" requireFile/>
+      <input type="file" (change)="handleFileInput($event)" formControlName="file" id="file" class="form-control-file" requireFile/>
     </div>
     <div class="form-check">
       <input type="checkbox" formControlName="abortOnError" id="abortOnError" class="form-check-input" />

src/app/bulk-import/bulk-import-page.component.spec.ts

@@ -122,6 +122,7 @@ describe('BulkImportPageComponent', () => {
     beforeEach(() => {
       component.form.value.abortOnError = true;
       component.form.value.file = fileList;
+      component.setFile(fileList);
       component.submit();
     });
 

src/app/bulk-import/bulk-import-page.component.ts

@@ -76,6 +76,8 @@ export class BulkImportPageComponent implements OnInit, OnDestroy {
    */
   processingImport$: BehaviorSubject<boolean>  = new BehaviorSubject<boolean>(false);
 
+  private selectedFile: File;
+
   constructor(
     private authService: AuthService,
     private formBuilder: FormBuilder,
@@ -119,19 +121,16 @@ export class BulkImportPageComponent implements OnInit, OnDestroy {
 
     const values: any = this.form.value;
 
-    const files: FileList = values.file;
-    const file: File = files.item(0);
-
     const stringParameters: ProcessParameter[] = [
       { name: '-c', value: this.collectionId },
-      { name: '-f', value: file.name },
+      { name: '-f', value: this.selectedFile.name },
     ];
 
     if (values.abortOnError) {
       stringParameters.push( { name: '-er', value: values.abortOnError } );
     }
 
-    this.scriptService.invoke('bulk-import', stringParameters, [file])
+    this.scriptService.invoke('bulk-import', stringParameters, [this.selectedFile])
       .pipe(getFirstCompletedRemoteData())
       .subscribe((rd: RemoteData<Process>) => {
         if (rd.isSuccess) {
@@ -165,4 +164,15 @@ export class BulkImportPageComponent implements OnInit, OnDestroy {
     this.subs.forEach((sub) => sub.unsubscribe());
   }
 
+  public handleFileInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.setFile(input.files);
+    }
+  }
+
+  public setFile(files: FileList) {
+    this.selectedFile = files.length > 0 ? files.item(0) : undefined;
+  }
+
 }