RED-3912: Show error message in case you try to upload invalid files

apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts

@@ -58,7 +58,9 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
     async save(): Promise<void> {
         this._loadingService.start();
         const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport);
-        const result: any = await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error }));
+        const result: any = await firstValueFrom(import$).catch(error =>
+            this._toaster.error(_('import-redactions-dialog.http.error'), { error }),
+        );
         this._loadingService.stop();
 
         if (result.status === HttpStatusCode.Ok) {

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

@@ -5,7 +5,8 @@ export interface FileUploadModel {
     error: any;
     retryCount: number;
     size: number;
-    sizeError: any;
+    sizeError: boolean;
+    typeError: boolean;
     dossierId?: string;
     dossierName?: string;
 }

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

@@ -5,7 +5,7 @@ import { interval, Subject, Subscription } from 'rxjs';
 import { ConfigService } from '@services/config.service';
 import { TranslateService } from '@ngx-translate/core';
 import { IFileUploadResult } from '@red/domain';
-import { isCsv } from '@utils/file-drop-utils';
+import { isAcceptedFileType, isCsv } from '@utils/file-drop-utils';
 import { ErrorMessageService, GenericService, HeadersConfiguration, RequiredParam, Validate } from '@iqser/common-ui';
 import { FilesMapService } from '@services/entity-services/files-map.service';
 import { switchMap, tap, throttleTime } from 'rxjs/operators';
@@ -58,7 +58,7 @@ export class FileUploadService extends GenericService<IFileUploadResult> impleme
     }
 
     scheduleUpload(item: FileUploadModel) {
-        if (!item.sizeError) {
+        if (!item.sizeError && !item.typeError) {
             item.progress = 0;
             item.completed = false;
             item.error = null;
@@ -90,7 +90,13 @@ export class FileUploadService extends GenericService<IFileUploadResult> impleme
                     continue;
                 }
             }
-            if (file.size > maxSizeBytes) {
+            if (!isAcceptedFileType(file)) {
+                file.completed = true;
+                file.error = {
+                    message: this._translateService.instant('upload-status.error.file-type'),
+                };
+                file.typeError = true;
+            } else if (file.size > maxSizeBytes) {
                 file.completed = true;
                 file.error = {
                     message: this._translateService.instant('upload-status.error.file-size', {

apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html

@@ -41,7 +41,7 @@
                 <div *ngIf="model.error || !model.completed" [class.error]="model.error" class="actions">
                     <iqser-circle-button
                         (action)="uploadItem(model)"
-                        *ngIf="model.error && !model.sizeError"
+                        *ngIf="model.error && !model.sizeError && !model.typeError"
                         [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
                         [type]="circleButtonTypes.dark"
                         icon="iqser:refresh"

apps/red-ui/src/app/utils/file-drop-utils.ts

@@ -24,8 +24,19 @@ export function isDocument(file: FileUploadModel): boolean {
 
 export type Files = FileList | File[];
 
+export function isAcceptedFileType(file: FileUploadModel): boolean {
+    return (
+        file.file.type?.toLowerCase() === 'application/pdf' ||
+        file.file.name.toLowerCase().endsWith('.pdf') ||
+        file.file.type?.toLowerCase() === 'application/zip' ||
+        file.file.name.toLowerCase().endsWith('.zip') ||
+        isDocument(file) ||
+        isCsv(file)
+    );
+}
+
 export function convertFiles(files: FileList | File[], dossier: Dossier): FileUploadModel[] {
-    let uploadFiles: FileUploadModel[] = [];
+    const uploadFiles: FileUploadModel[] = [];
     for (let i = 0; i < files.length; i++) {
         const file = files[i];
         uploadFiles.push({
@@ -36,23 +47,14 @@ export function convertFiles(files: FileList | File[], dossier: Dossier): FileUp
             dossierId: dossier.id,
             dossierName: dossier.dossierName,
             sizeError: false,
+            typeError: false,
             retryCount: 0,
             size: file.size,
         });
     }
 
-    uploadFiles = uploadFiles.filter(
-        file =>
-            file.file.type?.toLowerCase() === 'application/pdf' ||
-            file.file.name.toLowerCase().endsWith('.pdf') ||
-            file.file.type?.toLowerCase() === 'application/zip' ||
-            file.file.name.toLowerCase().endsWith('.zip') ||
-            isDocument(file) ||
-            isCsv(file),
-    );
-
-    const pdfFiles = uploadFiles.filter(a => !isCsv(a)).sort((a, b) => a.size - b.size);
-    const csvFiles = uploadFiles.filter(a => isCsv(a));
+    const pdfFiles = uploadFiles.filter(file => !isCsv(file)).sort((a, b) => a.size - b.size);
+    const csvFiles = uploadFiles.filter(file => isCsv(file));
 
     const sortedFiles = [...pdfFiles, ...csvFiles];
 
@@ -64,7 +66,7 @@ export function handleFileDrop(event: DragEvent, dossier: Dossier, uploadFiles:
     event.preventDefault();
     event.stopPropagation();
     const { dataTransfer } = event;
-    let files: any = [];
+    let files: FileList | File[] = [];
     if (dataTransfer.items) {
         for (let i = 0; i < dataTransfer.items.length; i++) {
             // If dropped items aren't files, reject them

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

@@ -1460,6 +1460,7 @@
     },
     "details": "",
     "http": {
+      "error": "",
       "success": ""
     },
     "only-for-specific-pages": "",
@@ -1916,6 +1917,7 @@
     },
     "error": {
       "file-size": "Datei zu groß. Die maximal zulässige Größe beträgt {size} MB.",
+      "file-type": "",
       "generic": "Fehler beim Hochladen des Dokuments. {error}"
     }
   },

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

@@ -1460,6 +1460,7 @@
     },
     "details": "To apply redactions from another document, you first need to upload it.",
     "http": {
+      "error": "Failed to import redactions! {error}",
       "success": "Redactions has been imported!"
     },
     "only-for-specific-pages": "Import only for page(s)",
@@ -1916,6 +1917,7 @@
     },
     "error": {
       "file-size": "File too large. Limit is {size}MB.",
+      "file-type": "This file type is not accepted.",
       "generic": "Failed to upload file. {error}"
     }
   },

libs/common-ui

@@ -1 +1 @@
-Subproject commit d8c2a342baa6acb330132c44000562bdd823f620
+Subproject commit fd9d622413547de842439e8d91ee4316f2facff1