From f2d2e03a6c8294d64d843864a969a9814aa7cf99 Mon Sep 17 00:00:00 2001
From: Pearl Dsilva <pearl1594@gmail.com>
Date: Sat, 8 Feb 2020 14:30:32 +0530
Subject: [PATCH] storage: custom upload action for template, iso, volume
 (#144)

This implements custom upload action form for template, iso, volume with progress bar.

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit@apache.org>
---
 ui/src/config/section/image.js                |  14 +-
 ui/src/config/section/storage.js              |  18 +-
 ui/src/views/AutogenView.vue                  |   1 +
 ui/src/views/image/RegisterIso.vue            | 241 -----
 ui/src/views/image/RegisterOrUploadIso.vue    | 396 ++++++++
 .../views/image/RegisterOrUploadTemplate.vue  | 952 ++++++++++++++++++
 ui/src/views/image/RegisterTemplate.vue       | 798 ---------------
 ui/src/views/storage/UploadLocalVolume.vue    | 222 +++-
 8 files changed, 1566 insertions(+), 1076 deletions(-)
 delete mode 100644 ui/src/views/image/RegisterIso.vue
 create mode 100644 ui/src/views/image/RegisterOrUploadIso.vue
 create mode 100644 ui/src/views/image/RegisterOrUploadTemplate.vue
 delete mode 100644 ui/src/views/image/RegisterTemplate.vue

diff --git a/ui/src/config/section/image.js b/ui/src/config/section/image.js
index b8d837d6765..14f908fffe3 100644
--- a/ui/src/config/section/image.js
+++ b/ui/src/config/section/image.js
@@ -48,10 +48,10 @@ export default {
         {
           api: 'registerTemplate',
           icon: 'plus',
-          label: 'Create template',
+          label: 'Register Template',
           listView: true,
           popup: true,
-          component: () => import('@/views/image/RegisterTemplate.vue')
+          component: () => import('@/views/image/RegisterOrUploadTemplate.vue')
         },
         {
           api: 'getUploadParamsForTemplate',
@@ -59,7 +59,7 @@ export default {
           label: 'Upload Local Template',
           listView: true,
           popup: true,
-          component: () => import('@/views/image/UploadLocalTemplate.vue')
+          component: () => import('@/views/image/RegisterOrUploadTemplate.vue')
         },
         {
           api: 'updateTemplate',
@@ -88,7 +88,7 @@ export default {
         {
           api: 'updateTemplatePermissions',
           icon: 'reconciliation',
-          label: 'Update template permissions',
+          label: 'Update Template Permissions',
           dataView: true,
           popup: true,
           show: (record, store) => { return (['Admin', 'DomainAdmin'].includes(store.userInfo.roletype) && (record.domainid === store.userInfo.domainid && record.account === store.userInfo.account) || record.templatetype !== 'BUILTIN') },
@@ -139,15 +139,15 @@ export default {
           label: 'Register ISO',
           listView: true,
           popup: true,
-          component: () => import('@/views/image/RegisterIso.vue')
+          component: () => import('@/views/image/RegisterOrUploadIso.vue')
         },
         {
           api: 'getUploadParamsForIso',
           icon: 'cloud-upload',
-          label: 'Upload Local Iso',
+          label: 'Upload Local ISO',
           listView: true,
           popup: true,
-          component: () => import('@/views/image/UploadLocalIso.vue')
+          component: () => import('@/views/image/RegisterOrUploadIso.vue')
         },
         {
           api: 'updateIso',
diff --git a/ui/src/config/section/storage.js b/ui/src/config/section/storage.js
index bd7e009cd25..34a46e93cfc 100644
--- a/ui/src/config/section/storage.js
+++ b/ui/src/config/section/storage.js
@@ -40,7 +40,16 @@ export default {
           label: 'Create Volume',
           listView: true,
           args: ['name', 'zoneid', 'diskofferingid']
-        }, {
+        },
+        {
+          api: 'getUploadParamsForVolume',
+          icon: 'cloud-upload',
+          label: 'Upload Local Volume',
+          listView: true,
+          popup: true,
+          component: () => import('@/views/storage/UploadLocalVolume.vue')
+        },
+        {
           api: 'uploadVolume',
           icon: 'link',
           label: 'Upload Volume From URL',
@@ -51,13 +60,6 @@ export default {
               options: ['RAW', 'VHD', 'VHDX', 'OVA', 'QCOW2']
             }
           }
-        }, {
-          api: 'getUploadParamsForVolume',
-          icon: 'cloud-upload',
-          label: 'Upload Local Volume',
-          listView: true,
-          popup: true,
-          component: () => import('@/views/storage/UploadLocalVolume.vue')
         },
         {
           api: 'attachVolume',
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index b8727b6ddea..f267d1ff64d 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -74,6 +74,7 @@
             :is="currentAction.component"
             :resource="resource"
             :loading="loading"
+            :action="{currentAction}"
             v-bind="{currentAction}"
             @refresh-data="fetchData"
             @poll-action="pollActionCompletion"
diff --git a/ui/src/views/image/RegisterIso.vue b/ui/src/views/image/RegisterIso.vue
deleted file mode 100644
index ec44460863d..00000000000
--- a/ui/src/views/image/RegisterIso.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-<template>
-  <div class="form-layout">
-    <a-spin :spinning="loading">
-      <a-form
-        :form="form"
-        @submit="handleSubmit"
-        layout="vertical">
-        <a-form-item :label="$t('url')">
-          <a-input
-            v-decorator="['url', {
-              rules: [{ required: true, message: 'Please enter input' }]
-            }]"
-            :placeholder="$t('iso.url.description')" />
-        </a-form-item>
-
-        <a-form-item :label="$t('name')">
-          <a-input
-            v-decorator="['name', {
-              rules: [{ required: true, message: 'Please enter input' }]
-            }]"
-            :placeholder="$t('iso.name.description')" />
-        </a-form-item>
-
-        <a-form-item :label="$t('displaytext')">
-          <a-input
-            v-decorator="['displaytext', {
-              rules: [{ required: true, message: 'Please enter input' }]
-            }]"
-            :placeholder="$t('iso.displaytext.description')" />
-        </a-form-item>
-
-        <a-form-item :label="$t('directdownload')">
-          <a-switch v-decorator="['directdownload']" />
-        </a-form-item>
-
-        <a-form-item :label="$t('zoneid')">
-          <a-select
-            v-decorator="['zoneid', {
-              rules: [
-                {
-                  required: true,
-                  message: 'Please select option'
-                }
-              ]
-            }]"
-            showSearch
-            optionFilterProp="children"
-            :filterOption="(input, option) => {
-              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="zoneLoading"
-            :placeholder="$t('iso.zoneid.description')">
-            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
-              {{ opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <a-form-item :label="$t('bootable')">
-          <a-switch v-decorator="['bootable']" />
-        </a-form-item>
-
-        <a-form-item :label="$t('ostypeid')">
-          <a-select
-            v-decorator="['ostypeid', {
-              rules: [{ required: true, message: 'Please select option' }]
-            }]"
-            showSearch
-            optionFilterProp="children"
-            :filterOption="(input, option) => {
-              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="osTypeLoading"
-            :placeholder="$t('iso.ostypeid.description')">
-            <a-select-option v-for="(opt, optIndex) in osTypes" :key="optIndex">
-              {{ opt.name || opt.description }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <a-form-item :label="$t('isextractable')">
-          <a-switch v-decorator="['isextractable']" />
-        </a-form-item>
-
-        <a-form-item :label="$t('ispublic')">
-          <a-switch v-decorator="['ispublic']" />
-        </a-form-item>
-
-        <a-form-item :label="$t('isfeatured')">
-          <a-switch v-decorator="['isfeatured']" />
-        </a-form-item>
-
-        <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
-        </div>
-      </a-form>
-    </a-spin>
-  </div>
-</template>
-
-<script>
-import { api } from '@/api'
-
-export default {
-  name: 'RegisterIso',
-  data () {
-    return {
-      zones: [],
-      osTypes: [],
-      zoneLoading: false,
-      osTypeLoading: false,
-      loading: false
-    }
-  },
-  beforeCreate () {
-    this.form = this.$form.createForm(this)
-  },
-  created () {
-    this.zones = [
-      {
-        id: '-1',
-        name: this.$t('label.all.zone')
-      }
-    ]
-  },
-  mounted () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      this.fetchZoneData()
-      this.fetchOsType()
-    },
-    fetchZoneData () {
-      const params = {}
-      params.listAll = true
-
-      this.zoneLoading = true
-
-      api('listZones', params).then(json => {
-        const listZones = json.listzonesresponse.zone
-        this.zones = this.zones.concat(listZones)
-      }).finally(() => {
-        this.zoneLoading = false
-      })
-    },
-    fetchOsType () {
-      const params = {}
-      params.listAll = true
-
-      this.osTypeLoading = true
-
-      api('listOsTypes', params).then(json => {
-        const listOsTypes = json.listostypesresponse.ostype
-        this.osTypes = this.osTypes.concat(listOsTypes)
-      }).finally(() => {
-        this.osTypeLoading = false
-      })
-    },
-    handleSubmit (e) {
-      e.preventDefault()
-      this.form.validateFields((err, values) => {
-        if (err) {
-          return
-        }
-
-        const params = {}
-        for (const key in values) {
-          const input = values[key]
-          if (input === undefined) {
-            continue
-          }
-          switch (key) {
-            case 'zoneid':
-              params[key] = this.zones[input].id
-              break
-            case 'ostypeid':
-              params[key] = this.osTypes[input].id
-              break
-            default:
-              params[key] = input
-              break
-          }
-        }
-
-        this.loading = true
-        api('registerIso', params).then(json => {
-          this.$emit('refresh-data')
-          this.$notification.success({
-            message: 'Register ISO',
-            description: 'Sucessfully registered ISO ' + params.name
-          })
-        }).catch(error => {
-          this.$notification.error({
-            message: 'Request Failed',
-            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
-          })
-        }).finally(() => {
-          this.loading = false
-          this.closeAction()
-        })
-      })
-    },
-    closeAction () {
-      this.$emit('close-action')
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-  .form-layout {
-    width: 500px;
-  }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-</style>
diff --git a/ui/src/views/image/RegisterOrUploadIso.vue b/ui/src/views/image/RegisterOrUploadIso.vue
new file mode 100644
index 00000000000..664833668c5
--- /dev/null
+++ b/ui/src/views/image/RegisterOrUploadIso.vue
@@ -0,0 +1,396 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <span v-if="uploadPercentage > 0">
+      <a-icon type="loading" />
+      Do not close this form, file upload is in progress...
+      <a-progress :percent="uploadPercentage" />
+    </span>
+    <a-spin :spinning="loading" v-else>
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item v-if="currentForm === 'Create'" :label="$t('url')">
+          <a-input
+            v-decorator="['url', {
+              rules: [{ required: true, message: 'Please upload an ISO' }]
+            }]"
+            :placeholder="$t('iso.url.description')" />
+        </a-form-item>
+        <a-form-item v-if="currentForm === 'Upload'" :label="$t('templateFileUpload')">
+          <a-upload-dragger
+            :multiple="false"
+            :fileList="fileList"
+            :remove="handleRemove"
+            :beforeUpload="beforeUpload"
+            v-decorator="['file', {
+              rules: [{ required: true, message: 'Please enter input' }]
+            }]">
+            <p class="ant-upload-drag-icon">
+              <a-icon type="cloud-upload" />
+            </p>
+            <p class="ant-upload-text" v-if="fileList.length === 0">
+              Click or drag file to this area to upload
+            </p>
+          </a-upload-dragger>
+        </a-form-item>
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['name', {
+              rules: [{ required: true, message: 'Please enter input' }]
+            }]"
+            :placeholder="$t('iso.name.description')" />
+        </a-form-item>
+
+        <a-form-item :label="$t('displaytext')">
+          <a-input
+            v-decorator="['displaytext', {
+              rules: [{ required: true, message: 'Please enter input' }]
+            }]"
+            :placeholder="$t('iso.displaytext.description')" />
+        </a-form-item>
+
+        <a-form-item v-if="allowed && currentForm !== 'Upload'" :label="$t('directdownload')">
+          <a-switch v-decorator="['directdownload']"/>
+        </a-form-item>
+
+        <a-form-item :label="$t('zoneid')">
+          <a-select
+            v-decorator="['zoneid', {
+              initialValue: this.selectedZone,
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="zoneLoading"
+            :placeholder="$t('iso.zoneid.description')">
+            <a-select-option :value="opt.id" v-for="opt in zones" :key="opt.id">
+              <div v-if="currentForm === 'Upload'">
+                <div v-if="opt.name !== $t('label.all.zone')">
+                  {{ opt.name || opt.description }}
+                </div>
+              </div>
+              <div v-else>
+                {{ opt.name || opt.description }}
+              </div>
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item :label="$t('bootable')">
+          <a-switch
+            v-decorator="['bootable', {
+              initialValue: true,
+            }]"
+            :checked="bootable"
+            @change="val => bootable = val"/>
+        </a-form-item>
+
+        <a-form-item v-if="bootable" :label="$t('ostypeid')">
+          <a-select
+            v-decorator="['ostypeid', {
+              initialValue: defaultOsType,
+              rules: [{ required: true, message: 'Please select option' }]
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
+            :loading="osTypeLoading"
+            :placeholder="$t('iso.ostypeid.description')">
+            <a-select-option :value="opt.description" v-for="(opt, optIndex) in osTypes" :key="optIndex">
+              {{ opt.name || opt.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item :label="$t('isextractable')">
+          <a-switch
+            v-decorator="['isextractable', {
+              initialValue: false
+            }]" />
+        </a-form-item>
+
+        <a-form-item :label="$t('ispublic')">
+          <a-switch
+            v-decorator="['ispublic', {
+              initialValue: false
+            }]" />
+        </a-form-item>
+
+        <a-form-item :label="$t('isfeatured')">
+          <a-switch
+            v-decorator="['isfeatured', {
+              initialValue: false
+            }]" />
+        </a-form-item>
+
+        <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import store from '@/store'
+import { axios } from '../../utils/request'
+
+export default {
+  name: 'RegisterIso',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    action: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      zones: [],
+      osTypes: [],
+      zoneLoading: false,
+      osTypeLoading: false,
+      defaultOsType: '',
+      loading: false,
+      allowed: false,
+      bootable: true,
+      selectedZone: '',
+      uploadParams: null,
+      uploadPercentage: 0,
+      currentForm: this.action.currentAction.api === 'registerIso' ? 'Create' : 'Upload'
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  created () {
+    this.zones = [
+      {
+        id: '-1',
+        name: this.$t('label.all.zone')
+      }
+    ]
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.fetchZoneData()
+      this.fetchOsType()
+    },
+    fetchZoneData () {
+      const params = {}
+      params.listAll = true
+
+      this.zoneLoading = true
+      if (store.getters.userInfo.roletype === this.rootAdmin) {
+        this.allowed = true
+      }
+      api('listZones', params).then(json => {
+        const listZones = json.listzonesresponse.zone
+        this.zones = this.zones.concat(listZones)
+      }).finally(() => {
+        this.zoneLoading = false
+        this.selectedZone = this.currentForm === 'Create' ? (this.zones[0].id ? this.zones[0].id : '') : ((this.zones[1].id) ? this.zones[1].id : '')
+      })
+    },
+    fetchOsType () {
+      const params = {}
+      params.listAll = true
+
+      this.osTypeLoading = true
+
+      api('listOsTypes', params).then(json => {
+        const listOsTypes = json.listostypesresponse.ostype
+        this.osTypes = this.osTypes.concat(listOsTypes)
+      }).finally(() => {
+        this.osTypeLoading = false
+        this.defaultOsType = this.osTypes[0].description
+      })
+    },
+    handleRemove (file) {
+      const index = this.fileList.indexOf(file)
+      const newFileList = this.fileList.slice()
+      newFileList.splice(index, 1)
+      this.fileList = newFileList
+    },
+    beforeUpload (file) {
+      this.fileList = [file]
+      return false
+    },
+    handleUpload () {
+      const { fileList } = this
+      if (this.fileList.length > 1) {
+        this.$notification.error({
+          message: 'ISO Upload Failed',
+          description: 'Only one ISO can be uploaded at a time',
+          duration: 0
+        })
+      }
+      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: 'Upload Successful',
+          description: 'This ISO file has been uploaded. Please check its status at Templates menu'
+        })
+        this.closeAction()
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Upload Failed',
+          description: `Failed to upload ISO -  ${e}`,
+          duration: 0
+        })
+        this.closeAction()
+      })
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        const params = {}
+        for (const key in values) {
+          const input = values[key]
+          if (input === undefined) {
+            continue
+          }
+          if (key === 'file') {
+            continue
+          }
+          switch (key) {
+            case 'zoneid':
+              var zone = this.zones.filter(zone => zone.id === input)
+              params[key] = zone[0].id
+              break
+            case 'ostypeid':
+              var os = this.osTypes.filter(osType => osType.description === input)
+              params[key] = os[0].id
+              break
+            default:
+              params[key] = input
+              break
+          }
+        }
+
+        if (this.currentForm === 'Create') {
+          this.loading = true
+          api('registerIso', params).then(json => {
+            this.$emit('refresh-data')
+            this.$notification.success({
+              message: 'Register ISO',
+              description: 'Sucessfully registered ISO ' + params.name
+            })
+          }).catch(error => {
+            this.$notification.error({
+              message: 'Request Failed',
+              description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+              duration: 0
+            })
+          }).finally(() => {
+            this.loading = false
+            this.closeAction()
+          })
+        } else {
+          if (this.fileList.length !== 1) {
+            return
+          }
+          params.format = 'ISO'
+          this.loading = true
+          api('getUploadParamsForIso', params).then(json => {
+            this.uploadParams = (json.postuploadisoresponse && json.postuploadisoresponse.getuploadparams) ? json.postuploadisoresponse.getuploadparams : ''
+            const response = this.handleUpload()
+            if (response === 'upload successful') {
+              this.$notification.success({
+                message: 'Upload Successful',
+                description: 'This ISO file has been uploaded. Please check its status in the Images > ISOs menu'
+              })
+            }
+          }).catch(error => {
+            this.$notification.error({
+              message: 'Request Failed',
+              description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+              duration: 0
+            })
+          }).finally(() => {
+            this.loading = false
+          })
+        }
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-layout {
+    width: 80vw;
+
+    @media (min-width: 700px) {
+      width: 550px;
+    }
+  }
+
+  .action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+</style>
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
new file mode 100644
index 00000000000..ad8617887b9
--- /dev/null
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -0,0 +1,952 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <span v-if="uploadPercentage > 0">
+      <a-icon type="loading" />
+      Do not close this form, file upload is in progress...
+      <a-progress :percent="uploadPercentage" />
+    </span>
+    <a-spin :spinning="loading" v-else>
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <div v-if="currentForm === 'Create'">
+          <a-row :gutter="12">
+            <a-form-item :label="$t('url')">
+              <a-input
+                v-decorator="['url', {
+                  rules: [{ required: true, message: 'Please enter input' }]
+                }]"
+                :placeholder="apiParams.url.description" />
+            </a-form-item>
+          </a-row>
+        </div>
+        <div v-if="currentForm === 'Upload'">
+          <a-form-item :label="$t('templateFileUpload')">
+            <a-upload-dragger
+              :multiple="false"
+              :fileList="fileList"
+              :remove="handleRemove"
+              :beforeUpload="beforeUpload"
+              v-decorator="['file', {
+                rules: [{ required: true, message: 'Please enter input' }]
+              }]">
+              <p class="ant-upload-drag-icon">
+                <a-icon type="cloud-upload" />
+              </p>
+              <p class="ant-upload-text" v-if="fileList.length === 0">
+                Click or drag file to this area to upload
+              </p>
+            </a-upload-dragger>
+          </a-form-item>
+        </div>
+        <a-row :gutter="12">
+          <a-form-item :label="$t('name')">
+            <a-input
+              v-decorator="['name', {
+                rules: [{ required: true, message: 'Please upload a template ' }]
+              }]"
+              :placeholder="apiParams.name.description" />
+          </a-form-item>
+        </a-row>
+        <a-row :gutter="12">
+          <a-form-item :label="$t('displaytext')">
+            <a-input
+              v-decorator="['displaytext', {
+                rules: [{ required: true, message: 'Please enter input' }]
+              }]"
+              :placeholder="apiParams.displaytext.description" />
+          </a-form-item>
+        </a-row>
+        <div v-if="currentForm === 'Create'">
+          <a-row :gutter="12">
+            <a-col :md="24" :lg="24">
+              <a-form-item
+                :label="$t('zoneids')"
+                :validate-status="zoneError"
+                :help="zoneErrorMessage">
+                <a-select
+                  v-decorator="['zoneids', {
+                    rules: [
+                      {
+                        required: false,
+                        message: 'Please select option',
+                        type: 'array'
+                      }
+                    ]
+                  }]"
+                  :loading="zones.loading"
+                  mode="multiple"
+                  :placeholder="apiParams.zoneids.description"
+                  @change="handlerSelectZone">
+                  <a-select-option v-for="opt in zones.opts" :key="opt.name || opt.description">
+                    {{ opt.name || opt.description }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+        <div v-else>
+          <a-row :gutter="12">
+            <a-col :md="24" :lg="24">
+              <a-form-item
+                :label="$t('zoneid')"
+                :validate-status="zoneError"
+                :help="zoneErrorMessage">
+                <a-select
+                  v-decorator="['zoneid', {
+                    initialValue: this.zoneSelected
+                  }]"
+                  @change="handlerSelectZone"
+                  :loading="zones.loading">
+                  <a-select-option :value="zone.id" v-for="zone in zones.opts" :key="zone.id">
+                    <div v-if="zone.name !== $t('label.all.zone')">
+                      {{ zone.name || zone.description }}
+                    </div>
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+        <a-row :gutter="12">
+          <a-col :md="24" :lg="12">
+            <a-form-item :label="$t('hypervisor')">
+              <a-select
+                v-decorator="['hypervisor', {
+                  rules: [
+                    {
+                      required: true,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :loading="hyperVisor.loading"
+                :placeholder="apiParams.hypervisor.description"
+                @change="handlerSelectHyperVisor">
+                <a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12">
+            <a-form-item :label="$t('format')">
+              <a-select
+                v-decorator="['format', {
+                  rules: [
+                    {
+                      required: true,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :placeholder="apiParams.format.description">
+                <a-select-option v-for="opt in format.opts" :key="opt.id">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12" v-if="allowed && hyperKVMShow && currentForm !== 'Upload'">
+          <a-col :md="24" :lg="12">
+            <a-form-item :label="$t('directdownload')">
+              <a-switch v-decorator="['directdownload']" @change="handleChangeDirect" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12" v-if="allowDirectDownload">
+            <a-form-item :label="$t('checksum')">
+              <a-input
+                v-decorator="['checksum', {
+                  rules: [{ required: false, message: 'Please enter input' }]
+                }]"
+                :placeholder="apiParams.checksum.description" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12" v-if="allowed && hyperXenServerShow">
+          <a-form-item v-if="hyperXenServerShow" :label="$t('xenserverToolsVersion61plus')">
+            <a-switch
+              v-decorator="['xenserverToolsVersion61plus',{
+                initialValue: xenServerProvider
+              }]"
+              :default-checked="xenServerProvider" />
+          </a-form-item>
+        </a-row>
+        <a-row :gutter="12" v-if="hyperKVMShow || hyperVMWShow">
+          <a-col :md="24" :lg="24" v-if="hyperKVMShow">
+            <a-form-item :label="$t('rootDiskControllerType')">
+              <a-select
+                v-decorator="['rootDiskControllerType', {
+                  rules: [
+                    {
+                      required: true,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :loading="rootDisk.loading"
+                :placeholder="$t('rootdiskcontroller')">
+                <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12" v-if="hyperVMWShow">
+            <a-form-item :label="$t('rootDiskControllerType')">
+              <a-select
+                v-decorator="['rootDiskControllerType', {
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :loading="rootDisk.loading"
+                :placeholder="$t('rootdiskcontroller')">
+                <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="12" v-if="hyperVMWShow">
+            <a-form-item :label="$t('nicAdapterType')">
+              <a-select
+                v-decorator="['nicAdapterType', {
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :placeholder="$t('nicadaptertype')">
+                <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="24" :lg="24">
+            <a-form-item v-if="hyperVMWShow" :label="$t('keyboardType')">
+              <a-select
+                v-decorator="['keyboardType', {
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :placeholder="$t('keyboard')">
+                <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12">
+          <a-col :md="24" :lg="24">
+            <a-form-item :label="$t('ostypeid')">
+              <a-select
+                showSearch
+                v-decorator="['ostypeid', {
+                  initialValue: defaultOsType,
+                  rules: [
+                    {
+                      required: true,
+                      message: 'Please select option'
+                    }
+                  ]
+                }]"
+                :loading="osTypes.loading"
+                :placeholder="apiParams.ostypeid.description">
+                <a-select-option v-for="opt in osTypes.opts" :key="opt.name || opt.description">
+                  {{ opt.name || opt.description }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12">
+          <a-col :md="24" :lg="24">
+            <a-form-item>
+              <a-checkbox-group
+                v-decorator="['groupenabled', { initialValue: ['requireshvm'] }]"
+                style="width: 100%;"
+              >
+                <a-row>
+                  <a-col :span="12">
+                    <a-checkbox value="isextractable">
+                      {{ $t('isextractable') }}
+                    </a-checkbox>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-checkbox value="passwordenabled">
+                      {{ $t('passwordenabled') }}
+                    </a-checkbox>
+                  </a-col>
+                </a-row>
+                <a-row>
+                  <a-col :span="12">
+                    <a-checkbox value="isdynamicallyscalable">
+                      {{ $t('isdynamicallyscalable') }}
+                    </a-checkbox>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-checkbox value="sshkeyenabled">
+                      {{ $t('sshkeyenabled') }}
+                    </a-checkbox>
+                  </a-col>
+                </a-row>
+                <a-row>
+                  <a-col :span="12">
+                    <a-checkbox value="isrouting">
+                      {{ $t('isrouting') }}
+                    </a-checkbox>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-checkbox value="ispublic">
+                      {{ $t('ispublic') }}
+                    </a-checkbox>
+                  </a-col>
+                </a-row>
+                <a-row>
+                  <a-col :span="12">
+                    <a-checkbox value="requireshvm">
+                      {{ $t('requireshvm') }}
+                    </a-checkbox>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-checkbox value="isfeatured">
+                      {{ $t('isfeatured') }}
+                    </a-checkbox>
+                  </a-col>
+                </a-row>
+              </a-checkbox-group>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        </div>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import store from '@/store'
+import { axios } from '../../utils/request'
+
+export default {
+  name: 'RegisterOrUploadTemplate',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    action: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      uploadPercentage: 0,
+      uploading: false,
+      fileList: [],
+      zones: {},
+      defaultZone: '',
+      zoneSelected: '',
+      hyperVisor: {},
+      rootDisk: {},
+      nicAdapterType: {},
+      keyboardType: {},
+      format: {},
+      osTypes: {},
+      defaultOsType: '',
+      xenServerProvider: false,
+      hyperKVMShow: false,
+      hyperXenServerShow: false,
+      hyperVMWShow: false,
+      zoneError: '',
+      zoneErrorMessage: '',
+      loading: false,
+      rootAdmin: 'Admin',
+      allowed: false,
+      allowDirectDownload: false,
+      uploadParams: null,
+      currentForm: this.action.currentAction.api === 'registerTemplate' ? 'Create' : 'Upload'
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    this.apiConfig = this.$store.getters.apis.registerTemplate || {}
+    this.apiParams = {}
+    this.apiConfig.params.forEach(param => {
+      this.apiParams[param.name] = param
+    })
+  },
+  created () {
+    this.$set(this.zones, 'loading', false)
+    this.$set(this.zones, 'opts', [])
+    this.$set(this.hyperVisor, 'loading', false)
+    this.$set(this.hyperVisor, 'opts', [])
+    this.$set(this.rootDisk, 'loading', false)
+    this.$set(this.rootDisk, 'opts', [])
+    this.$set(this.nicAdapterType, 'loading', false)
+    this.$set(this.nicAdapterType, 'opts', [])
+    this.$set(this.keyboardType, 'loading', false)
+    this.$set(this.keyboardType, 'opts', [])
+    this.$set(this.format, 'loading', false)
+    this.$set(this.format, 'opts', [])
+    this.$set(this.osTypes, 'loading', false)
+    this.$set(this.osTypes, 'opts', [])
+  },
+  mounted () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      this.fetchZone()
+      this.fetchOsTypes()
+      if (Object.prototype.hasOwnProperty.call(store.getters.apis, 'listConfigurations')) {
+        this.fetchXenServerProvider()
+      }
+    },
+    handleFormChange (e) {
+      this.currentForm = e.target.value
+    },
+    handleRemove (file) {
+      const index = this.fileList.indexOf(file)
+      const newFileList = this.fileList.slice()
+      newFileList.splice(index, 1)
+      this.fileList = newFileList
+    },
+    beforeUpload (file) {
+      this.fileList = [file]
+      return false
+    },
+    handleUpload () {
+      const { fileList } = this
+      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: 'Upload Successful',
+          description: 'This template file has been uploaded. Please check its status at Templates menu'
+        })
+        this.closeAction()
+      }).catch(e => {
+        this.$notification.error({
+          message: 'Upload Failed',
+          description: `Failed to upload Template -  ${e}`,
+          duration: 0
+        })
+        this.closeAction()
+      })
+    },
+    fetchZone () {
+      const params = {}
+      let listZones = []
+      params.listAll = true
+
+      this.allowed = false
+
+      if (store.getters.userInfo.roletype === this.rootAdmin) {
+        this.allowed = true
+        listZones.push({
+          id: this.$t('label.all.zone'),
+          name: this.$t('label.all.zone')
+        })
+      }
+
+      this.zones.loading = true
+      this.zones.opts = []
+
+      api('listZones', params).then(json => {
+        const listZonesResponse = json.listzonesresponse.zone
+        listZones = listZones.concat(listZonesResponse)
+
+        this.$set(this.zones, 'opts', listZones)
+      }).finally(() => {
+        this.zoneSelected = (this.zones.opts && this.zones.opts[1]) ? this.zones.opts[1].id : ''
+        this.zones.loading = false
+        this.fetchHyperVisor({ zoneid: this.zoneSelected })
+      })
+    },
+    fetchHyperVisor (params) {
+      this.hyperVisor.loading = true
+      let listhyperVisors = this.hyperVisor.opts
+
+      api('listHypervisors', params).then(json => {
+        const listResponse = json.listhypervisorsresponse.hypervisor
+        if (listResponse) {
+          listhyperVisors = listhyperVisors.concat(listResponse)
+        }
+        if (this.currentForm !== 'Upload') {
+          listhyperVisors.push({
+            name: 'Any'
+          })
+        }
+        this.$set(this.hyperVisor, 'opts', listhyperVisors)
+      }).finally(() => {
+        this.hyperVisor.loading = false
+      })
+    },
+    fetchOsTypes () {
+      const params = {}
+      params.listAll = true
+
+      this.osTypes.opts = []
+      this.osTypes.loading = true
+
+      api('listOsTypes', params).then(json => {
+        const listOsTypes = json.listostypesresponse.ostype
+        this.$set(this.osTypes, 'opts', listOsTypes)
+        this.defaultOsType = this.osTypes.opts[1].description
+      }).finally(() => {
+        this.osTypes.loading = false
+      })
+    },
+    fetchXenServerProvider () {
+      const params = {}
+      params.name = 'xenserver.pvdriver.version'
+
+      this.xenServerProvider = true
+
+      api('listConfigurations', params).then(json => {
+        if (json.listconfigurationsresponse.configuration !== null && json.listconfigurationsresponse.configuration[0].value !== 'xenserver61') {
+          this.xenServerProvider = false
+        }
+      })
+    },
+    fetchRootDisk (hyperVisor) {
+      const controller = []
+      this.rootDisk.opts = []
+
+      if (hyperVisor === 'KVM') {
+        controller.push({
+          id: '',
+          description: ''
+        })
+        controller.push({
+          id: 'ide',
+          description: 'ide'
+        })
+        controller.push({
+          id: 'osdefault',
+          description: 'osdefault'
+        })
+        controller.push({
+          id: 'scsi',
+          description: 'scsi'
+        })
+        controller.push({
+          id: 'virtio',
+          description: 'virtio'
+        })
+      } else if (hyperVisor === 'VMware') {
+        controller.push({
+          id: '',
+          description: ''
+        })
+        controller.push({
+          id: 'scsi',
+          description: 'scsi'
+        })
+        controller.push({
+          id: 'ide',
+          description: 'ide'
+        })
+        controller.push({
+          id: 'osdefault',
+          description: 'osdefault'
+        })
+        controller.push({
+          id: 'pvscsi',
+          description: 'pvscsi'
+        })
+        controller.push({
+          id: 'lsilogic',
+          description: 'lsilogic'
+        })
+        controller.push({
+          id: 'lsisas1068',
+          description: 'lsilogicsas'
+        })
+        controller.push({
+          id: 'buslogic',
+          description: 'buslogic'
+        })
+      }
+
+      this.$set(this.rootDisk, 'opts', controller)
+    },
+    fetchNicAdapterType () {
+      const nicAdapterType = []
+      nicAdapterType.push({
+        id: '',
+        description: ''
+      })
+      nicAdapterType.push({
+        id: 'E1000',
+        description: 'E1000'
+      })
+      nicAdapterType.push({
+        id: 'PCNet32',
+        description: 'PCNet32'
+      })
+      nicAdapterType.push({
+        id: 'Vmxnet2',
+        description: 'Vmxnet2'
+      })
+      nicAdapterType.push({
+        id: 'Vmxnet3',
+        description: 'Vmxnet3'
+      })
+
+      this.$set(this.nicAdapterType, 'opts', nicAdapterType)
+    },
+    fetchKeyboardType () {
+      const keyboardType = []
+      keyboardType.push({
+        id: '',
+        description: ''
+      })
+      keyboardType.push({
+        id: 'us',
+        description: 'label.standard.us.keyboard'
+      })
+      keyboardType.push({
+        id: 'uk',
+        description: 'label.uk.keyboard'
+      })
+      keyboardType.push({
+        id: 'fr',
+        description: 'label.french.azerty.keyboard'
+      })
+      keyboardType.push({
+        id: 'jp',
+        description: 'label.japanese.keyboard'
+      })
+      keyboardType.push({
+        id: 'sc',
+        description: 'label.simplified.chinese.keyboard'
+      })
+
+      this.$set(this.keyboardType, 'opts', keyboardType)
+    },
+    fetchFormat (hyperVisor) {
+      const format = []
+
+      switch (hyperVisor) {
+        case 'Hyperv':
+          format.push({
+            id: 'VHD',
+            description: 'VHD'
+          })
+          format.push({
+            id: 'VHDX',
+            description: 'VHDX'
+          })
+          break
+        case 'KVM':
+          this.hyperKVMShow = true
+          format.push({
+            id: 'QCOW2',
+            description: 'QCOW2'
+          })
+          format.push({
+            id: 'RAW',
+            description: 'RAW'
+          })
+          format.push({
+            id: 'VHD',
+            description: 'VHD'
+          })
+          format.push({
+            id: 'VMDK',
+            description: 'VMDK'
+          })
+          break
+        case 'XenServer':
+          this.hyperXenServerShow = true
+          format.push({
+            id: 'VHD',
+            description: 'VHD'
+          })
+          break
+        case 'VMware':
+          this.hyperVMWShow = true
+          format.push({
+            id: 'OVA',
+            description: 'OVA'
+          })
+          break
+        case 'BareMetal':
+          format.push({
+            id: 'BareMetal',
+            description: 'BareMetal'
+          })
+          break
+        case 'Ovm':
+          format.push({
+            id: 'RAW',
+            description: 'RAW'
+          })
+          break
+        case 'LXC':
+          format.push({
+            id: 'TAR',
+            description: 'TAR'
+          })
+          break
+        default:
+          break
+      }
+      this.$set(this.format, 'opts', format)
+    },
+    handlerSelectZone (value) {
+      this.validZone(value)
+      this.hyperVisor.opts = []
+
+      if (this.zoneError !== '') {
+        return
+      }
+
+      this.resetSelect()
+
+      const params = {}
+      const allZoneExists = value.filter(zone => zone === this.$t('label.all.zone'))
+
+      if (allZoneExists.length > 0) {
+        params.listAll = true
+        this.fetchHyperVisor(params)
+        return
+      }
+
+      for (let i = 0; i < value.length; i++) {
+        const zoneSelected = this.zones.opts.filter(zone => zone.name === value[i])
+
+        if (zoneSelected.length > 0) {
+          params.zoneid = zoneSelected[0].id
+          this.fetchHyperVisor(params)
+        }
+      }
+    },
+    handlerSelectHyperVisor (value) {
+      const hyperVisor = this.hyperVisor.opts[value].name
+
+      this.hyperXenServerShow = false
+      this.hyperVMWShow = false
+      this.hyperKVMShow = false
+      this.allowDirectDownload = false
+
+      this.resetSelect()
+      this.fetchFormat(hyperVisor)
+      this.fetchRootDisk(hyperVisor)
+      this.fetchNicAdapterType()
+      this.fetchKeyboardType()
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err || this.zoneError !== '') {
+          return
+        }
+        let params = {}
+        for (const key in values) {
+          const input = values[key]
+
+          if (input === undefined) {
+            continue
+          }
+          if (key === 'file') {
+            continue
+          }
+
+          if (key === 'zoneids') {
+            if (input.length === 1 && input[0] === this.$t('label.all.zone')) {
+              params.zoneids = '-1'
+              continue
+            }
+            const zonesSelected = []
+            for (const index in input) {
+              const name = input[index]
+              const zone = this.zones.opts.filter(zone => zone.name === name)
+              if (zone && zone[0]) {
+                zonesSelected.push(zone[0].id)
+              }
+            }
+            params[key] = zonesSelected.join(',')
+          } else if (key === 'zoneid') {
+            params[key] = values[key]
+          } else if (key === 'ostypeid') {
+            const osTypeSelected = this.osTypes.opts.filter(item => item.description === input)
+            if (osTypeSelected && osTypeSelected[0]) {
+              params[key] = osTypeSelected[0].id
+            }
+          } else if (key === 'hypervisor') {
+            params[key] = this.hyperVisor.opts[input].name
+          } else if (key === 'groupenabled') {
+            for (const index in input) {
+              const name = input[index]
+              params[name] = true
+            }
+          } else {
+            const formattedDetailData = {}
+            switch (key) {
+              case 'rootDiskControllerType':
+                formattedDetailData['details[0].rootDiskController'] = input
+                break
+              case 'nicAdapterType':
+                formattedDetailData['details[0].nicAdapter'] = input
+                break
+              case 'keyboardType':
+                formattedDetailData['details[0].keyboard'] = input
+                break
+              case 'xenserverToolsVersion61plus':
+                formattedDetailData['details[0].hypervisortoolsversion'] = input
+                break
+            }
+
+            if (Object.keys(formattedDetailData).length > 0) {
+              params = Object.assign({}, params, formattedDetailData)
+            } else {
+              params[key] = input
+            }
+          }
+        }
+        if (this.currentForm === 'Create') {
+          this.loading = true
+          api('registerTemplate', params).then(json => {
+            this.$emit('refresh-data')
+            this.$notification.success({
+              message: 'Register Template',
+              description: 'Successfully registered template ' + params.name
+            })
+          }).catch(error => {
+            this.$notification.error({
+              message: 'Request Failed',
+              description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+              duration: 0
+            })
+          }).finally(() => {
+            this.loading = false
+            this.closeAction()
+          })
+        } else {
+          this.loading = true
+          if (this.fileList.length > 1) {
+            this.$notification.error({
+              message: 'Template Upload Failed',
+              description: 'Only one template can be uploaded at a time',
+              duration: 0
+            })
+          }
+          api('getUploadParamsForTemplate', params).then(json => {
+            this.uploadParams = (json.postuploadtemplateresponse && json.postuploadtemplateresponse.getuploadparams) ? json.postuploadtemplateresponse.getuploadparams : ''
+            this.handleUpload()
+          }).catch(error => {
+            this.$notification.error({
+              message: 'Request Failed',
+              description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+              duration: 0
+            })
+          }).finally(() => {
+            this.loading = false
+          })
+        }
+      })
+    },
+    handleChangeDirect (checked) {
+      this.allowDirectDownload = checked
+    },
+    validZone (zones) {
+      const allZoneExists = zones.filter(zone => zone === this.$t('label.all.zone'))
+
+      this.zoneError = ''
+      this.zoneErrorMessage = ''
+
+      if (allZoneExists.length > 0 && zones.length > 1) {
+        this.zoneError = 'error'
+        this.zoneErrorMessage = this.$t('label.error.zone.combined')
+      }
+    },
+    closeAction () {
+      this.$emit('close-action')
+    },
+    resetSelect () {
+      this.form.setFieldsValue({
+        hypervisor: undefined,
+        format: undefined,
+        rootDiskControllerType: undefined,
+        nicAdapterType: undefined,
+        keyboardType: undefined
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .form-layout {
+    width: 80vw;
+
+    @media (min-width: 700px) {
+      width: 550px;
+    }
+  }
+
+  .action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+</style>
diff --git a/ui/src/views/image/RegisterTemplate.vue b/ui/src/views/image/RegisterTemplate.vue
deleted file mode 100644
index 5f5f061b9ee..00000000000
--- a/ui/src/views/image/RegisterTemplate.vue
+++ /dev/null
@@ -1,798 +0,0 @@
-// Licensed to the Apache Software Foundation (ASF) under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  The ASF licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied.  See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-<template>
-  <div class="form-layout">
-    <a-form layout="vertical" :form="form">
-      <a-row :gutter="12">
-        <a-form-item :label="$t('url')">
-          <a-input
-            v-decorator="['url', {
-              rules: [{ required: true, message: 'Please enter input' }]
-            }]"
-            :placeholder="apiParams.url.description" />
-        </a-form-item>
-      </a-row>
-      <a-row :gutter="12">
-        <a-form-item :label="$t('name')">
-          <a-input
-            v-decorator="['name', {
-              rules: [{ required: true, message: 'Please enter input' }]
-            }]"
-            :placeholder="apiParams.name.description" />
-        </a-form-item>
-      </a-row>
-      <a-row :gutter="12">
-        <a-form-item :label="$t('displaytext')">
-          <a-input
-            v-decorator="['displaytext', {
-              rules: [{ required: true, message: 'Please enter input' }]
-            }]"
-            :placeholder="apiParams.displaytext.description" />
-        </a-form-item>
-      </a-row>
-      <a-row :gutter="12">
-        <a-col :md="24" :lg="24">
-          <a-form-item
-            :label="$t('zoneids')"
-            :validate-status="zoneError"
-            :help="zoneErrorMessage">
-            <a-select
-              v-decorator="['zoneids', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option',
-                    type: 'array'
-                  }
-                ]
-              }]"
-              :loading="zones.loading"
-              mode="multiple"
-              :placeholder="apiParams.zoneids.description"
-              @change="handlerSelectZone">
-              <a-select-option v-for="opt in zones.opts" :key="opt.name || opt.description">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="12">
-        <a-col :md="24" :lg="12">
-          <a-form-item :label="$t('hypervisor')">
-            <a-select
-              v-decorator="['hypervisor', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :loading="hyperVisor.loading"
-              :placeholder="apiParams.hypervisor.description"
-              @change="handlerSelectHyperVisor">
-              <a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :md="24" :lg="12">
-          <a-form-item :label="$t('format')">
-            <a-select
-              v-decorator="['format', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :placeholder="apiParams.format.description">
-              <a-select-option v-for="opt in format.opts" :key="opt.id">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="12" v-if="allowed && hyperKVMShow">
-        <a-col :md="24" :lg="12">
-          <a-form-item :label="$t('directdownload')">
-            <a-switch v-decorator="['directdownload']" @change="handleChangeDirect" />
-          </a-form-item>
-        </a-col>
-        <a-col :md="24" :lg="12" v-if="allowDirectDownload">
-          <a-form-item :label="$t('checksum')">
-            <a-input
-              v-decorator="['checksum', {
-                rules: [{ required: false, message: 'Please enter input' }]
-              }]"
-              :placeholder="apiParams.checksum.description" />
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="12" v-if="allowed && hyperXenServerShow">
-        <a-form-item v-if="hyperXenServerShow" :label="$t('xenserverToolsVersion61plus')">
-          <a-switch
-            v-decorator="['xenserverToolsVersion61plus',{
-              initialValue: xenServerProvider
-            }]"
-            :default-checked="xenServerProvider" />
-        </a-form-item>
-      </a-row>
-      <a-row :gutter="12" v-if="hyperKVMShow || hyperVMWShow">
-        <a-col :md="24" :lg="24" v-if="hyperKVMShow">
-          <a-form-item :label="$t('rootDiskControllerType')">
-            <a-select
-              v-decorator="['rootDiskControllerType', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :loading="rootDisk.loading"
-              :placeholder="$t('rootdiskcontroller')">
-              <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :md="24" :lg="12" v-if="hyperVMWShow">
-          <a-form-item :label="$t('rootDiskControllerType')">
-            <a-select
-              v-decorator="['rootDiskControllerType', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :loading="rootDisk.loading"
-              :placeholder="$t('rootdiskcontroller')">
-              <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :md="24" :lg="12" v-if="hyperVMWShow">
-          <a-form-item :label="$t('nicAdapterType')">
-            <a-select
-              v-decorator="['nicAdapterType', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :placeholder="$t('nicadaptertype')">
-              <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-        <a-col :md="24" :lg="24">
-          <a-form-item v-if="hyperVMWShow" :label="$t('keyboardType')">
-            <a-select
-              v-decorator="['keyboardType', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :placeholder="$t('keyboard')">
-              <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="12">
-        <a-col :md="24" :lg="24">
-          <a-form-item :label="$t('ostypeid')">
-            <a-select
-              showSearch
-              v-decorator="['ostypeid', {
-                rules: [
-                  {
-                    required: false,
-                    message: 'Please select option'
-                  }
-                ]
-              }]"
-              :loading="osTypes.loading"
-              :placeholder="apiParams.ostypeid.description">
-              <a-select-option v-for="opt in osTypes.opts" :key="opt.name || opt.description">
-                {{ opt.name || opt.description }}
-              </a-select-option>
-            </a-select>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-row :gutter="12">
-        <a-col :md="24" :lg="24">
-          <a-form-item>
-            <a-checkbox-group
-              v-decorator="['groupenabled', { initialValue: ['requireshvm'] }]"
-              style="width: 100%;"
-            >
-              <a-row>
-                <a-col :span="12">
-                  <a-checkbox value="isextractable">
-                    {{ $t('isextractable') }}
-                  </a-checkbox>
-                </a-col>
-                <a-col :span="12">
-                  <a-checkbox value="passwordenabled">
-                    {{ $t('passwordenabled') }}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-              <a-row>
-                <a-col :span="12">
-                  <a-checkbox value="isdynamicallyscalable">
-                    {{ $t('isdynamicallyscalable') }}
-                  </a-checkbox>
-                </a-col>
-                <a-col :span="12">
-                  <a-checkbox value="sshkeyenabled">
-                    {{ $t('sshkeyenabled') }}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-              <a-row>
-                <a-col :span="12">
-                  <a-checkbox value="isrouting">
-                    {{ $t('isrouting') }}
-                  </a-checkbox>
-                </a-col>
-                <a-col :span="12">
-                  <a-checkbox value="ispublic">
-                    {{ $t('ispublic') }}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-              <a-row>
-                <a-col :span="12">
-                  <a-checkbox value="requireshvm">
-                    {{ $t('requireshvm') }}
-                  </a-checkbox>
-                </a-col>
-                <a-col :span="12">
-                  <a-checkbox value="isfeatured">
-                    {{ $t('isfeatured') }}
-                  </a-checkbox>
-                </a-col>
-              </a-row>
-            </a-checkbox-group>
-          </a-form-item>
-        </a-col>
-      </a-row>
-
-      <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
-      </div>
-    </a-form>
-  </div>
-</template>
-
-<script>
-import { api } from '@/api'
-import store from '@/store'
-
-export default {
-  name: 'RegisterTemplate',
-  data () {
-    return {
-      zones: {},
-      hyperVisor: {},
-      rootDisk: {},
-      nicAdapterType: {},
-      keyboardType: {},
-      format: {},
-      osTypes: {},
-      xenServerProvider: false,
-      hyperKVMShow: false,
-      hyperXenServerShow: false,
-      hyperVMWShow: false,
-      zoneError: '',
-      zoneErrorMessage: '',
-      loading: false,
-      rootAdmin: 'Admin',
-      allowed: false,
-      allowDirectDownload: false
-    }
-  },
-  beforeCreate () {
-    this.form = this.$form.createForm(this)
-    this.apiConfig = this.$store.getters.apis.registerTemplate || {}
-    this.apiParams = {}
-    this.apiConfig.params.forEach(param => {
-      this.apiParams[param.name] = param
-    })
-  },
-  created () {
-    this.$set(this.zones, 'loading', false)
-    this.$set(this.zones, 'opts', [])
-    this.$set(this.hyperVisor, 'loading', false)
-    this.$set(this.hyperVisor, 'opts', [])
-    this.$set(this.rootDisk, 'loading', false)
-    this.$set(this.rootDisk, 'opts', [])
-    this.$set(this.nicAdapterType, 'loading', false)
-    this.$set(this.nicAdapterType, 'opts', [])
-    this.$set(this.keyboardType, 'loading', false)
-    this.$set(this.keyboardType, 'opts', [])
-    this.$set(this.format, 'loading', false)
-    this.$set(this.format, 'opts', [])
-    this.$set(this.osTypes, 'loading', false)
-    this.$set(this.osTypes, 'opts', [])
-  },
-  mounted () {
-    this.fetchData()
-  },
-  methods: {
-    fetchData () {
-      this.fetchZone()
-      this.fetchOsTypes()
-      if (Object.prototype.hasOwnProperty.call(store.getters.apis, 'listConfigurations')) {
-        this.fetchXenServerProvider()
-      }
-    },
-    fetchZone () {
-      const params = {}
-      let listZones = []
-      params.listAll = true
-
-      this.allowed = false
-
-      if (store.getters.userInfo.roletype === this.rootAdmin) {
-        this.allowed = true
-        listZones.push({
-          id: this.$t('label.all.zone'),
-          name: this.$t('label.all.zone')
-        })
-      }
-
-      this.zones.loading = true
-      this.zones.opts = []
-
-      api('listZones', params).then(json => {
-        const listZonesResponse = json.listzonesresponse.zone
-        listZones = listZones.concat(listZonesResponse)
-
-        this.$set(this.zones, 'opts', listZones)
-      }).finally(() => {
-        this.zones.loading = false
-      })
-    },
-    fetchHyperVisor (params) {
-      this.hyperVisor.loading = true
-      let listhyperVisors = this.hyperVisor.opts
-
-      api('listHypervisors', params).then(json => {
-        const listResponse = json.listhypervisorsresponse.hypervisor
-        if (listResponse) {
-          listhyperVisors = listhyperVisors.concat(listResponse)
-        }
-        listhyperVisors.push({
-          name: 'Any'
-        })
-
-        this.$set(this.hyperVisor, 'opts', listhyperVisors)
-      }).finally(() => {
-        this.hyperVisor.loading = false
-      })
-    },
-    fetchOsTypes () {
-      const params = {}
-      params.listAll = true
-
-      this.osTypes.opts = []
-      this.osTypes.loading = true
-
-      api('listOsTypes', params).then(json => {
-        const listOsTypes = json.listostypesresponse.ostype
-        this.$set(this.osTypes, 'opts', listOsTypes)
-      }).finally(() => {
-        this.osTypes.loading = false
-      })
-    },
-    fetchXenServerProvider () {
-      const params = {}
-      params.name = 'xenserver.pvdriver.version'
-
-      this.xenServerProvider = true
-
-      api('listConfigurations', params).then(json => {
-        if (json.listconfigurationsresponse.configuration !== null && json.listconfigurationsresponse.configuration[0].value !== 'xenserver61') {
-          this.xenServerProvider = false
-        }
-      })
-    },
-    fetchRootDisk (hyperVisor) {
-      const controller = []
-      this.rootDisk.opts = []
-
-      if (hyperVisor === 'KVM') {
-        controller.push({
-          id: '',
-          description: ''
-        })
-        controller.push({
-          id: 'ide',
-          description: 'ide'
-        })
-        controller.push({
-          id: 'osdefault',
-          description: 'osdefault'
-        })
-        controller.push({
-          id: 'scsi',
-          description: 'scsi'
-        })
-        controller.push({
-          id: 'virtio',
-          description: 'virtio'
-        })
-      } else if (hyperVisor === 'VMware') {
-        controller.push({
-          id: '',
-          description: ''
-        })
-        controller.push({
-          id: 'scsi',
-          description: 'scsi'
-        })
-        controller.push({
-          id: 'ide',
-          description: 'ide'
-        })
-        controller.push({
-          id: 'osdefault',
-          description: 'osdefault'
-        })
-        controller.push({
-          id: 'pvscsi',
-          description: 'pvscsi'
-        })
-        controller.push({
-          id: 'lsilogic',
-          description: 'lsilogic'
-        })
-        controller.push({
-          id: 'lsisas1068',
-          description: 'lsilogicsas'
-        })
-        controller.push({
-          id: 'buslogic',
-          description: 'buslogic'
-        })
-      }
-
-      this.$set(this.rootDisk, 'opts', controller)
-    },
-    fetchNicAdapterType () {
-      const nicAdapterType = []
-      nicAdapterType.push({
-        id: '',
-        description: ''
-      })
-      nicAdapterType.push({
-        id: 'E1000',
-        description: 'E1000'
-      })
-      nicAdapterType.push({
-        id: 'PCNet32',
-        description: 'PCNet32'
-      })
-      nicAdapterType.push({
-        id: 'Vmxnet2',
-        description: 'Vmxnet2'
-      })
-      nicAdapterType.push({
-        id: 'Vmxnet3',
-        description: 'Vmxnet3'
-      })
-
-      this.$set(this.nicAdapterType, 'opts', nicAdapterType)
-    },
-    fetchKeyboardType () {
-      const keyboardType = []
-      keyboardType.push({
-        id: '',
-        description: ''
-      })
-      keyboardType.push({
-        id: 'us',
-        description: 'label.standard.us.keyboard'
-      })
-      keyboardType.push({
-        id: 'uk',
-        description: 'label.uk.keyboard'
-      })
-      keyboardType.push({
-        id: 'fr',
-        description: 'label.french.azerty.keyboard'
-      })
-      keyboardType.push({
-        id: 'jp',
-        description: 'label.japanese.keyboard'
-      })
-      keyboardType.push({
-        id: 'sc',
-        description: 'label.simplified.chinese.keyboard'
-      })
-
-      this.$set(this.keyboardType, 'opts', keyboardType)
-    },
-    fetchFormat (hyperVisor) {
-      const format = []
-
-      switch (hyperVisor) {
-        case 'Hyperv':
-          format.push({
-            id: 'VHD',
-            description: 'VHD'
-          })
-          format.push({
-            id: 'VHDX',
-            description: 'VHDX'
-          })
-          break
-        case 'KVM':
-          this.hyperKVMShow = true
-          format.push({
-            id: 'QCOW2',
-            description: 'QCOW2'
-          })
-          format.push({
-            id: 'RAW',
-            description: 'RAW'
-          })
-          format.push({
-            id: 'VHD',
-            description: 'VHD'
-          })
-          format.push({
-            id: 'VMDK',
-            description: 'VMDK'
-          })
-          break
-        case 'XenServer':
-          this.hyperXenServerShow = true
-          format.push({
-            id: 'VHD',
-            description: 'VHD'
-          })
-          break
-        case 'VMware':
-          this.hyperVMWShow = true
-          format.push({
-            id: 'OVA',
-            description: 'OVA'
-          })
-          break
-        case 'BareMetal':
-          format.push({
-            id: 'BareMetal',
-            description: 'BareMetal'
-          })
-          break
-        case 'Ovm':
-          format.push({
-            id: 'RAW',
-            description: 'RAW'
-          })
-          break
-        case 'LXC':
-          format.push({
-            id: 'TAR',
-            description: 'TAR'
-          })
-          break
-        default:
-          break
-      }
-
-      this.$set(this.format, 'opts', format)
-    },
-    handlerSelectZone (value) {
-      this.validZone(value)
-      this.hyperVisor.opts = []
-
-      if (this.zoneError !== '') {
-        return
-      }
-
-      this.resetSelect()
-
-      const params = {}
-      const allZoneExists = value.filter(zone => zone === this.$t('label.all.zone'))
-
-      if (allZoneExists.length > 0) {
-        params.listAll = true
-
-        this.fetchHyperVisor(params)
-        return
-      }
-
-      for (let i = 0; i < value.length; i++) {
-        const zoneSelected = this.zones.opts.filter(zone => zone.name === value[i])
-
-        if (zoneSelected.length > 0) {
-          params.zoneid = zoneSelected[0].id
-          this.fetchHyperVisor(params)
-        }
-      }
-    },
-    handlerSelectHyperVisor (value) {
-      const hyperVisor = this.hyperVisor.opts[value].name
-
-      this.hyperXenServerShow = false
-      this.hyperVMWShow = false
-      this.hyperKVMShow = false
-      this.allowDirectDownload = false
-
-      this.resetSelect()
-      this.fetchFormat(hyperVisor)
-      this.fetchRootDisk(hyperVisor)
-      this.fetchNicAdapterType()
-      this.fetchKeyboardType()
-    },
-    handleSubmit (e) {
-      e.preventDefault()
-
-      this.form.validateFields((err, values) => {
-        if (err || this.zoneError !== '') {
-          return
-        }
-        let params = {}
-        for (const key in values) {
-          const input = values[key]
-
-          if (input === undefined) {
-            continue
-          }
-
-          if (key === 'zoneids') {
-            if (input.length === 1 && input[0] === this.$t('label.all.zone')) {
-              params.zoneids = '-1'
-              continue
-            }
-            const zonesSelected = []
-            for (const index in input) {
-              const name = input[index]
-              const zone = this.zones.opts.filter(zone => zone.name === name)
-              if (zone && zone[0]) {
-                zonesSelected.push(zone[0].id)
-              }
-            }
-            params[key] = zonesSelected.join(',')
-          } else if (key === 'ostypeid') {
-            const osTypeSelected = this.osTypes.opts.filter(item => item.description === input)
-            if (osTypeSelected && osTypeSelected[0]) {
-              params[key] = osTypeSelected[0].id
-            }
-          } else if (key === 'hypervisor') {
-            params[key] = this.hyperVisor.opts[input].name
-          } else if (key === 'groupenabled') {
-            for (const index in input) {
-              const name = input[index]
-              params[name] = true
-            }
-          } else {
-            const formattedDetailData = {}
-            switch (key) {
-              case 'rootDiskControllerType':
-                formattedDetailData['details[0].rootDiskController'] = input
-                break
-              case 'nicAdapterType':
-                formattedDetailData['details[0].nicAdapter'] = input
-                break
-              case 'keyboardType':
-                formattedDetailData['details[0].keyboard'] = input
-                break
-              case 'xenserverToolsVersion61plus':
-                formattedDetailData['details[0].hypervisortoolsversion'] = input
-                break
-            }
-
-            if (Object.keys(formattedDetailData).length > 0) {
-              params = Object.assign({}, params, formattedDetailData)
-            } else {
-              params[key] = input
-            }
-          }
-        }
-        this.loading = true
-        api('registerTemplate', params).then(json => {
-          this.$emit('refresh-data')
-          this.$notification.success({
-            message: 'Register Template',
-            description: 'Successfully registered template ' + params.name
-          })
-        }).catch(error => {
-          this.$notification.error({
-            message: 'Request Failed',
-            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
-          })
-        }).finally(() => {
-          this.loading = false
-          this.closeAction()
-        })
-      })
-    },
-    handleChangeDirect (checked) {
-      this.allowDirectDownload = checked
-    },
-    validZone (zones) {
-      const allZoneExists = zones.filter(zone => zone === this.$t('label.all.zone'))
-
-      this.zoneError = ''
-      this.zoneErrorMessage = ''
-
-      if (allZoneExists.length > 0 && zones.length > 1) {
-        this.zoneError = 'error'
-        this.zoneErrorMessage = this.$t('label.error.zone.combined')
-      }
-    },
-    closeAction () {
-      this.$emit('close-action')
-    },
-    resetSelect () {
-      this.form.setFieldsValue({
-        hypervisor: undefined,
-        format: undefined,
-        rootDiskControllerType: undefined,
-        nicAdapterType: undefined,
-        keyboardType: undefined
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-  .form-layout {
-    width: 80vw;
-
-    @media (min-width: 700px) {
-      width: 550px;
-    }
-  }
-
-  .action-button {
-    text-align: right;
-
-    button {
-      margin-right: 5px;
-    }
-  }
-</style>
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index e5bd7ee91c8..a145ca6ef39 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -16,41 +16,219 @@
 // under the License.
 
 <template>
-  <div>
-    TODO: upload volume from local file component
-
-    <a-upload
-      name="avatar"
-      listType="picture-card"
-      class="avatar-uploader"
-      :showUploadList="false"
-      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-      :beforeUpload="beforeUpload"
-      @change="handleChange"
-    >
-      <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
-      <div v-else>
-        <a-icon :type="loading ? 'loading' : 'plus'" />
-        <div class="ant-upload-text">Upload Volume</div>
-      </div>
-    </a-upload>
+  <div class="form-layout">
+    <span v-if="uploadPercentage > 0">
+      <a-icon type="loading" />
+      Do not close this form, file upload is in progress...
+      <a-progress :percent="uploadPercentage" />
+    </span>
+    <a-spin :spinning="loading" v-else>
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item :label="$t('templateFileUpload')">
+          <a-upload-dragger
+            :multiple="false"
+            :fileList="fileList"
+            :remove="handleRemove"
+            :beforeUpload="beforeUpload"
+            v-decorator="['file', {
+              rules: [{ required: true, message: 'Please enter input' }]
+            }]">
+            <p class="ant-upload-drag-icon">
+              <a-icon type="cloud-upload" />
+            </p>
+            <p class="ant-upload-text" v-if="fileList.length === 0">
+              Click or drag file to this area to upload
+            </p>
+          </a-upload-dragger>
+        </a-form-item>
+        <a-form-item :label="$t('name')">
+          <a-input
+            v-decorator="['name', {
+              rules: [{ required: true, message: 'Please enter Volume name' }]
+            }]"
+            :placeholder="$t('volumename')" />
+        </a-form-item>
+        <a-form-item :label="$t('zone')">
+          <a-select
+            v-decorator="['zoneId', {
+              initialValue: zoneSelected,
+              rules: [
+                {
+                  required: true,
+                  message: 'Please select option'
+                }
+              ]
+            }]">
+            <a-select-option :value="zone.id" v-for="zone in zones" :key="zone.id">
+              {{ zone.name || zone.description }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('format')">
+          <a-select
+            v-decorator="['format', {
+              initialValue: formats[0],
+              rules: [
+                {
+                  required: false,
+                  message: 'Please select option'
+                }
+              ]
+            }]">
+            <a-select-option v-for="format in formats" :key="format">
+              {{ format }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :label="$t('volumeChecksum')">
+          <a-input
+            v-decorator="['checksum']"
+            placeholder="Use the hash that you created at the start of the volume upload procedure"
+          />
+        </a-form-item>
+        <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ this.$t('Cancel') }}</a-button>
+          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('OK') }}</a-button>
+        </div>
+      </a-form>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import { api } from '@/api'
+import { axios } from '../../utils/request'
 
 export default {
-  name: '',
-  components: {
-  },
+  name: 'UploadLocalVolume',
   data () {
     return {
+      fileList: [],
+      zones: [],
+      formats: ['RAW', 'VHD', 'VHDX', 'OVA', 'QCOW2'],
+      zoneSelected: '',
+      uploadParams: null,
+      loading: false,
+      uploadPercentage: 0
     }
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  mounted () {
+    this.listZones()
+  },
   methods: {
+    listZones () {
+      api('listZones').then(json => {
+        if (json && json.listzonesresponse && json.listzonesresponse.zone) {
+          this.zones = json.listzonesresponse.zone
+          if (this.zones.length > 0) {
+            this.zoneSelected = this.zone[0].id
+          }
+        }
+      })
+    },
+    handleRemove (file) {
+      const index = this.fileList.indexOf(file)
+      const newFileList = this.fileList.slice()
+      newFileList.splice(index, 1)
+      this.fileList = newFileList
+    },
+    beforeUpload (file) {
+      this.fileList = [...this.fileList, file]
+      return false
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        const params = {}
+        for (const key in values) {
+          const input = values[key]
+          if (input === undefined) {
+            continue
+          }
+          if (key === 'file') {
+            continue
+          }
+          params[key] = input
+        }
+        api('getUploadParamsForVolume', params).then(json => {
+          this.uploadParams = (json.postuploadvolumeresponse && json.postuploadvolumeresponse.getuploadparams) ? json.postuploadvolumeresponse.getuploadparams : ''
+          const { fileList } = this
+          if (this.fileList.length > 1) {
+            this.$notification.error({
+              message: 'Volume Upload Failed',
+              description: 'Only one file can be uploaded at a time',
+              duration: 0
+            })
+          }
+          const formData = new FormData()
+          fileList.forEach(file => {
+            formData.append('files[]', file)
+          })
+          this.loading = 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: 'Upload Successful',
+              description: 'This Volume has been uploaded. Please check its status in the Volumes menu'
+            })
+            this.closeAction()
+          }).catch(e => {
+            this.$notification.error({
+              message: 'Upload Failed',
+              description: `Failed to upload ISO -  ${e}`,
+              duration: 0
+            })
+            this.closeAction()
+          }).finally(() => {
+            this.loading = false
+            this.closeAction()
+          })
+        })
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .form-layout {
+    width: 80vw;
+
+    @media (min-width: 700px) {
+      width: 550px;
+    }
+  }
+
+  .action-button {
+    text-align: right;
+
+    button {
+      margin-right: 5px;
+    }
+  }
 </style>