ibexa · ciastektk · Dec 14, 2023 · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
@@ -3850,11 +3850,6 @@ parameters:
 			count: 1
 			path: src/lib/FieldType/Mapper/ISBNFormMapper.php
 
-		-
-			message: "#^Constructor of class Ibexa\\\\AdminUi\\\\FieldType\\\\Mapper\\\\ImageFormMapper has an unused parameter \\$fieldTypeService\\.$#"
-			count: 1
-			path: src/lib/FieldType/Mapper/ImageFormMapper.php
-
 		-
 			message: "#^Method Ibexa\\\\AdminUi\\\\FieldType\\\\Mapper\\\\ImageFormMapper\\:\\:configureOptions\\(\\) has no return type specified\\.$#"
 			count: 1
@@ -8430,11 +8425,6 @@ parameters:
 			count: 1
 			path: src/lib/REST/Input/Parser/Operation.php
 
-		-
-			message: "#^Cannot call method resolve\\(\\) on Ibexa\\\\Contracts\\\\AdminUi\\\\REST\\\\ApplicationConfigRestResolverInterface\\|null\\.$#"
-			count: 1
-			path: src/lib/REST/Output/ValueObjectVisitor/ApplicationConfigVisitor.php
-
 		-
 			message: "#^Method Ibexa\\\\AdminUi\\\\REST\\\\Output\\\\ValueObjectVisitor\\\\BulkOperationResponse\\:\\:visit\\(\\) has no return type specified\\.$#"
 			count: 1

diff --git a/src/bundle/Resources/config/services/fieldtype_form_mappers.yaml b/src/bundle/Resources/config/services/fieldtype_form_mappers.yaml
@@ -46,6 +46,8 @@ services:
             - { name: ibexa.admin_ui.field_type.form.mapper.definition, fieldType: ezfloat }
 
     Ibexa\AdminUi\FieldType\Mapper\ImageFormMapper:
+        arguments:
+            $allowedMimeTypes: '%ibexa.field_type.ezimage.mime_types%'
         tags:
             - { name: ibexa.admin_ui.field_type.form.mapper.definition, fieldType: ezimage }
 

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-file-field.js b/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;
             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);

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/base/base-preview-field.js b/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
          *

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezbinaryfile.js b/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({

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/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,
@@ -133,10 +140,14 @@
                 },
             ],
         });
+
+        const inputFileFieldContainer = fieldContainer.querySelector(SELECTOR_INPUT_FILE);
+        const { allowedFileTypes } = inputFileFieldContainer.dataset;
         const previewField = new EzImageFilePreviewField({
             validator,
             fieldContainer,
-            fileTypeAccept: fieldContainer.querySelector(SELECTOR_INPUT_FILE).accept,
+            fileTypeAccept: inputFileFieldContainer.accept,
+            allowedFileTypes: typeof allowedFileTypes !== 'undefined' ? allowedFileTypes.split(',') : [],
         });
 
         previewField.init();

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimageasset.js b/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'],
+                },
             ],
         });
 

diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezmedia.js b/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',

diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss b/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss
@@ -44,6 +44,7 @@
                     color: $ibexa-color-dark-300;
                 }
 
