Multi-upload widget: Improve error handling

apps/files/static/files/upload.js

@@ -17,20 +17,24 @@ class MultipleFilesWidget {
             paramName: 'file',
             done: function (e, data) {
                 // process server response
-                if (!data.result.is_valid) {
-                    throw new Error('Server sent us invalid data!')
+                if (data.result.is_valid) {
+                    self.fileFinished.bind(self)(data.result)
+                } else {
+                    self.fileFailed.bind(self)(data)
                 }
-
-                self.fileFinished.bind(self)(data.result)
             },
             add: function (e, data) {
                 $.each(data.files, (index, file) => {
                     self.addFile.bind(self)(null, file.name, self.setFileInProgress.bind(self))
-                });
+                })
 
                 data.process().done(function () {
                     data.submit()
                 })
+            },
+            progress: function(e, data) {
+                console.log('progress event')
+                console.log(e, data)
             }
         })
 
@@ -45,8 +49,6 @@ class MultipleFilesWidget {
     }
 
     addFile(id, name, stateFunc) {
-        console.log('addfile here!')
-
         let li = document.createElement('li')
         li.className = 'filewidget--file'
         li.innerHTML =
@@ -93,13 +95,25 @@ class MultipleFilesWidget {
         this.updateFormField()
     }
 
+    fileFailed(serverResponse) {
+        let errors = Object.values(serverResponse.result.errors).join(' ')
+
+        console.error('File upload failed: ' + errors)
+        console.error(serverResponse)
+
+        // Using data, find the file
+        let file = this.fileList.filter(file => file.name === serverResponse.files[0].name)[0]
+
+        // Set the file state now it's finished
+        this.setFileFailed(file, errors)
+        this.viewFileList()
+    }
+
     //
     // Update the field that keeps track of file IDs
     //
 
     updateFormField() {
-        console.log("updateFormField", this)
-
         let oldVal = this.element.field.value
         this.element.field.value = this.fileList.filter(f => f.id != null)
                                                 .map(f => f.id)
@@ -121,6 +135,13 @@ class MultipleFilesWidget {
         file.element.actions.innerHTML = state.actions || ''
     }
 
+    setFileFailed(file, errors) {
+        this.setFileState(file, {
+            iconClassList: 'fa fa-exclamation-triangle',
+            fileName: `FAILED: ${errors} ('${file.name}')`
+        })
+    }
+
     setFileInProgress(file) {
         this.setFileState(file, {
             iconClassList: 'fa fa-spinner fa-spin',
@@ -143,8 +164,6 @@ class MultipleFilesWidget {
     }
 
     setFileDone(file) {
-        console.log("setFileDone", file)
-
         this.setFileState(file, {
             iconClassList: 'fa fa-file-o',
             fileName: `${file.name}`,
@@ -175,8 +194,6 @@ class MultipleFilesWidget {
     //
 
     viewFileList() {
-        console.log("viewFileList", this)
-
         for (let file of this.fileList) {
             // Check if it's appended to the list
             if (!this.element.list.contains(file.root)) {