dashboard: show fatal upload errors in the StatusBar

src/core/Core.js

@@ -280,6 +280,13 @@ class Uppy {
     //   this.setState({bla: 'bla'})
     // }, 20)
 
+    this.on('core:error', (error) => {
+      this.setState({ error })
+    })
+    this.on('core:upload', () => {
+      this.setState({ error: null })
+    })
+
     this.on('core:file-add', (data) => {
       this.addFile(data)
     })

src/plugins/Dashboard/Dashboard.js

@@ -142,6 +142,7 @@ module.exports = function Dashboard (props) {
 
         <div class="UppyDashboard-progressindicators">
           ${StatusBar({
+            error: props.state.error,
             totalProgress: props.totalProgress,
             totalFileCount: props.totalFileCount,
             totalSize: props.totalSize,

src/plugins/Dashboard/StatusBar.js

@@ -7,6 +7,7 @@ function progressDetails (props) {
 
 const throttledProgressDetails = throttle(progressDetails, 1000, {leading: true, trailing: true})
 
+const STATE_ERROR = 'error'
 const STATE_WAITING = 'waiting'
 const STATE_PREPROCESSING = 'preprocessing'
 const STATE_UPLOADING = 'uploading'
@@ -14,6 +15,10 @@ const STATE_POSTPROCESSING = 'postprocessing'
 const STATE_COMPLETE = 'complete'
 
 function getUploadingState (props, files) {
+  if (props.error) {
+    return STATE_ERROR
+  }
+
   // If ALL files have been completed, show the completed state.
   if (props.isAllComplete) {
     return STATE_COMPLETE
@@ -60,6 +65,8 @@ module.exports = (props) => {
     progressBarContent = ProgressBarComplete(props)
   } else if (uploadState === STATE_UPLOADING) {
     progressBarContent = ProgressBarUploading(props)
+  } else if (uploadState === STATE_ERROR) {
+    progressBarContent = ProgressBarError(props)
   }
 
   const width = typeof progressValue === 'number' ? progressValue : 100
@@ -133,6 +140,16 @@ const ProgressBarComplete = ({ totalProgress }) => {
   `
 }
 
+const ProgressBarError = ({ error }) => {
+  return html`
+    <div class="UppyDashboard-statusBarContent">
+      <span>
+        ${error.message}
+      </span>
+    </div>
+  `
+}
+
 const pauseResumeButtons = (props) => {
   const title = props.resumableUploads
                 ? props.isAllPaused

src/scss/_dashboard.scss

@@ -1123,6 +1123,10 @@
   background-color: $color-green;
 }
 
+.UppyDashboard-statusBar.is-error .UppyDashboard-statusBarProgress {
+  background-color: $color-red;
+}
+
 .UppyDashboard-statusBar.is-complete .UppyDashboard-statusBarContent {
   text-align: center;
   padding-left: 0;