+                &--image-extensions,
                 &--filesize {
                     color: $ibexa-color-dark-300;
                     font-size: $ibexa-text-font-size-small;

diff --git a/src/bundle/Resources/translations/ibexa_content_forms_content.en.xliff b/src/bundle/Resources/translations/ibexa_content_forms_content.en.xliff
@@ -161,6 +161,11 @@
         <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>

diff --git a/src/bundle/Resources/translations/ibexa_content_type.en.xliff b/src/bundle/Resources/translations/ibexa_content_type.en.xliff
@@ -601,6 +601,11 @@
         <target state="new">Minimum value</target>
         <note>key: field_definition.ezfloat.min_value</note>
       </trans-unit>
+      <trans-unit id="8959be663eef40d92147918da792f8677772ea0c" resname="field_definition.ezimage.image_types">
+        <source>Image types</source>
+        <target state="new">Image types</target>
+        <note>key: field_definition.ezimage.image_types</note>
+      </trans-unit>
       <trans-unit id="5e8015fbf9269d3ee1bbb99b09005cf6b165ab53" resname="field_definition.ezimage.is_alternative_text_required">
         <source>Alternative text is required</source>
         <target state="new">Alternative text is required</target>

diff --git a/src/bundle/Resources/translations/validators.en.xliff b/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>

diff --git a/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig b/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig
@@ -87,6 +87,12 @@
         {{- form_row(form.maxSize) -}}
     </div>
 
+    {% if form.mimeTypes is defined %}
+        <div class="ezimage-validator mime-types{% if group_class is not empty %} {{ group_class }}{% endif %}">
+            {{- form_row(form.mimeTypes) -}}
+        </div>
+    {% endif %}
+
     <div class="ezimage-validator is-alternative-text-required"{% if group_class is not empty %} {{ group_class }}{% endif %}>
         {{ form_row(form.isAlternativeTextRequired) }}
     </div>

diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig
@@ -53,6 +53,18 @@
         <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 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 %}
+
     {% set attr = attr|merge({ hidden: 'hidden' }) %}
 
     {{- form_widget(form.file, {'attr': attr}) -}}

diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimage.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimage.html.twig
@@ -5,7 +5,13 @@
 {%- block ezplatform_fieldtype_ezimage_row -%}
     {% set preview_block_name = 'ezimage_preview' %}
     {% set max_file_size = min(form.parent.vars.value.fieldDefinition.validatorConfiguration.FileSizeValidator.maxFileSize * 1024 * 1024, max_upload_size|round) %}
-    {% set attr = attr|merge({'accept': 'image/*'}) %}
+
+    {% if mime_types is defined %}
+        {% set attr = attr|merge({'data-allowed-file-types': mime_types|join(',') }) %}
+    {% else %}
+        {% set attr = attr|merge({'accept': 'image/*' }) %}
+    {% endif %}
+
     {{ block('binary_base_row') }}
 {%- endblock -%}
 

diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimageasset.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimageasset.html.twig
@@ -17,6 +17,10 @@
         'accept': 'image/*'
     }) %}
 
+    {% if mime_types is defined %}
+        {% set attr = attr|merge({'data-allowed-file-types': mime_types|join(',') }) %}
+    {% endif %}
+
     {{ block('binary_base_row') }}
 {%- endblock -%}
 
@@ -50,6 +54,18 @@
         </div>
     {% endif %}
 
+    {% 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 %}
+
     {% set attr = attr|merge({ hidden: 'hidden' }) %}
 
     {{- form_widget(form.file, {'attr': attr}) -}}

diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -72,6 +72,7 @@
                 isLess: '{{ 'js.error.is_less'|trans({}, 'validators')|desc('{fieldName} value must be greater than or equal to {minValue}') }}',
                 isGreater: '{{ 'js.error.is_greater'|trans({}, 'validators')|desc('{fieldName} value must be less than or equal to {maxValue}') }}',
                 invalidFileSize: '{{ 'js.error.invalid_file_size'|trans({}, 'validators')|desc('{fieldName}: Cannot upload. File exceeds file size limit.') }}',
+                invalidFileType: '{{ 'js.error.invalid_file_type'|trans({}, 'validators')|desc('{fieldName}: Cannot upload. File has wrong type.') }}',
                 provideLatitudeValue: '{{ 'js.error.provide_latitude_value'|trans({}, 'validators')|desc('Provide latitude value in the Latitude field') }}',
                 provideLongitudeValue: '{{ 'js.error.provide_longitude_value'|trans({}, 'validators')|desc('Provide longitude value in the Longitude field') }}',
                 addressNotFound: '{{ 'js.error.address_not_found'|trans({}, 'validators')|desc('Provided address does not exist') }}',