From c494d4be4e2bdfe26c2b9b572dcbe79210ddea16 Mon Sep 17 00:00:00 2001
From: Jacques Larique <jacques.larique.ext@ovhcloud.com>
Date: Tue, 3 Sep 2024 16:14:58 +0200
Subject: [PATCH] fix(file): display error message for multiple files and code
 robustness

ref: MANAGER-15044

Signed-off-by: Jacques Larique <jacques.larique.ext@ovhcloud.com>
---
 packages/components/file/src/js/file.controller.js | 6 +++---
 packages/components/file/src/js/file.html          | 6 +++++-
 packages/components/file/src/js/file.provider.js   | 1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/components/file/src/js/file.controller.js b/packages/components/file/src/js/file.controller.js
index 5e3125531..c52ebb85f 100644
--- a/packages/components/file/src/js/file.controller.js
+++ b/packages/components/file/src/js/file.controller.js
@@ -39,11 +39,11 @@ export default class {
         const hasTypeError = !acceptedTypes.some((acceptedType) => {
           const [type, extension] = acceptedType.split('/');
           if (extension) {
-            const isTypeValid = type === '*' || type.toLowerCase() === fileType.toLowerCase();
-            const isExtensionValid = extension === '*' || extension.toLowerCase() === fileExtension.toLowerCase();
+            const isTypeValid = type === '*' || type.toLowerCase() === fileType?.toLowerCase();
+            const isExtensionValid = extension === '*' || extension.toLowerCase() === fileExtension?.toLowerCase();
             return isTypeValid && isExtensionValid;
           }
-          return type === '*' || type.replace('.', '').toLowerCase() === fileExtension.toLowerCase();
+          return type === '*' || type.replace('.', '').toLowerCase() === fileExtension?.toLowerCase();
         });
         if (hasTypeError) {
           file.errors.type = true;
diff --git a/packages/components/file/src/js/file.html b/packages/components/file/src/js/file.html
index 47795e502..e6a9971fa 100644
--- a/packages/components/file/src/js/file.html
+++ b/packages/components/file/src/js/file.html
@@ -141,9 +141,13 @@
                     <span class="oui-file-ellipsis__size" ng-bind="file.infos.size"></span>
                 </span>
                 <span class="oui-file-attachments__error"
-                    ng-if="file.errors && file.errors.maxsize"
+                    ng-if="file.errors.maxsizeError"
                     ng-bind="::$ctrl.translations.maxsizeError">
                 </span>
+                <span class="oui-file-attachments__error"
+                    ng-if="file.errors.type"
+                    ng-bind="::$ctrl.translations.typeError">
+                </span>
             </span>
             <button class="oui-file-attachments__remove oui-icon oui-icon-close"
                 type="button"
diff --git a/packages/components/file/src/js/file.provider.js b/packages/components/file/src/js/file.provider.js
index a17ef74d2..4df6095ea 100644
--- a/packages/components/file/src/js/file.provider.js
+++ b/packages/components/file/src/js/file.provider.js
@@ -12,6 +12,7 @@ export default class {
       filesSelector: 'Select file(s)...',
       maxsizeError: 'This file exceeds the size limit',
       removeFile: 'Remove file from selector',
+      typeError: 'This file extension is not supported',
     };
 
     this.units = [