From e56699fe1f744cbefb541109c622e9ef1de639d1 Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Fri, 12 Apr 2019 09:46:28 -0400
Subject: [PATCH] Correctly display dataset upload errors

When importing an invalid CSV file that fails data validation, the API
returns the errors wrapped in an array. The current frontend code does
not handle this case and does not display the errors which can be
confusing for users as for example seen in https://github.com/chakki-works/doccano/issues/150.

This change modifies the frontend code to handle error responses wrapped
in an array. The code was tested by uploading the following CSV file:

```
text,label
"","label1"
```

After applying the change, we now correctly render the upload error as
shown in the screenshot below:

[![Screenshot showing dataset upload error response](https://user-images.githubusercontent.com/1086421/56042132-504f3300-5d08-11e9-8ddf-04c8deb2f60b.png)](https://user-images.githubusercontent.com/1086421/56042132-504f3300-5d08-11e9-8ddf-04c8deb2f60b.png)
---
 app/server/static/js/upload.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/server/static/js/upload.js b/app/server/static/js/upload.js
index fdd4e42a..6db33965 100644
--- a/app/server/static/js/upload.js
+++ b/app/server/static/js/upload.js
@@ -33,14 +33,24 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
         })
         .catch((error) => {
           this.isLoading = false;
-          if ('detail' in error.response.data) {
-            this.messages.push(error.response.data.detail);
-          } else if ('text' in error.response.data) {
-            this.messages = error.response.data.text;
-          }
+          this.handleError(error);
         });
     },
 
+    handleError(error) {
+      const problems = Array.isArray(error.response.data)
+        ? error.response.data
+        : [error.response.data];
+
+      problems.forEach((problem) => {
+        if ('detail' in problem) {
+          this.messages.push(problem.detail);
+        } else if ('text' in problem) {
+          this.messages = problem.text;
+        }
+      });
+    },
+
     download() {
       const headers = {};
       if (this.format === 'csv') {
@@ -66,11 +76,7 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
         document.body.appendChild(link);
         link.click();
       }).catch((error) => {
-        if ('detail' in error.response.data) {
-          this.messages.push(error.response.data.detail);
-        } else if ('text' in error.response.data) {
-          this.messages = error.response.data.text;
-        }
+        this.handleError(error);
       });
     },
   },