fix(file): display error message for multiple files and code robustness

ref: MANAGER-15044

Signed-off-by: Jacques Larique <[email protected]>

Author: JacquesLarique

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;

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"

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 = [