Fix local upload from browser

abh1sar · abh1sar · commit 700f4e0a382d · 2026-05-21T09:19:48.000+05:30
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
@@ -1617,6 +1617,8 @@
 "label.offeringid": "Offering ID",
 "label.offeringtype": "Compute Offering type",
 "label.ok": "OK",
+"label.ssvm.open.cert.page": "Open Certificate Page",
+"label.retry.upload": "Retry Upload",
 "label.only.end.date.and.time": "Only end date and time",
 "label.only.start.date.and.time": "Only start date and time",
 "label.open.documentation": "Open documentation",
@@ -3667,6 +3669,9 @@
 "message.upload.iso.failed.description": "Failed to upload ISO.",
 "message.upload.template.failed.description": "Failed to upload Template",
 "message.upload.volume.failed": "Volume upload failed",
+"message.ssvm.cert.untrusted": "The upload server certificate is not trusted by your browser.",
+"message.ssvm.cert.trust.instructions": "Click 'Open Certificate Page' to open the upload server in a new browser tab. Accept the certificate warning shown by your browser, then come back here and click 'Retry Upload'.",
+"message.ssvm.cert.still.untrusted": "The certificate still appears untrusted. Please accept it in the opened tab and try again.",
 "message.user.not.permitted.api": "User is not permitted to use the API",
 "message.validate.equalto": "Please enter the same value again.",
 "message.validate.max": "Please enter a value less than or equal to {0}.",
diff --git a/ui/src/views/image/RegisterOrUploadIso.vue b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -19,11 +19,27 @@
   <div
     class="form-layout"
     @keyup.ctrl.enter="handleSubmit">
-    <span v-if="uploadPercentage > 0">
+    <span v-if="uploading">
       <loading-outlined />
       {{ $t('message.upload.file.processing') }}
       <a-progress :percent="uploadPercentage" />
     </span>
+    <div v-else-if="ssvmCertUntrusted" class="ssvm-cert-warning">
+      <a-alert
+        type="warning"
+        show-icon
+        :message="$t('message.ssvm.cert.untrusted')"
+        :description="$t('message.ssvm.cert.trust.instructions')" />
+      <div class="action-button" style="margin-top: 16px">
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a :href="ssvmOrigin" target="_blank" rel="noopener noreferrer">
+          <a-button>{{ $t('label.ssvm.open.cert.page') }}</a-button>
+        </a>
+        <a-button type="primary" :loading="loading" @click="retryUpload">
+          {{ $t('label.retry.upload') }}
+        </a-button>
+      </div>
+    </div>
     <a-spin :spinning="loading" v-else>
       <a-form
         :ref="formRef"
