core: frontend: version: Add check in manual file

* Add extra validation step to avoid calling upload function without any
  kind of file selected, this causes a small UI glitch because the
  visibility changes fast, now it should validate if there are files
  selected and inform user if needed

Author: joaomariolago

core/frontend/src/components/version-chooser/VersionChooser.vue

@@ -147,6 +147,8 @@
         id="file"
         show-size
         accept=".tar"
+        :rules="[is_file_input_not_empty]"
+        :error-messages="file_input_error"
         label="File input"
       />
       <v-progress-linear
@@ -158,7 +160,7 @@
         v-if="!disable_upload_controls"
         color="primary"
         class="mr-2 mb-4"
-        @click="upload()"
+        @click="validateInputFileForm() && upload()"
         v-text="'Upload'"
       />
 
@@ -253,6 +255,7 @@ export default Vue.extend({
       default_repository,
       selected_image: default_repository,
       deleting: '', // image currently being deleted, if any
+      file_input_error: '',
     }
   },
   computed: {
@@ -262,6 +265,9 @@ export default Vue.extend({
     totalPages(): number {
       return Math.ceil(this.available_versions.remote.length / 10)
     },
+    input_file_required_message(): string {
+      return 'File is required'
+    },
   },
   mounted() {
     this.loadCurrentVersion()
@@ -430,14 +436,14 @@ export default Vue.extend({
       return remote_counterpart.sha !== image.sha && remote_counterpart.sha !== null
     },
     async upload() {
-      this.disable_upload_controls = true
-      const { files } = document.getElementById('file') as HTMLInputElement
-      if (files !== null) {
+      const file = this.get_input_file()
+      if (file !== null) {
+        this.disable_upload_controls = true
         await back_axios({
           method: 'POST',
           url: '/version-chooser/v1.0/version/load/',
           timeout: 15 * 60 * 1000, // Wait for 15min
-          data: files[0],
+          data: file,
           headers: { 'Content-Type': 'undefined' },
           onUploadProgress: (event) => {
             this.upload_percentage = Math.round(100 * (event.loaded / event.total))
@@ -596,6 +602,28 @@ export default Vue.extend({
       }
       return this.available_versions.local.some((image) => image.sha === sha)
     },
+    get_input_file(): File | null {
+      const { files } = document.getElementById('file') as HTMLInputElement
+
+      if (files !== null && files.length > 0) {
+        return files[0]
+      }
+
+      return null
+    },
+    is_file_input_not_empty(v: File | null): true | string {
+      this.file_input_error = ''
+      return !!v || this.input_file_required_message
+    },
+    validateInputFileForm(): boolean {
+      const valid = this.get_input_file() != null
+
+      if (!valid) {
+        this.file_input_error = this.input_file_required_message
+      }
+
+      return valid
+    },
   },
 })
 </script>