Add new style for form file component

- Now only add file button will be visible.
- And selected file name will come down to the button.
- Changed form file component from custom type to plain.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ib59135691495c4dddfdbbae0e4228b55cdfda2a8

1 files changed, 21 insertions, 15 deletions

diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 24ef33c8..d78b43ff 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -99,27 +99,26 @@
 
             <!-- Workstation Upload -->
             <template v-if="isWorkstationSelected">
-              <b-form-group
-                :label="$t('pageFirmware.form.imageFile')"
-                label-for="image-file"
-              >
+              <b-form-group :label="$t('pageFirmware.form.imageFile')">
                 <b-form-text id="image-file-help-block">
                   {{ $t('pageFirmware.form.onlyTarFilesAccepted') }}
                 </b-form-text>
-                <b-form-file
+                <form-file
                   id="image-file"
-                  v-model="file"
                   accept=".tar"
-                  aria-describedby="image-file-help-block"
-                  :browse-text="$t('global.fileUpload.browseText')"
-                  :drop-placeholder="$t('global.fileUpload.dropPlaceholder')"
-                  :placeholder="$t('global.fileUpload.placeholder')"
+                  :disabled="isPageDisabled"
                   :state="getValidationState($v.file)"
-                  @input="$v.file.$touch()"
-                />
-                <b-form-invalid-feedback role="alert">
-                  {{ $t('global.form.required') }}
-                </b-form-invalid-feedback>
+                  aria-describedby="image-file-help-block"
+                  @input="onFileUpload($event)"
+                >
+                  <template #invalid>
+                    <b-form-invalid-feedback role="alert">
+                      <template>
+                        {{ $t('global.form.required') }}
+                      </template>
+                    </b-form-invalid-feedback>
+                  </template>
+                </form-file>
               </b-form-group>
             </template>
 
@@ -198,6 +197,7 @@ import PageTitle from '@/components/Global/PageTitle';
 import Alert from '@/components/Global/Alert';
 import ModalUpload from './FirmwareModalUpload';
 import ModalRebootBackupBmc from './FirmwareModalRebootBackupBmc';
+import FormFile from '@/components/Global/FormFile';
 
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
@@ -212,6 +212,7 @@ export default {
     ModalUpload,
     PageSection,
     PageTitle,
+    FormFile,
   },
   mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
   beforeRouteLeave(to, from, next) {
@@ -226,6 +227,7 @@ export default {
       tftpIpAddress: null,
       tftpFileName: null,
       timeoutId: null,
+      isPageDisabled: null,
     };
   },
   computed: {
@@ -275,6 +277,10 @@ export default {
     };
   },
   methods: {
+    onFileUpload(file) {
+      this.file = file;
+      this.$v.file.$touch();
+    },
     uploadFirmware() {
       const startTime = this.$options.filters.formatTime(new Date());
       this.setRebootTimeout(360000); //6 minute timeout