feat: improve file uploads

Author: Angular2Guy

frontend/src/angular/src/app/doc-import/doc-import.component.html

@@ -1,10 +1,23 @@
 <h1 mat-dialog-title i18n="@@docimportImportFile">Import file</h1>
 <div mat-dialog-content>
-  <p i18n="@@docimportFileToImport">File to import</p>
+  <div i18n="@@docimportFileToImport">File to import</div>
   @if(uploading) {
   <div class="upload-spinner"><mat-spinner></mat-spinner></div>
   } @else {
+  <!-- 
   <input type="file" (change)="onFileInputChange($event)" />
+   -->
+  <input type="file" class="file-input"
+       (change)="onFileInputChange($event)" #fileUpload>
+<div class="file-upload">
+
+   {{file?.name || "No file uploaded yet."}}
+
+    <button mat-mini-fab color="primary" class="upload-btn"
+      (click)="fileUpload.click()">
+        <mat-icon>attach_file</mat-icon>
+    </button>
+</div>
   } @if(!!file) {
   <div>
     <ul>

frontend/src/angular/src/app/doc-import/doc-import.component.scss

@@ -15,3 +15,7 @@
   width: 100%;
   justify-content: center;
 }
+
+.file-input {
+	display: none;
+}

frontend/src/angular/src/app/doc-import/doc-import.component.ts

@@ -22,6 +22,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
 import { DocumentService } from '../service/document.service';
 import { tap } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -36,6 +37,7 @@ export interface DocImportData {}
         MatDialogModule,
         MatButtonModule,
         MatInputModule,
+		MatIconModule,
         FormsModule,
         MatProgressSpinnerModule,
     ],

frontend/src/angular/src/app/image-query/image-query.component.html

@@ -64,12 +64,20 @@
       <div><img [src]="result.b64Image" /></div>
       <div>{{ result.answer }}</div>
     </div>
-    } @else {
-    <input
-      type="file"
-      class="vertical-margin"
-      (change)="onFileInputChange($event)"
-    />
+    } @else {    
+    <div>
+      <input type="file" class="file-input" 
+       (change)="onFileInputChange($event)" #fileUpload>
+<div class="file-upload">
+
+   {{this.imageForm.controls['file'].value?.name || "No file uploaded yet."}}
+
+    <button mat-mini-fab color="primary" class="upload-btn"
+      (click)="fileUpload.click()">
+        <mat-icon>attach_file</mat-icon>
+    </button>
+    </div>
+</div>   
     <mat-form-field class="example-full-width">
       <mat-label i18n="@@imageQueryPrompt">Image prompt</mat-label>
       <input

frontend/src/angular/src/app/image-query/image-query.component.scss

@@ -40,6 +40,14 @@
   width: 100%;
 }
 
+.file-upload {
+	margin: 10px;
+}
+
+.file-input {
+	display: none;
+}
+
 .upload-spinner {
   display: flex;
   width: 100%;

frontend/src/angular/src/app/image-query/image-query.component.ts

@@ -26,6 +26,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { Router } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
@@ -35,6 +36,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
         MatProgressSpinnerModule,
         MatInputModule,
         MatButtonModule,
+		MatIconModule,
         ReactiveFormsModule,
         MatToolbarModule,
     ],
@@ -67,8 +69,8 @@ export class ImageQueryComponent {
     private router: Router
   ) {}
 
-  protected onFileInputChange($event: Event): void {
-    this.result = null;
+  protected onFileInputChange($event: Event): void {    
+	this.result = null;
     const files = !$event.target
       ? null
       : ($event.target as HTMLInputElement).files;