added validation of image extensions

Author: konradoboza

src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js

@@ -16,6 +16,7 @@
             const isRequired = input.required || this.fieldContainer.classList.contains('ibexa-field-edit--required');
             const dataMaxSize = +input.dataset.maxFileSize;
             const maxFileSize = parseInt(dataMaxSize, 10);
+            const allowedFileTypes = input.dataset.allowedFileTypes;
             const isEmpty = input.files && !input.files.length && dataContainer && !dataContainer.hasAttribute('hidden');
             let result = { isError: false };
 
@@ -26,8 +27,14 @@
                 };
             }
 
-            if (!isEmpty && maxFileSize > 0 && input.files[0] && input.files[0].size > maxFileSize) {
-                result = this.validateFileSize(event);
+            const file = input.files[0];
+
+            if (!isEmpty && maxFileSize > 0 && file && file.size > maxFileSize) {
+                result = this.validateFileSize();
+            }
+
+            if (!isEmpty && allowedFileTypes.length > 0 && file && !allowedFileTypes.includes(file.type)) {
+                result = this.showFileTypeError();
             }
 
             return result;
@@ -52,6 +59,16 @@
 
             return result;
         }
+
+        showFileTypeError() {
+            const label = this.fieldContainer.querySelector(SELECTOR_FIELD_LABEL).innerHTML;
+            const result = {
+                isError: true,
+                errorMessage: ibexa.errors.invalidFileType.replace('{fieldName}', label),
+            };
+
+            return result;
+        }
     }
 
     ibexa.addConfig('BaseFileFieldValidator', BaseFileFieldValidator);

src/bundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js

@@ -87,6 +87,10 @@
                 return this.showFileSizeError();
             }
 
+            if (this.allowedFileTypes.length > 0 && !this.allowedFileTypes.includes(file.type)) {
+                return this.showFileTypeError();
+            }
+
             const changeEvent = new Event('change');
 
             this.inputField.files = event.dataTransfer.files;
@@ -102,6 +106,10 @@
             this.inputField.dispatchEvent(new CustomEvent('ibexa-invalid-file-size'));
         }
 
+        showFileTypeError() {
+            this.inputField.dispatchEvent(new CustomEvent('ibexa-invalid-file-type'));
+        }
+
         /**
          * Checks whether a given file can be dropped onto a field
          *

src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js

@@ -41,6 +41,13 @@
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
                 },
+                {
+                    isValueValidator: false,
+                    selector: `input[type="file"]`,
+                    eventName: 'ibexa-invalid-file-type',
+                    callback: 'showFileTypeError',
+                    errorNodeSelectors: ['.ibexa-form-error'],
+                },
             ],
         });
         const previewField = new EzBinaryFilePreviewField({

src/bundle/Resources/public/js/scripts/fieldType/ezimage.js

@@ -123,6 +123,13 @@
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
                 },
+                {
+                    isValueValidator: false,
+                    selector: `${SELECTOR_INPUT_FILE}`,
+                    eventName: 'ibexa-invalid-file-type',
+                    callback: 'showFileTypeError',
+                    errorNodeSelectors: ['.ibexa-form-error'],
+                },
                 {
                     isValueValidator: false,
                     selector: SELECTOR_INPUT_ALT,

src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js

@@ -187,7 +187,7 @@
          */
         handleInputChange(event) {
             const [file] = event.currentTarget.files;
-            const { languageCode } = event.currentTarget.dataset;
+            const { languageCode, allowedFileTypes } = event.currentTarget.dataset;
             const isFileSizeLimited = this.maxFileSize > 0;
             const maxFileSizeExceeded = isFileSizeLimited && file.size > this.maxFileSize;
 
@@ -196,6 +196,11 @@
                 return;
             }
 
+            if (!allowedFileTypes.includes(file.type)) {
+                this.resetInputField();
+                return;
+            }
+
             this.fieldContainer.querySelector('.ibexa-field-edit__option--remove-media').checked = false;
 
             this.createAsset(file, languageCode);
@@ -244,6 +249,13 @@
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-form-error'],
                 },
+                {
+                    isValueValidator: false,
+                    selector: `${SELECTOR_INPUT_FILE}`,
+                    eventName: 'ibexa-invalid-file-type',
+                    callback: 'showFileTypeError',
+                    errorNodeSelectors: ['.ibexa-form-error'],
+                },
             ],
         });
 

