Browse Source

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)
pull/157/head
Clemens Wolff 5 years ago
parent
commit
e56699fe1f
1 changed files with 16 additions and 10 deletions
  1. 26
      app/server/static/js/upload.js

26
app/server/static/js/upload.js

@ -33,14 +33,24 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
}) })
.catch((error) => { .catch((error) => {
this.isLoading = false; 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() { download() {
const headers = {}; const headers = {};
if (this.format === 'csv') { if (this.format === 'csv') {
@ -66,11 +76,7 @@ const vm = new Vue({ // eslint-disable-line no-unused-vars
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
}).catch((error) => { }).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);
}); });
}, },
}, },

Loading…
Cancel
Save