Display meaningful upload error message

apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.html

@@ -1,10 +1,6 @@
 <section (mouseout)="close()">
-    <mat-icon class="upload-icon" svgIcon="red:upload"></mat-icon>
+    <mat-icon svgIcon="red:upload"></mat-icon>
     <div class="heading-xl">
         {{ 'dossier-overview.upload-files' | translate }}
     </div>
-
-    <button (click)="close()" class="close-icon" mat-icon-button>
-        <mat-icon svgIcon="red:close"></mat-icon>
-    </button>
 </section>

apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss

@@ -1,3 +1,5 @@
+@import '../../../../assets/styles/red-variables.scss';
+
 section {
     position: fixed;
     top: 0;
@@ -15,16 +17,12 @@ section {
     display: flex;
     flex-direction: column;
 
-    .upload-icon {
+    mat-icon {
-        width: 34px;
+        height: 60px;
-        height: 34px;
+        width: 60px;
-        margin-bottom: 10px;
+    }
+
+    .heading-xl {
+        margin-top: 24px;
     }
 }
-
-.close-icon {
-    position: absolute;
-    z-index: 1100;
-    top: 20px;
-    right: 40px;
-}

apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts

@@ -181,13 +181,18 @@ export class FileUploadService {
                     await this._appStateService.reloadActiveDossierFiles();
                 }
             },
-            () => {
+            err => {
                 uploadFile.completed = true;
                 uploadFile.error = {
-                    message: this._translateService.instant('upload-status.error.generic')
+                    // Extract error message
+                    message:
+                        this._translateService.instant('upload-status.error.generic') +
+                        (err?.error?.message?.includes('message')
+                            ? ` ${err.error.message.match('"message":"(.*?)\\"')[1]}`
+                            : '')
                 };
                 this._removeUpload(uploadFile);
-                if (uploadFile.retryCount < 5) {
+                if (uploadFile.retryCount < 5 && err.status !== 400) {
                     uploadFile.retryCount += 1;
                     this.scheduleUpload(uploadFile);
                 }

apps/red-ui/src/assets/i18n/de.json

@@ -11,7 +11,7 @@
   "upload-status": {
     "error": {
       "file-size": "Datei zu groß. Das Limit ist {{size}} MB.",
-      "generic": "Datei konnte nicht hochgeladen werden ..."
+      "generic": "Datei konnte nicht hochgeladen werden."
     },
     "dialog": {
       "title": "Datei-Uploads ({{len}})",

apps/red-ui/src/assets/i18n/en.json

@@ -10,8 +10,8 @@
   "dev-mode": "[ DEV MODE ]",
   "upload-status": {
     "error": {
-      "file-size": "File to large. Limit is {{size}}MB.",
+      "file-size": "File too large. Limit is {{size}}MB.",
-      "generic": "Failed to upload file... "
+      "generic": "Failed to upload file. "
     },
     "dialog": {
       "title": "File Uploads ({{len}})",
@@ -257,7 +257,7 @@
     "approve": "Approve",
     "approve-disabled": "File can only be approved once it has been analysed with the latest dictionaries and all suggestions have been processed",
     "under-review": "Under Review",
-    "upload-files": "Drag & Drop files anywhere",
+    "upload-files": "Drag & drop files anywhere...",
     "upload-files-btn": "Upload Files",
     "new-rule": {
       "label": "Outdated",

apps/red-ui/src/assets/styles/red-input.scss

@@ -99,7 +99,6 @@ form {
         border: 1px solid $grey-5;
         font-family: Inter, sans-serif;
         font-size: 13px;
-        line-height: 18px;
         background-color: #ffffff;
         border-radius: 8px;
         outline: none;
@@ -133,6 +132,10 @@ form {
         }
     }
 
+    textarea {
+        line-height: 18px;
+    }
+
     .hex-color-input {
         width: 150px;
         max-width: 150px;