From b5a828309f067636eae2120032f07e01233706e2 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Wed, 17 Feb 2021 14:47:15 +0100
Subject: [PATCH] fix(UI): file uploader in table filler

---
 src/renderer/components/BaseUploadInput.vue |  1 +
 src/renderer/components/FakerSelect.vue     | 27 +++++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/BaseUploadInput.vue b/src/renderer/components/BaseUploadInput.vue
index 80a85fc5..5366a9a8 100644
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@@ -72,6 +72,7 @@ export default {
   background-color: $bg-color-gray;
   transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
   position: relative;
+  flex: 1 1 auto;
 
   > span {
     padding: 0.25rem 0.4rem;
diff --git a/src/renderer/components/FakerSelect.vue b/src/renderer/components/FakerSelect.vue
index c86bf453..15e4aa78 100644
--- a/src/renderer/components/FakerSelect.vue
+++ b/src/renderer/components/FakerSelect.vue
@@ -1,5 +1,5 @@
 <template>
-   <fieldset class="input-group mb-0" :disabled="!fakerGroups.length">
+   <fieldset class="input-group mb-0">
       <select
          v-model="selectedGroup"
          class="form-select"
@@ -50,13 +50,13 @@
          :type="inputProps().type"
          :disabled="!isChecked"
       >
-      <input
+      <BaseUploadInput
          v-else-if="inputProps().type === 'file'"
-         ref="formInput"
-         class="form-input"
-         type="file"
-         :disabled="!isChecked"
-      >
+         :value="selectedValue"
+         :message="$t('word.browse')"
+         @clear="clearValue"
+         @change="filesChange($event)"
+      />
       <input
          v-else-if="inputProps().type === 'number'"
          ref="formInput"
@@ -92,13 +92,15 @@
 <script>
 import { mask } from 'vue-the-mask';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
+import BaseUploadInput from '@/components/BaseUploadInput';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
 import FakerMethods from 'common/FakerMethods';
 
 export default {
    name: 'FakerSelect',
    components: {
-      ForeignKeySelect
+      ForeignKeySelect,
+      BaseUploadInput
    },
    directives: {
       mask
@@ -208,6 +210,15 @@ export default {
       getKeyUsage (keyName) {
          return this.keyUsage.find(key => key.field === keyName);
       },
+      filesChange (event) {
+         const { files } = event.target;
+         if (!files.length) return;
+
+         this.selectedValue = files[0].path;
+      },
+      clearValue () {
+         this.selectedValue = '';
+      },
       onChange () {
          this.$emit('update:value', {
             group: this.selectedGroup,