V15: Show server configuration when configuring the Upload Field

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -372,6 +372,8 @@ export default {
 		fileSecurityValidationFailure: 'One or more file security validations have failed',
 		moveToSameFolderFailed: 'Parent and destination folders cannot be the same',
 		uploadNotAllowed: 'Upload is not allowed in this location.',
+		noticeExtensionsServerOverride:
+			'Regardless of the allowed file types, the following limitations apply system-wide due to the server configuration:',
 	},
 	member: {
 		'2fa': 'Two-Factor Authentication',
@@ -885,6 +887,7 @@ export default {
 		retrieve: 'Retrieve',
 		retry: 'Retry',
 		rights: 'Permissions',
+		serverConfiguration: 'Server Configuration',
 		scheduledPublishing: 'Scheduled Publishing',
 		umbracoInfo: 'Umbraco info',
 		search: 'Search',
@@ -2138,6 +2141,9 @@ export default {
 		numberMinimum: "Value must be greater than or equal to '%0%'.",
 		numberMaximum: "Value must be less than or equal to '%0%'.",
 		numberMisconfigured: "Minimum value '%0%' must be less than the maximum value '%1%'.",
+		invalidExtensions: 'One or more of the extensions are invalid.',
+		allowedExtensions: 'Allowed extensions are:',
+		disallowedExtensions: 'Disallowed extensions are:',
 	},
 	healthcheck: {
 		checkSuccessMessage: "Value is set to the recommended value: '%0%'.",

src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts

@@ -65,12 +65,12 @@ export class UmbInputMultipleTextStringItemElement extends UUIFormControlMixin(U
 	}
 
 	// Prevent valid events from bubbling outside the message element
-	#onValid(event: any) {
+	#onValid(event: Event) {
 		event.stopPropagation();
 	}
 
 	// Prevent invalid events from bubbling outside the message element
-	#onInvalid(event: any) {
+	#onInvalid(event: Event) {
 		event.stopPropagation();
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts

@@ -89,7 +89,7 @@ export class UmbTemporaryFileManager<
 						headline: 'Upload',
 						message: `
 	${this.#localization.term('media_invalidFileSize')}: ${item.file.name} (${formatBytes(item.file.size)}).
-	
+
 	${this.#localization.term('media_maxFileSize')} ${formatBytes(maxFileSize)}.
 						`,
 						whitespace: 'pre-line',

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/Umbraco.UploadField.ts

@@ -11,7 +11,7 @@ export const manifest: ManifestPropertyEditorSchema = {
 				{
 					alias: 'fileExtensions',
 					label: 'Accepted file extensions',
-					propertyEditorUiAlias: 'Umb.PropertyEditorUi.MultipleTextString',
+					propertyEditorUiAlias: 'Umb.PropertyEditorUi.AcceptedTypes',
 				},
 			],
 		},

src/Umbraco.Web.UI.Client/src/packages/property-editors/accepted-types/index.ts

@@ -0,0 +1 @@
+export * from './property-editor-ui-accepted-types.element.js';

src/Umbraco.Web.UI.Client/src/packages/property-editors/accepted-types/manifests.ts

@@ -0,0 +1,15 @@
+import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor';
+
+export const manifest: ManifestPropertyEditorUi = {
+	type: 'propertyEditorUi',
+	alias: 'Umb.PropertyEditorUi.AcceptedTypes',
+	name: 'Accepted Types Property Editor UI',
+	element: () => import('./property-editor-ui-accepted-types.element.js'),
+	meta: {
+		label: 'Accepted Upload Types',
+		propertyEditorSchemaAlias: 'Umbraco.MultipleTextstring',
+		icon: 'icon-ordered-list',
+		group: 'lists',
+		supportsReadOnly: true,
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/property-editors/accepted-types/property-editor-ui-accepted-types.element.ts

@@ -0,0 +1,130 @@
+import { UmbPropertyEditorUIMultipleTextStringElement } from '../multiple-text-string/property-editor-ui-multiple-text-string.element.js';
+import { css, customElement, html, nothing, state } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import {
+	UmbTemporaryFileConfigRepository,
+	type UmbTemporaryFileConfigurationModel,
+} from '@umbraco-cms/backoffice/temporary-file';
+import { formatBytes } from '@umbraco-cms/backoffice/utils';
+
+/**
+ * @element umb-property-editor-ui-accepted-types
+ */
+@customElement('umb-property-editor-ui-accepted-types')
+export class UmbPropertyEditorUIAcceptedTypesElement
+	extends UmbPropertyEditorUIMultipleTextStringElement
+	implements UmbPropertyEditorUiElement
+{
+	@state()
+	protected _acceptedTypes: string[] = [];
+
+	@state()
+	protected _disallowedTypes: string[] = [];
+
+	@state()
+	protected _maxFileSize?: number | null;
+
+	#temporaryFileConfigRepository = new UmbTemporaryFileConfigRepository(this);
+
+	override async connectedCallback() {
+		super.connectedCallback();
+
+		await this.#temporaryFileConfigRepository.initialized;
+		this.observe(this.#temporaryFileConfigRepository.all(), (config) => {
+			if (!config) return;
+
+			this.#addValidators(config);
+
+			this._acceptedTypes = config.allowedUploadedFileExtensions;
+			this._disallowedTypes = config.disallowedUploadedFilesExtensions;
+			this._maxFileSize = config.maxFileSize ? config.maxFileSize * 1024 : null;
+		});
+	}
+
+	#addValidators(config: UmbTemporaryFileConfigurationModel) {
+		this._inputElement?.addValidator(
+			'badInput',
+			() => {
+				let message = this.localize.term('validation_invalidExtensions');
+				if (config.allowedUploadedFileExtensions.length) {
+					message += ` ${this.localize.term('validation_allowedExtensions')} ${config.allowedUploadedFileExtensions.join(', ')}`;
+				}
+				if (config.disallowedUploadedFilesExtensions.length) {
+					message += ` ${this.localize.term('validation_disallowedExtensions')} ${config.disallowedUploadedFilesExtensions.join(', ')}`;
+				}
+				return message;
+			},
+			() => {
+				const extensions = this._inputElement?.items;
+				if (!extensions) return false;
+				if (
+					config.allowedUploadedFileExtensions.length &&
+					!config.allowedUploadedFileExtensions.some((ext) => extensions.includes(ext))
+				) {
+					return true;
+				}
+				if (config.disallowedUploadedFilesExtensions.some((ext) => extensions.includes(ext))) {
+					return true;
+				}
+				return false;
+			},
+		);
+	}
+
+	#renderAcceptedTypes() {
+		if (!this._acceptedTypes.length && !this._disallowedTypes.length && !this._maxFileSize) {
+			return nothing;
+		}
+		return html`
+			<uui-box id="notice" headline=${this.localize.term('general_serverConfiguration')}>
+				<p>${this.localize.term('media_noticeExtensionsServerOverride')}</p>
+				${this._acceptedTypes.length
+					? html`<p>
+							${this.localize.term('validation_allowedExtensions')} <strong>${this._acceptedTypes.join(', ')}</strong>
+						</p>`
+					: nothing}
+				${this._disallowedTypes.length
+					? html`<p>
+							${this.localize.term('validation_disallowedExtensions')}
+							<strong>${this._disallowedTypes.join(', ')}</strong>
+						</p>`
+					: nothing}
+				${this._maxFileSize
+					? html`
+							<p>
+								${this.localize.term('media_maxFileSize')}
+								<strong title="${this.localize.number(this._maxFileSize)} bytes">
+									${formatBytes(this._maxFileSize, { decimals: 2 })} </strong
+								>.
+							</p>
+						`
+					: nothing}
+			</uui-box>
+		`;
+	}
+
+	override render() {
+		return html` ${this.#renderAcceptedTypes()} ${super.render()} `;
+	}
+
+	static override readonly styles = [
+		UmbTextStyles,
+		css`
+			#notice {
+				--uui-color-divider-standalone: var(--uui-color-warning-standalone);
+				border: 1px solid var(--uui-color-divider-standalone);
+				background-color: var(--uui-color-warning);
+				color: var(--uui-color-warning-contrast);
+				margin-bottom: var(--uui-size-layout-1);
+		`,
+	];
+}
+
+export default UmbPropertyEditorUIAcceptedTypesElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-property-editor-ui-accepted-types': UmbPropertyEditorUIAcceptedTypesElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/property-editors/accepted-types/property-editor-ui-accepted-types.stories.ts

