From 3c1042389db89a5b8f25a61d84e30301af706dd5 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          | 8 ++++++--
 packages/components/file/src/js/file.provider.js   | 1 +
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/file/src/js/file.controller.js b/packages/components/file/src/js/file.controller.js
index 2d5a4403..e92d84b7 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 8a1d727a..5c5263dd 100644
--- a/packages/components/file/src/js/file.html
+++ b/packages/components/file/src/js/file.html
@@ -142,11 +142,15 @@
                     <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 && file.errors.notSingle"
+                    ng-if="file.errors.type"
+                    ng-bind="::$ctrl.translations.typeError">
+                </span>
+                <span class="oui-file-attachments__error"
+                    ng-if="file.errors.notSingle"
                     ng-bind="::$ctrl.translations.notSingleError">
                 </span>
             </span>
diff --git a/packages/components/file/src/js/file.provider.js b/packages/components/file/src/js/file.provider.js
index 5a332534..ce943705 100644
--- a/packages/components/file/src/js/file.provider.js
+++ b/packages/components/file/src/js/file.provider.js
@@ -14,6 +14,7 @@ export default class {
       maxsizeError: 'This file exceeds the size limit',
       notSingleError: 'You can only add one file',
       removeFile: 'Remove file from selector',
+      typeError: 'This file extension is not supported',
     };
 
     this.units = [