Display file size error in file upload

src/components/Imports/Files/Uploader.vue

@@ -64,6 +64,8 @@
 
 <script>
 import { corporaMixin } from '@/mixins.js'
+import { isAxiosError } from 'axios'
+
 export default {
   mixins: [
     corporaMixin
@@ -104,7 +106,8 @@ export default {
         this.files = []
         this.url = ''
       } catch (err) {
-        if (Array.isArray(err)) this.error = err.join(', ')
+        if (isAxiosError(err) && err.response?.status === 400 && err.response.data) this.error = err.response.data
+        else if (Array.isArray(err)) this.error = err.join(', ')
         else this.error = err
       } finally {
         this.uploading = false

src/store/files.js

@@ -140,6 +140,7 @@ export const actions = {
       }
     } catch (err) {
       commit('notifications/notify', { type: 'error', text: errorParser(err) }, { root: true })
+      throw err
     }
   },
 

tests/unit/store/files.spec.js

@@ -204,7 +204,7 @@ describe('files', () => {
       it('handles errors on creation', async () => {
         mock.onPost('/process/files/create/').reply(400, { detail: 'You messed up' })
 
-        await store.dispatch('files/upload', {
+        await assertRejects(async () => store.dispatch('files/upload', {
           corpus: 'corpusid',
           // Faking a File instance
           file: {
@@ -212,7 +212,7 @@ describe('files', () => {
             type: 'text/plain',
             size: 5
           }
-        })
+        }))
 
         assert.deepStrictEqual(store.history, [
           {
@@ -246,10 +246,10 @@ describe('files', () => {
         mock.onPut('https://s3/put/').reply(400, { detail: 'You messed up' })
         mock.onPatch('/process/file/fileid/').reply(200)
 
-        await store.dispatch('files/upload', {
+        await assertRejects(async () => store.dispatch('files/upload', {
           corpus: 'corpusid',
           file: newFile
-        })
+        }))
 
         assert.deepStrictEqual(store.state.files, {
           files: {
@@ -389,10 +389,10 @@ describe('files', () => {
           })
         }
 
-        await store.dispatch('files/upload', {
+        await assertRejects(async () => store.dispatch('files/upload', {
           corpus: 'corpusid',
           url: 'http://url'
-        })
+        }))
 
         delete global.fetch