From b90ea3d0bf95f42e788aac68aa6aeae827651d82 Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Tue, 16 Apr 2019 20:16:35 +0800
Subject: [PATCH] Complate theme upload.

---
 src/api/theme.js                          | 15 +++++++++
 src/views/attachment/AttachmentDetail.vue | 10 ------
 src/views/interface/ThemeList.vue         | 37 +++++++++++++++++++++--
 3 files changed, 50 insertions(+), 12 deletions(-)
 delete mode 100644 src/views/attachment/AttachmentDetail.vue

diff --git a/src/api/theme.js b/src/api/theme.js
index ca6d1480..daf49b2b 100644
--- a/src/api/theme.js
+++ b/src/api/theme.js
@@ -1,3 +1,4 @@
+import axios from 'axios'
 import service from '@/utils/service'
 
 const baseUrl = '/admin/api/themes'
@@ -75,4 +76,18 @@ themeApi.getProperty = themeId => {
   })
 }
 
+themeApi.CancelToken = axios.CancelToken
+themeApi.isCancel = axios.isCancel
+
+themeApi.upload = (formData, uploadProgress, cancelToken) => {
+  return service({
+    url: `${baseUrl}/upload`,
+    timeout: 8640000, // 24 hours
+    data: formData, // form data
+    onUploadProgress: uploadProgress,
+    cancelToken: cancelToken,
+    method: 'post'
+  })
+}
+
 export default themeApi
diff --git a/src/views/attachment/AttachmentDetail.vue b/src/views/attachment/AttachmentDetail.vue
deleted file mode 100644
index 83bcf53a..00000000
--- a/src/views/attachment/AttachmentDetail.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div class="page-header-index-wide"> Attachment Detail </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style scoped>
-</style>
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 300bdb10..10fefccf 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -146,9 +146,9 @@
       <a-upload-dragger
         name="file"
         :multiple="true"
-        action="http://localhost:8090/admin/api/attachments/uploads"
+        accept="application/zip"
+        :customRequest="handleUpload"
         @change="handleChange"
-        accept=".zip"
       >
         <p class="ant-upload-drag-icon">
           <a-icon type="inbox"/>
@@ -258,6 +258,39 @@ export default {
     },
     handleActivateClick(theme) {
       this.activeTheme(theme.id)
+    },
+    handleUpload(option) {
+      this.$log.debug('Uploading option', option)
+      const CancelToken = themeApi.CancelToken
+      const source = CancelToken.source()
+
+      const data = new FormData()
+      data.append('file', option.file)
+      themeApi
+        .upload(
+          data,
+          progressEvent => {
+            if (progressEvent.total > 0) {
+              progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
+            }
+            this.$log.debug('Uploading percent: ', progressEvent.percent)
+            option.onProgress(progressEvent)
+          },
+          source.token
+        )
+        .then(response => {
+          option.onSuccess(response, option.file)
+          this.loadThemes()
+        })
+        .catch(error => {
+          option.onError(error, error.response)
+        })
+
+      return {
+        abort: () => {
+          source.cancel('Upload operation canceled by the user.')
+        }
+      }
     }
   }
 }