src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js

@@ -139,6 +139,13 @@
                     callback: 'showFileSizeError',
                     errorNodeSelectors: ['.ibexa-field-edit--ezmedia .ibexa-form-error'],
                 },
+                {
+                    isValueValidator: false,
+                    selector: SELECTOR_INPUT_FILE,
+                    eventName: 'ibexa-invalid-file-type',
+                    callback: 'showFileTypeError',
+                    errorNodeSelectors: ['.ibexa-field-edit--ezmedia .ibexa-form-error'],
+                },
                 {
                     selector: '.ibexa-field-edit-preview__dimensions .form-control',
                     eventName: 'blur',

src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss

@@ -44,7 +44,7 @@
                     color: $ibexa-color-dark-300;
                 }
 
-                &--mime-types,
+                &--image-extensions,
                 &--filesize {
                     color: $ibexa-color-dark-300;
                     font-size: $ibexa-text-font-size-small;

src/bundle/Resources/translations/ibexa_content_forms_content.en.xliff

@@ -161,16 +161,16 @@
         <target state="new">or</target>
         <note>key: fieldtype.binary_base.drag_drop.or</note>
       </trans-unit>
+      <trans-unit id="0f71380bdf7b1b566dfd532ec3611aa13b2f0c38" resname="fieldtype.binary_base.image_extensions">
+        <source>Allowed extensions: %extensions%</source>
+        <target state="new">Allowed extensions: %extensions%</target>
+        <note>key: fieldtype.binary_base.image_extensions</note>
+      </trans-unit>
       <trans-unit id="858c986173f1ef87d7acda017535b86f01bca87d" resname="fieldtype.binary_base.max_file_size">
         <source>Max file size: %size%</source>
         <target state="new">Max file size: %size%</target>
         <note>key: fieldtype.binary_base.max_file_size</note>
       </trans-unit>
-      <trans-unit id="b19a26b0ded06a8d2bfc9490e2645ba682c8ca30" resname="fieldtype.binary_base.mime_types">
-        <source>Allowed mime types: %mime_types%</source>
-        <target state="new">Allowed mime types: %mime_types%</target>
-        <note>key: fieldtype.binary_base.mime_types</note>
-      </trans-unit>
       <trans-unit id="763e9b64f4f0024e90753727ccc212a3596bfccd" resname="fieldtype.binary_base.upload_file">
         <source>Upload file</source>
         <target state="new">Upload file</target>

src/bundle/Resources/translations/validators.en.xliff

@@ -96,6 +96,11 @@
         <target state="new">{fieldName}: Cannot upload. File exceeds file size limit.</target>
         <note>key: js.error.invalid_file_size</note>
       </trans-unit>
+      <trans-unit id="e34fdb2fe0c2a86056b2e9084b9226c921044df6" resname="js.error.invalid_file_type">
+        <source>{fieldName}: Cannot upload. File has wrong type.</source>
+        <target state="new">{fieldName}: Cannot upload. File has wrong type.</target>
+        <note>key: js.error.invalid_file_type</note>
+      </trans-unit>
       <trans-unit id="21c38818d1cb73ff54f0dc0b184d6de25058f24d" resname="js.error.invalid_url">
         <source>A valid URL is required</source>
         <target state="new">A valid URL is required</target>

src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig

@@ -53,9 +53,15 @@
         <div class="ibexa-data-source__message--filesize">{{ 'fieldtype.binary_base.max_file_size'|trans({'%size%': max_file_size|default(0)|ibexa_file_size(2)})|desc('Max file size: %size%') }}</div>
     {% endif %}
 
-    {% if mime_types is defined %}
-        <div class="ibexa-data-source__message--mime-types">
-            {{ 'fieldtype.binary_base.mime_types'|trans({'%mime_types%': mime_types|join(', ')})|desc('Allowed mime types: %mime_types%') }}
+    {% if image_extensions is defined %}
+        {% set extensions = [] %}
+
+        {% for mime_type in mime_types %}
+            {% set extensions = extensions|merge(image_extensions[mime_type]) %}
+        {% endfor %}
+
+        <div class="ibexa-data-source__message--image-extensions">
+            {{ 'fieldtype.binary_base.image_extensions'|trans({'%extensions%': extensions|join(', ')})|desc('Allowed extensions: %extensions%') }}
         </div>
     {% endif %}