Merge pull request #698 from Human-Connection/691_handle-large-file-sizes-bug

Fix upload large file sizes bug

webapp/components/Upload/index.vue

@@ -8,7 +8,7 @@
       :include-styling="false"
       :style="backgroundImage"
       @vdropzone-thumbnail="thumbnail"
-      @vdropzone-drop="vddrop"
+      @vdropzone-error="verror"
     />
   </div>
 </template>
@@ -27,10 +27,11 @@ export default {
     return {
       dropzoneOptions: {
         url: this.vddrop,
-        maxFilesize: 0.5,
+        maxFilesize: 5.0,
         previewTemplate: this.template(),
         dictDefaultMessage: '',
       },
+      error: false,
     }
   },
   computed: {
@@ -44,6 +45,14 @@ export default {
       }
     },
   },
+  watch: {
+    error() {
+      let that = this
+      setTimeout(function() {
+        that.error = false
+      }, 2000)
+    },
+  },
   methods: {
     template() {
       return `<div class="dz-preview dz-file-preview">
@@ -89,6 +98,12 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
+    verror(file, message) {
+      if (file.status === 'error') {
+        this.error = true
+        this.$toast.error(file.status, message)
+      }
+    },
   },
 }
 </script>

webapp/components/Upload/spec.js

@@ -26,6 +26,7 @@ describe('Upload', () => {
       success: jest.fn(),
       error: jest.fn(),
     },
+    $t: jest.fn(),
   }
 
   const propsData = {
@@ -34,7 +35,7 @@ describe('Upload', () => {
     },
   }
 
-  const file = {
+  const fileSuccess = {
     filename: 'avatar.jpg',
     previewElement: {
       classList: {
@@ -59,13 +60,38 @@ describe('Upload', () => {
     wrapper = shallowMount(Upload, { localVue, propsData, mocks })
   })
 
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('sends a the UpdateUser mutation when vddrop is called', () => {
     wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
     expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
   })
 
   it('thumbnail', () => {
-    wrapper.vm.thumbnail(file, dataUrl)
+    wrapper.vm.thumbnail(fileSuccess, dataUrl)
-    expect(file.previewElement.classList.add).toHaveBeenCalledTimes(1)
+    expect(fileSuccess.previewElement.classList.add).toHaveBeenCalledTimes(1)
+  })
+
+  describe('error handling', () => {
+    const message = 'File upload failed'
+    const fileError = { status: 'error' }
+
+    it('defaults to error false', () => {
+      expect(wrapper.vm.error).toEqual(false)
+    })
+
+    it('shows an error toaster when verror is called', () => {
+      wrapper.vm.verror(fileError, message)
+      expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, message)
+    })
+
+    it('changes error status from false to true to false', () => {
+      wrapper.vm.verror(fileError, message)
+      expect(wrapper.vm.error).toEqual(true)
+      jest.runAllTimers()
+      expect(wrapper.vm.error).toEqual(false)
+    })
   })
 })