commit 2ec04fbb915a2d3428312288a282008c138a9a62
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Wed Jan 20 12:19:16 2021 -0800
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Fri Jan 22 21:32:26 2021 +0000
tree de9abe1cbad7f1b34d0b12da1bb0cb2904354dc8
parent 02f4ec2fbcda9bd0b1ef0bf2c8346f4096a0c069

Add disabled class to FormFile component

Passing disabled prop to button and span so file upload button can
visually reflect a disabled form control state.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I78f2db521c4f4016e7e2aa92e5a56bc4f9170fe0

src/components/Global/FormFile.vue

diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 30af00d..eaed445 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -11,14 +11,18 @@
         @input="$emit('input', file)"
       >
       </b-form-file>
-      <span class="add-file-btn btn btn-primary">
+      <span class="add-file-btn btn btn-primary" :class="{ disabled }">
         {{ $t('global.fileUpload.browseText') }}
       </span>
       <slot name="invalid"></slot>
     </label>
     <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
       {{ file ? file.name : '' }}
-      <b-button variant="light" class="px-2 ml-auto" @click="file = null"
+      <b-button
+        variant="light"
+        class="px-2 ml-auto"
+        :disabled="disabled"
+        @click="file = null"
         ><icon-close :title="$t('global.fileUpload.clearSelectedFile')"
       /></b-button>
     </div>