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
diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 24ef33c..d78b43f 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 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 @@
ModalUpload,
PageSection,
PageTitle,
+ FormFile,
},
mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
beforeRouteLeave(to, from, next) {
@@ -226,6 +227,7 @@
tftpIpAddress: null,
tftpFileName: null,
timeoutId: null,
+ isPageDisabled: null,
};
},
computed: {
@@ -275,6 +277,10 @@
};
},
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