Enable to show error message on label uploading, resolves #455, resolves #591

frontend/components/containers/labels/LabelActionMenu.vue

@@ -15,7 +15,7 @@
     </base-dialog>
     <base-dialog :dialog="importDialog">
       <label-import-form
-        :import-label="importLabels"
+        :upload-label="uploadLabel"
         @close="importDialog=false"
       />
     </base-dialog>
@@ -58,7 +58,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('labels', ['createLabel', 'importLabels', 'exportLabels']),
+    ...mapActions('labels', ['createLabel', 'uploadLabel', 'exportLabels']),
     ...mapActions('projects', ['setCurrentProject']),
 
     handleDownload() {

frontend/components/organisms/labels/LabelImportForm.vue

@@ -21,6 +21,10 @@
           The file could not be uploaded. Maybe invalid format.
           Please check available formats carefully.
         </v-alert>
+        <h2>Example format</h2>
+        <code class="mb-10 pa-5 highlight">
+          <span>{{ exampleFormat }}</span>
+        </code>
         <h2>Select a file</h2>
         <v-file-input
           v-model="file"
@@ -42,7 +46,7 @@ export default {
     BaseCard
   },
   props: {
-    importLabel: {
+    uploadLabel: {
       type: Function,
       default: () => {},
       required: true
@@ -57,6 +61,27 @@ export default {
     }
   },
 
+  computed: {
+    exampleFormat() {
+      const data = [
+        {
+          text: 'Dog',
+          suffix_key: 'a',
+          background_color: '#FF0000',
+          text_color: '#ffffff'
+        },
+        {
+          text: 'Cat',
+          suffix_key: 'c',
+          background_color: '#FF0000',
+          text_color: '#ffffff'
+        }
+      ]
+      console.log(JSON.stringify(data, null, 4))
+      return JSON.stringify(data, null, 4)
+    }
+  },
+
   methods: {
     cancel() {
       this.$emit('close')
@@ -69,7 +94,7 @@ export default {
     },
     create() {
       if (this.validate()) {
-        this.importLabel({
+        this.uploadLabel({
           projectId: this.$route.params.id,
           file: this.file
         })
@@ -85,3 +110,13 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  .highlight {
+    font-size: 100%;
+    width: 100%;
+  }
+  .highlight:before {
+    content: ''
+  }
+</style>

frontend/services/label.service.js

@@ -20,6 +20,10 @@ class LabelService {
   updateLabel(projectId, labelId, payload) {
     return this.request.patch(`/projects/${projectId}/labels/${labelId}`, payload)
   }
+
+  uploadFile(projectId, payload, config = {}) {
+    return this.request.post(`/projects/${projectId}/label-upload`, payload, config)
+  }
 }
 
 export default new LabelService()

frontend/store/labels.js

@@ -115,5 +115,22 @@ export const actions = {
       .finally(() => {
         commit('setLoading', false)
       })
+  },
+  uploadLabel({ commit, dispatch }, data) {
+    commit('setLoading', true)
+    const formData = new FormData()
+    formData.append('file', data.file)
+    const config = {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }
+    return LabelService.uploadFile(data.projectId, formData, config)
+      .then((response) => {
+        dispatch('getLabelList', data)
+      })
+      .finally(() => {
+        commit('setLoading', false)
+      })
   }
 }