diff --git a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
index 50df9a4..8a71977 100644
--- a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
+++ b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
@@ -39,24 +39,19 @@
         </b-form-group>
       </template>
 
-      <b-form-group
-        :label="$t('pageSslCertificates.modal.certificateFile')"
-        label-for="certificate-file"
-      >
-        <b-form-file
+      <b-form-group :label="$t('pageSslCertificates.modal.certificateFile')">
+        <form-file
           id="certificate-file"
           v-model="form.file"
           accept=".pem"
-          :browse-text="$t('global.fileUpload.browseText')"
-          :drop-placeholder="$t('global.fileUpload.dropPlaceholder')"
-          :placeholder="$t('global.fileUpload.placeholder')"
           :state="getValidationState($v.form.file)"
-        />
-        <b-form-invalid-feedback role="alert">
-          <template v-if="!$v.form.file.required">
-            {{ $t('global.form.required') }}
+        >
+          <template #invalid>
+            <b-form-invalid-feedback role="alert">
+              {{ $t('global.form.required') }}
+            </b-form-invalid-feedback>
           </template>
-        </b-form-invalid-feedback>
+        </form-file>
       </b-form-group>
     </b-form>
     <template #modal-ok>
@@ -74,7 +69,10 @@
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 
+import FormFile from '@/components/Global/FormFile';
+
 export default {
+  components: { FormFile },
   mixins: [VuelidateMixin],
   props: {
     certificate: {
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
diff --git a/src/views/Control/VirtualMedia/VirtualMedia.vue b/src/views/Control/VirtualMedia/VirtualMedia.vue
index a15f2cd..8264c5a 100644
--- a/src/views/Control/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Control/VirtualMedia/VirtualMedia.vue
@@ -8,17 +8,20 @@
         >
           <b-row>
             <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
-              <b-form-group
-                :label="dev.id"
-                :label-for="dev.id"
-                label-class="bold"
-              >
-                <b-form-file
-                  v-show="!dev.isActive"
-                  :id="dev.id"
+              <b-form-group :label="dev.id" label-class="bold">
+                <form-file
+                  v-if="!dev.isActive"
+                  :id="concatId(dev.id)"
                   v-model="dev.file"
-                />
-                <p v-if="dev.isActive">{{ dev.file.name }}</p>
+                >
+                  <template #invalid>
+                    <b-form-invalid-feedback role="alert">
+                      <template>
+                        {{ $t('global.form.required') }}
+                      </template>
+                    </b-form-invalid-feedback>
+                  </template>
+                </form-file>
               </b-form-group>
               <b-button
                 v-if="!dev.isActive"
@@ -102,10 +105,11 @@
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import ModalConfigureConnection from './ModalConfigureConnection';
 import NbdServer from '@/utilities/NBDServer';
+import FormFile from '@/components/Global/FormFile';
 
 export default {
   name: 'VirtualMedia',
-  components: { PageTitle, PageSection, ModalConfigureConnection },
+  components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
@@ -211,6 +215,9 @@
       this.modalConfigureConnection = connectionData;
       this.$bvModal.show('configure-connection');
     },
+    concatId(val) {
+      return val.split(' ').join('_').toLowerCase();
+    },
   },
 };
 </script>