@uppy/transloadit: fix socket error message (#4352)

* Fix error message being lost when emitted via socket

* Emit global error, set StatusBar to error state when there's an error, show error at the Dashboard top

* Update packages/@uppy/transloadit/src/index.js

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

* Refactor onError

* Prevent error ? button from shrinking like a weirdo

---------

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

packages/@uppy/dashboard/src/components/FileItem/index.scss

@@ -167,7 +167,9 @@
 .uppy-Dashboard-Item-errorDetails {
   position: relative;
   top: 0;
-  display: inline-block;
+  // display: inline-block;
+  // vertical-align: middle;
+  flex-shrink: 0;
   width: 13px;
   height: 13px;
   color: $white;
@@ -175,7 +177,6 @@
   font-size: 10px;
   line-height: 12px;
   text-align: center;
-  vertical-align: middle;
   background-color: $gray-500;
   border-radius: 50%;
   border: none;

packages/@uppy/dashboard/src/components/PickerPanelTopBar.jsx

@@ -68,6 +68,8 @@ function UploadStatus ({
       return i18n('xFilesSelected', { smart_count: newFiles.length })
     case 'complete':
       return i18n('uploadComplete')
+    case 'error':
+      return i18n('error')
     default:
   }
 }

packages/@uppy/dashboard/src/locale.js

@@ -25,6 +25,8 @@ export default {
     editFile: 'Edit file',
     // Shown in the panel header for the metadata editor. Rendered as “Editing image.png”.
     editing: 'Editing %{file}',
+    // Shown on the main upload screen when an upload error occurs
+    error: 'Error',
     // Used as the screen reader label for the button that saves metadata edits and returns to the
     // file list view.
     finishEditingFile: 'Finish editing file',

packages/@uppy/status-bar/src/StatusBar.jsx

@@ -30,7 +30,7 @@ function getTotalETA (files) {
 }
 
 function getUploadingState (error, isAllComplete, recoveredState, files) {
-  if (error && !isAllComplete) {
+  if (error) {
     return statusBarStates.STATE_ERROR
   }
 

packages/@uppy/transloadit/src/Assembly.js

@@ -108,17 +108,17 @@ class TransloaditAssembly extends Emitter {
       this.status.results[stepName].push(result)
     })
 
-    socket.on('assembly_error', (err) => {
-      this.#onError(err)
+    socket.on('assembly_error', (status) => {
       // Refetch for updated status code
       this.#fetchStatus({ diff: false })
+      this.#onError(status)
     })
 
     this.socket = socket
   }
 
-  #onError (err) {
-    this.emit('error', Object.assign(new Error(err.message), err))
+  #onError (status) {
+    this.emit('error', Object.assign(new Error(status.msg), status))
     this.close()
   }
 

packages/@uppy/transloadit/src/index.js

@@ -293,10 +293,12 @@ export default class Transloadit extends BasePlugin {
       const files = this.getAssemblyFiles(id)
       files.forEach((file) => {
       // TODO Maybe make a postprocess-error event here?
+
         this.uppy.emit('upload-error', file, error)
 
         this.uppy.emit('postprocess-complete', file)
       })
+      this.uppy.emit('error', error)
     })
 
     this.assemblyWatchers[uploadID] = watcher