Add file selection button

core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html

@@ -1,10 +1,19 @@
-<input
-  nz-input
-  [readOnly]="isFileSelectionEnabled"
-  required
-  [formControl]="formControl"
-  [formlyAttributes]="field"
-  (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()" />
+<div class="input-autocomplete-container">
+  <input
+    *ngIf="selectedFilePath"
+    nz-input
+    [readOnly]="isFileSelectionEnabled"
+    required
+    [formControl]="formControl"
+    [formlyAttributes]="field" />
+  <button
+    nz-button
+    class="file-select-button"
+    nzSize="small"
+    (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()">
+    {{ selectedFilePath ? 'Reselect File' : 'Select File' }}
+  </button>
+</div>
 <div
   class="alert alert-danger"
   role="alert"

core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss

@@ -1,3 +1,31 @@
 mat-form-field {
   width: 100%;
 }
+.input-autocomplete-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  input {
+    flex: 1;
+    margin-right: 10px;
+  }
+
+  button {
+    white-space: nowrap;
+  }
+
+  .file-select-button {
+    border: 2px solid #1890ff;
+    color: #1890ff;
+
+    &:hover {
+      background-color: #e6f7ff;
+      border-color: #1890ff;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+}

core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts

@@ -49,4 +49,8 @@ export class InputAutoCompleteComponent extends FieldType<FieldTypeConfig> {
   get isFileSelectionEnabled(): boolean {
     return environment.userSystemEnabled;
   }
+
+  get selectedFilePath(): string | null {
+    return this.formControl.value;
+  }
 }