@@ -0,0 +1,15 @@
+import type { UmbPropertyEditorUIAcceptedTypesElement } from './property-editor-ui-accepted-types.element.js';
+import type { Meta, StoryFn } from '@storybook/web-components';
+import { html } from '@umbraco-cms/backoffice/external/lit';
+
+import './property-editor-ui-accepted-types.element.js';
+
+export default {
+	title: 'Property Editor UIs/Accepted Types',
+	component: 'umb-property-editor-ui-accepted-types',
+	id: 'umb-property-editor-ui-accepted-types',
+} as Meta;
+
+export const AAAOverview: StoryFn<UmbPropertyEditorUIAcceptedTypesElement> = () =>
+	html`<umb-property-editor-ui-accepted-types></umb-property-editor-ui-accepted-types>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/packages/property-editors/accepted-types/property-editor-ui-accepted-types.test.ts

@@ -0,0 +1,21 @@
+import { UmbPropertyEditorUIAcceptedTypesElement } from './property-editor-ui-accepted-types.element.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+
+describe('UmbPropertyEditorUIUploadFieldElement', () => {
+	let element: UmbPropertyEditorUIAcceptedTypesElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-property-editor-ui-accepted-types></umb-property-editor-ui-accepted-types> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbPropertyEditorUIAcceptedTypesElement);
+	});
+
+	if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {
+		it('passes the a11y audit', async () => {
+			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+		});
+	}
+});

src/Umbraco.Web.UI.Client/src/packages/property-editors/manifests.ts

@@ -1,3 +1,4 @@
+import { manifest as acceptedType } from './accepted-types/manifests.js';
 import { manifest as colorEditor } from './color-swatches-editor/manifests.js';
 import { manifest as numberRange } from './number-range/manifests.js';
 import { manifest as orderDirection } from './order-direction/manifests.js';
@@ -38,6 +39,7 @@ export const manifests: Array<UmbExtensionManifest> = [
 	...textBoxManifests,
 	...toggleManifests,
 	...contentPickerManifests,
+	acceptedType,
 	colorEditor,
 	numberRange,
 	orderDirection,

src/Umbraco.Web.UI.Client/src/packages/property-editors/multiple-text-string/property-editor-ui-multiple-text-string.element.ts

@@ -1,12 +1,17 @@
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
-import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, property, query, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import type { UmbInputMultipleTextStringElement } from '@umbraco-cms/backoffice/components';
 import type {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
+import { umbBindToValidation, UmbValidationContext } from '@umbraco-cms/backoffice/validation';
+import {
+	UMB_SUBMITTABLE_WORKSPACE_CONTEXT,
+	UmbSubmittableWorkspaceContextBase,
+} from '@umbraco-cms/backoffice/workspace';
 
 /**
  * @element umb-property-editor-ui-multiple-text-string
@@ -56,24 +61,53 @@ export class UmbPropertyEditorUIMultipleTextStringElement extends UmbLitElement
 	@state()
 	private _max = Infinity;
 
+	@query('#input', true)
+	protected _inputElement?: UmbInputMultipleTextStringElement;
+
+	protected _validationContext = new UmbValidationContext(this);
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_SUBMITTABLE_WORKSPACE_CONTEXT, (context) => {
+			if (context instanceof UmbSubmittableWorkspaceContextBase) {
+				context.addValidationContext(this._validationContext);
+			}
+		});
+	}
+
 	#onChange(event: UmbChangeEvent) {
 		event.stopPropagation();
 		const target = event.currentTarget as UmbInputMultipleTextStringElement;
 		this.value = target.items;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
+	// Prevent valid events from bubbling outside the message element
+	#onValid(event: Event) {
+		event.stopPropagation();
+	}
+
+	// Prevent invalid events from bubbling outside the message element
+	#onInvalid(event: Event) {
+		event.stopPropagation();
+	}
+
 	override render() {
 		return html`
-			<umb-input-multiple-text-string
-				max=${this._max}
-				min=${this._min}
-				.items=${this.value ?? []}
-				?disabled=${this.disabled}
-				?readonly=${this.readonly}
-				?required=${this.required}
-				@change=${this.#onChange}>
-			</umb-input-multiple-text-string>
+			<umb-form-validation-message id="validation-message" @invalid=${this.#onInvalid} @valid=${this.#onValid}>
+				<umb-input-multiple-text-string
+					id="input"
+					max=${this._max}
+					min=${this._min}
+					.items=${this.value ?? []}
+					?disabled=${this.disabled}
+					?readonly=${this.readonly}
+					?required=${this.required}
+					@change=${this.#onChange}
+					${umbBindToValidation(this)}>
+				</umb-input-multiple-text-string>
+			</umb-form-validation-message>
 		`;
 	}
 }