@@ -343,9 +359,12 @@ export default {
       userdatapolicy: null,
       userdatapolicylist: {},
       loading: false,
+      uploading: false,
       allowed: false,
       uploadParams: null,
       uploadPercentage: 0,
+      ssvmCertUntrusted: false,
+      ssvmOrigin: '',
       currentForm: ['plus-outlined', 'PlusOutlined'].includes(this.action.currentAction.icon) ? 'Create' : 'Upload',
       domains: [],
       accounts: [],
@@ -489,6 +508,25 @@ export default {
       this.form.file = file
       return false
     },
+    async probeSsvmCert (origin) {
+      try {
+        await fetch(origin, { method: 'HEAD', mode: 'no-cors' })
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    async retryUpload () {
+      this.loading = true
+      const trusted = await this.probeSsvmCert(this.ssvmOrigin)
+      this.loading = false
+      if (!trusted) {
+        this.$message.warning(this.$t('message.ssvm.cert.still.untrusted'))
+        return
+      }
+      this.ssvmCertUntrusted = false
+      this.handleUpload()
+    },
     handleUpload () {
       const { fileList } = this
       if (this.fileList.length > 1) {
@@ -502,6 +540,7 @@ export default {
       fileList.forEach(file => {
         formData.append('files[]', file)
       })
+      this.uploading = true
       this.uploadPercentage = 0
       axios.post(this.uploadParams.postURL,
         formData,
@@ -529,6 +568,8 @@ export default {
           description: `${this.$t('message.upload.iso.failed.description')} -  ${e}`,
           duration: 0
         })
+      }).finally(() => {
+        this.uploading = false
       })
     },
     handleSubmit (e) {
@@ -583,18 +624,18 @@ export default {
           }
           params.format = 'ISO'
           this.loading = true
-          api('getUploadParamsForIso', params).then(json => {
+          api('getUploadParamsForIso', params).then(async json => {
             this.uploadParams = (json.postuploadisoresponse && json.postuploadisoresponse.getuploadparams) ? json.postuploadisoresponse.getuploadparams : ''
-            const response = this.handleUpload()
             if (this.userdataid !== null) {
               this.linkUserdataToTemplate(this.userdataid, json.postuploadisoresponse.iso[0].id)
             }
-            if (response === 'upload successful') {
-              this.$notification.success({
-                message: this.$t('message.success.upload'),
-                description: this.$t('message.success.upload.iso.description')
-              })
+            this.ssvmOrigin = new URL(this.uploadParams.postURL).origin
+            const trusted = await this.probeSsvmCert(this.ssvmOrigin)
+            if (!trusted) {
+              this.ssvmCertUntrusted = true
+              return
             }
+            this.handleUpload()
           }).catch(error => {
             this.$notifyError(error)
           }).finally(() => {
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -19,11 +19,27 @@
   <div
     :class="'form-layout'"
     @keyup.ctrl.enter="handleSubmit">
-    <span v-if="uploadPercentage > 0">
+    <span v-if="uploading">
       <loading-outlined />
       {{ $t('message.upload.file.processing') }}
       <a-progress :percent="uploadPercentage" />
     </span>
+    <div v-else-if="ssvmCertUntrusted" class="ssvm-cert-warning">
+      <a-alert
+        type="warning"
+        show-icon
+        :message="$t('message.ssvm.cert.untrusted')"
+        :description="$t('message.ssvm.cert.trust.instructions')" />
+      <div class="action-button" style="margin-top: 16px">
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a :href="ssvmOrigin" target="_blank" rel="noopener noreferrer">
+          <a-button>{{ $t('label.ssvm.open.cert.page') }}</a-button>
+        </a>
+        <a-button type="primary" :loading="loading" @click="retryUpload">
+          {{ $t('label.retry.upload') }}
+        </a-button>
+      </div>
+    </div>
     <a-spin :spinning="loading" v-else>
       <a-form
         :ref="formRef"
@@ -497,6 +513,8 @@ export default {
       uploadPercentage: 0,
       uploading: false,
       fileList: [],
+      ssvmCertUntrusted: false,
+      ssvmOrigin: '',
       zones: {},
       defaultZone: '',
       hyperVisor: {},
@@ -610,12 +628,32 @@ export default {
       this.form.file = file
       return false
     },
+    async probeSsvmCert (origin) {
+      try {
+        await fetch(origin, { method: 'HEAD', mode: 'no-cors' })
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    async retryUpload () {
+      this.loading = true
+      const trusted = await this.probeSsvmCert(this.ssvmOrigin)
+      this.loading = false
+      if (!trusted) {
+        this.$message.warning(this.$t('message.ssvm.cert.still.untrusted'))
+        return
+      }
+      this.ssvmCertUntrusted = false
+      this.handleUpload()
+    },
     handleUpload () {
       const { fileList } = this
       const formData = new FormData()
       fileList.forEach(file => {
         formData.append('files[]', file)
       })
+      this.uploading = true
       this.uploadPercentage = 0
       axios.post(this.uploadParams.postURL,
         formData,
@@ -639,6 +677,8 @@ export default {
         this.closeAction()
       }).catch(e => {
         this.$notifyError(e)
+      }).finally(() => {
+        this.uploading = false
       })
     },
     fetchCustomHypervisorName () {
@@ -1124,12 +1164,18 @@ export default {
               duration: 0
             })
           }
-          api('getUploadParamsForTemplate', params).then(json => {
+          api('getUploadParamsForTemplate', params).then(async json => {
             this.uploadParams = (json.postuploadtemplateresponse && json.postuploadtemplateresponse.getuploadparams) ? json.postuploadtemplateresponse.getuploadparams : ''
-            this.handleUpload()
             if (this.userdataid !== null) {
               this.linkUserdataToTemplate(this.userdataid, json.postuploadtemplateresponse.template[0].id)
             }
+            this.ssvmOrigin = new URL(this.uploadParams.postURL).origin
+            const trusted = await this.probeSsvmCert(this.ssvmOrigin)
+            if (!trusted) {
+              this.ssvmCertUntrusted = true
+              return
+            }
+            this.handleUpload()
           }).catch(error => {
             this.$notifyError(error)
           }).finally(() => {
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
@@ -17,11 +17,27 @@
 
 <template>
   <div class="form-layout" v-ctrl-enter="handleSubmit">
-    <span v-if="uploadPercentage > 0">
+    <span v-if="uploading">
       <loading-outlined />
       {{ $t('message.upload.file.processing') }}
       <a-progress :percent="uploadPercentage" />
     </span>
+    <div v-else-if="ssvmCertUntrusted" class="ssvm-cert-warning">
+      <a-alert
+        type="warning"
+        show-icon
+        :message="$t('message.ssvm.cert.untrusted')"
+        :description="$t('message.ssvm.cert.trust.instructions')" />
+      <div class="action-button" style="margin-top: 16px">
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a :href="ssvmOrigin" target="_blank" rel="noopener noreferrer">
+          <a-button>{{ $t('label.ssvm.open.cert.page') }}</a-button>
+        </a>
+        <a-button type="primary" :loading="loading" @click="retryUpload">
+          {{ $t('label.retry.upload') }}
+        </a-button>
+      </div>
+    </div>
     <a-spin :spinning="loading" v-else>
       <a-form
         :ref="formRef"
@@ -178,7 +194,10 @@ export default {
       customDiskOffering: false,
       isCustomizedDiskIOps: false,
       loading: false,
-      uploadPercentage: 0
+      uploading: false,
+      uploadPercentage: 0,
+      ssvmCertUntrusted: false,
+      ssvmOrigin: ''
     }
   },
   beforeCreate () {
@@ -267,6 +286,70 @@ export default {
       this.form.account = accountName
       this.account = accountName
     },
+    async probeSsvmCert (origin) {
+      try {
+        await fetch(origin, { method: 'HEAD', mode: 'no-cors' })
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    async retryUpload () {
+      this.loading = true
+      const trusted = await this.probeSsvmCert(this.ssvmOrigin)
+      this.loading = false
+      if (!trusted) {
+        this.$message.warning(this.$t('message.ssvm.cert.still.untrusted'))
+        return
+      }
+      this.ssvmCertUntrusted = false
+      this.handleUpload()
+    },
+    handleUpload () {
+      const { fileList } = this
+      if (this.fileList.length > 1) {
+        this.$notification.error({
+          message: this.$t('message.upload.volume.failed'),
+          description: this.$t('message.upload.file.limit'),
+          duration: 0
+        })
+      }
+      const formData = new FormData()
+      fileList.forEach(file => {
+        formData.append('files[]', file)
+      })
+      this.uploading = true
+      this.uploadPercentage = 0
+      axios.post(this.uploadParams.postURL,
+        formData,
+        {
+          headers: {
+            'content-type': 'multipart/form-data',
+            'x-signature': this.uploadParams.signature,
+            'x-expires': this.uploadParams.expires,
+            'x-metadata': this.uploadParams.metadata
+          },
+          onUploadProgress: (progressEvent) => {
+            this.uploadPercentage = Number(parseFloat(100 * progressEvent.loaded / progressEvent.total).toFixed(1))
+          },
+          timeout: 86400000
+        }).then((json) => {
+        this.$notification.success({
+          message: this.$t('message.success.upload'),
+          description: this.$t('message.success.upload.volume.description')
+        })
+        this.closeAction()
+      }).catch(e => {
+        this.$notification.error({
+          message: this.$t('message.upload.failed'),
+          description: `${this.$t('message.upload.volume.failed')} -  ${e}`,
+          duration: 0
+        })
+      }).finally(() => {
+        this.uploading = false
+        this.loading = false
+      })
+    },
     handleSubmit (e) {
       e.preventDefault()
       if (this.loading) return
@@ -286,49 +369,15 @@ export default {
         }
         params.domainId = this.domainId
         this.loading = true
-        api('getUploadParamsForVolume', params).then(json => {
+        api('getUploadParamsForVolume', params).then(async json => {
           this.uploadParams = json.postuploadvolumeresponse?.getuploadparams || ''
-          const { fileList } = this
-          if (this.fileList.length > 1) {
-            this.$notification.error({
-              message: this.$t('message.upload.volume.failed'),
-              description: this.$t('message.upload.file.limit'),
-              duration: 0
-            })
+          this.ssvmOrigin = new URL(this.uploadParams.postURL).origin
+          const trusted = await this.probeSsvmCert(this.ssvmOrigin)
+          if (!trusted) {
+            this.ssvmCertUntrusted = true
+            return
           }
-          const formData = new FormData()
-          fileList.forEach(file => {
-            formData.append('files[]', file)
-          })
-          this.uploadPercentage = 0
-          axios.post(this.uploadParams.postURL,
-            formData,
-            {
-              headers: {
-                'content-type': 'multipart/form-data',
-                'x-signature': this.uploadParams.signature,
-                'x-expires': this.uploadParams.expires,
-                'x-metadata': this.uploadParams.metadata
-              },
-              onUploadProgress: (progressEvent) => {
-                this.uploadPercentage = Number(parseFloat(100 * progressEvent.loaded / progressEvent.total).toFixed(1))
-              },
-              timeout: 86400000
-            }).then((json) => {
-            this.$notification.success({
-              message: this.$t('message.success.upload'),
-              description: this.$t('message.success.upload.volume.description')
-            })
-            this.closeAction()
-          }).catch(e => {
-            this.$notification.error({
-              message: this.$t('message.upload.failed'),
-              description: `${this.$t('message.upload.volume.failed')} -  ${e}`,
-              duration: 0
-            })
-          }).finally(() => {
-            this.loading = false
-          })
+          this.handleUpload()
         }).catch(e => {
           this.$notification.error({
             message: this.$t('message.upload.failed'),
