V15: Client should validate maxFileSize and allowed/disallowed file types from server configuration (#18163)

iOvergaard · web-flow · commit 22d974e748f8 · 2025-01-30T12:54:17.000Z
* feat: shows notification when no suitable media type is found

* chore: rearrange imports

* feat: use a forward ref to find the dropzone

* chore: rearrange imports

* chore(mock): send back correct header

* feat: avoid using the context consumer to get a token, but instead mimick the OpenAPI generator

* chore(mock): allow more file types

* chore(mock): create more upload fields

* chore(mock): also look for mediaPicker fields

* chore(mock): improve media mock db

* chore(mock): add missing endpoints

* chore(mock): update media data

* chore(mock): fix aliases for media grid and table

* chore(mock): add urls to media

* chore(mock): adds missing endpoint for imaging

* fix: reverse order of properties to overwrite existing status

* feat: listen to progress updates on upload and update the `progress` property

* feat: adds tracking of upload progress to placeholders

* feat: bind the progress number up on the temporary file badge to indicate upload status

* feat: optimises progress calculation and makes the badge bigger to be able to show the progress in percent

* feat: allow text to be normal

* chore: use correct localization

* feat: shows error status for anything that isn't waiting or complete

* feat: makes `progress` optional

* feat: adds repository+store for temporary file configuration

* chore(mock): adds mock endpoint for temporary file configuration

* feat: set progress for createTemporaryFiles

* feat: allows a `whitespace` option to notifications

* feat: validates uploads before trying to query the server

* feat: adds `formatBytes` function to format numbers

* chore: export all consts

* feat: exports bytes function

* feat: set decimals to default to 2, which works nicely with the Intl numberformat

* feat: use `formatBytes` to format the error message

* chore(mock): set max file size for mock to 1.4 GB

* feat: adds localization
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts
@@ -345,6 +345,9 @@ export default {
 		clickToUpload: 'Klik for at uploade',
 		orClickHereToUpload: 'eller klik her for at vælge filer',
 		disallowedFileType: 'Kan ikke uploade denne fil, den har ikke en godkendt filtype',
+		disallowedMediaType: "Kan ikke uploade denne fil, mediatypen med alias '%0%' er ikke tilladt her",
+		invalidFileName: 'Kan ikke uploade denne fil, den har et ugyldigt filnavn',
+		invalidFileSize: 'Kan ikke uploade denne fil, den er for stor',
 		maxFileSize: 'Maks filstørrelse er',
 		mediaRoot: 'Medie rod',
 		moveToSameFolderFailed: 'Overordnet og destinations mappe kan ikke være den samme',
@@ -353,8 +356,6 @@ export default {
 		dragAndDropYourFilesIntoTheArea:
 			'Træk dine filer ind i dropzonen for, at uploade dem til\n      mediebiblioteket.\n    ',
 		uploadNotAllowed: 'Upload er ikke tiladt på denne lokation',
-		disallowedMediaType: "Cannot upload this file, the media type with alias '%0%' is not allowed here",
-		invalidFileName: 'Cannot upload this file, it does not have a valid file name',
 	},
 	member: {
 		createNewMember: 'Opret et nyt medlem',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts
@@ -376,6 +376,7 @@ export default {
 		disallowedFileType: 'Cannot upload this file, it does not have an approved file type',
 		disallowedMediaType: "Cannot upload this file, the media type with alias '%0%' is not allowed here",
 		invalidFileName: 'Cannot upload this file, it does not have a valid file name',
+		invalidFileSize: 'Cannot upload this file, it is too large',
 		maxFileSize: 'Max file size is',
 		mediaRoot: 'Media root',
 		createFolderFailed: 'Failed to create a folder under parent id %0%',
diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts
@@ -363,6 +363,7 @@ export default {
 		disallowedFileType: 'Cannot upload this file, it does not have an approved file type',
 		disallowedMediaType: "Cannot upload this file, the media type with alias '%0%' is not allowed here",
 		invalidFileName: 'Cannot upload this file, it does not have a valid file name',
+		invalidFileSize: 'Cannot upload this file, it is too large',
 		maxFileSize: 'Max file size is',
 		mediaRoot: 'Media root',
 		createFolderFailed: 'Failed to create a folder under parent id %0%',
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/temporary-file/temporary-file.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/temporary-file/temporary-file.handlers.ts
@@ -1,6 +1,9 @@
 const { rest } = window.MockServiceWorker;
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
-import type { PostTemporaryFileResponse } from '@umbraco-cms/backoffice/external/backend-api';
+import type {
+	GetTemporaryFileConfigurationResponse,
+	PostTemporaryFileResponse,
+} from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 
 const UMB_SLUG = 'temporary-file';
@@ -15,4 +18,16 @@ export const handlers = [
 			ctx.text<PostTemporaryFileResponse>(guid),
 		);
 	}),
+
+	rest.get(umbracoPath(`/${UMB_SLUG}/configuration`), async (_req, res, ctx) => {
+		return res(
+			ctx.delay(),
+			ctx.json<GetTemporaryFileConfigurationResponse>({
+				allowedUploadedFileExtensions: [],
+				disallowedUploadedFilesExtensions: ['exe', 'dll', 'bat', 'msi'],
+				maxFileSize: 1468007,
+				imageFileTypes: ['jpg', 'png', 'gif', 'jpeg', 'svg'],
+			}),
+		);
+	}),
 ];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts
@@ -19,6 +19,7 @@ import { manifests as propertyTypeManifests } from './property-type/manifests.js
 import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
 import { manifests as sectionManifests } from './section/manifests.js';
 import { manifests as serverFileSystemManifests } from './server-file-system/manifests.js';
+import { manifests as temporaryFileManifests } from './temporary-file/manifests.js';
 import { manifests as themeManifests } from './themes/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
@@ -47,6 +48,7 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...recycleBinManifests,
 	...sectionManifests,
 	...serverFileSystemManifests,
+	...temporaryFileManifests,
 	...themeManifests,
 	...treeManifests,
 	...workspaceManifests,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/layouts/default/notification-layout-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/layouts/default/notification-layout-default.element.ts
@@ -6,6 +6,7 @@ import {
 	ifDefined,
 	nothing,
 	css,
+	styleMap,
 } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbNotificationDefaultData, UmbNotificationHandler } from '@umbraco-cms/backoffice/notification';
@@ -23,7 +24,7 @@ export class UmbNotificationLayoutDefaultElement extends LitElement {
 	override render() {
 		return html`
 			<uui-toast-notification-layout id="layout" headline="${ifDefined(this.data.headline)}" class="uui-text">
-				<div id="message">${this.data.message}</div>
+				<div id="message" style=${styleMap({ whiteSpace: this.data.whitespace })}>${this.data.message}</div>
 				${this.#renderStructuredList(this.data.structuredList)}
 			</uui-toast-notification-layout>
 		`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/notification/notification.context.ts
@@ -12,6 +12,7 @@ export interface UmbNotificationDefaultData {
 	message: string;
 	headline?: string;
 	structuredList?: Record<string, Array<unknown>>;
+	whitespace?: 'normal' | 'pre-line' | 'pre-wrap' | 'nowrap' | 'pre';
 }
 
 /**
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.repository.ts
@@ -0,0 +1,69 @@
+import type { UmbTemporaryFileConfigurationModel } from '../types.js';
+import { UmbTemporaryFileConfigServerDataSource } from './config.server.data-source.js';
+import { UMB_TEMPORARY_FILE_CONFIG_STORE_CONTEXT } from './config.store.token.js';
+import { UMB_TEMPORARY_FILE_REPOSITORY_ALIAS } from './constants.js';
+import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { Observable } from '@umbraco-cms/backoffice/observable-api';
+
+export class UmbTemporaryFileConfigRepository extends UmbRepositoryBase implements UmbApi {
+	/**
+	 * Promise that resolves when the repository has been initialized, i.e. when the configuration has been fetched from the server.
+	 */
+	initialized: Promise<void>;
+
+	#dataStore?: typeof UMB_TEMPORARY_FILE_CONFIG_STORE_CONTEXT.TYPE;
+	#dataSource = new UmbTemporaryFileConfigServerDataSource(this);
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_TEMPORARY_FILE_REPOSITORY_ALIAS.toString());
+		this.initialized = new Promise<void>((resolve) => {
+			this.consumeContext(UMB_TEMPORARY_FILE_CONFIG_STORE_CONTEXT, async (store) => {
+				this.#dataStore = store;
+				await this.#init();
+				resolve();
+			});
+		});
+	}
+
+	async #init() {
+		// Check if the store already has data
+		if (this.#dataStore?.getState()) {
+			return;
+		}
+
+		const { data } = await this.#dataSource.getConfig();
+
+		if (data) {
+			this.#dataStore?.update(data);
+		}
+	}
+
+	/**
+	 * Subscribe to the entire configuration.
+	 */
+	all() {
+		if (!this.#dataStore) {
+			throw new Error('Data store not initialized');
+		}
+
+		return this.#dataStore.all();
+	}
+
+	/**
+	 * Subscribe to a part of the configuration.
+	 * @param part
+	 */
+	part<Part extends keyof UmbTemporaryFileConfigurationModel>(
+		part: Part,
+	): Observable<UmbTemporaryFileConfigurationModel[Part]> {
+		if (!this.#dataStore) {
+			throw new Error('Data store not initialized');
+		}
+
+		return this.#dataStore.part(part);
+	}
+}
+
+export default UmbTemporaryFileConfigRepository;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.server.data-source.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.server.data-source.ts
@@ -0,0 +1,18 @@
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { TemporaryFileService } from '@umbraco-cms/backoffice/external/backend-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
+
+export class UmbTemporaryFileConfigServerDataSource {
+	#host;
+
+	constructor(host: UmbControllerHost) {
+		this.#host = host;
+	}
+
+	/**
+	 * Get the temporary file configuration.
+	 */
+	getConfig() {
+		return tryExecuteAndNotify(this.#host, TemporaryFileService.getTemporaryFileConfiguration());
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.store.token.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.store.token.ts
@@ -0,0 +1,7 @@
+import type { UmbTemporaryFileConfigStore } from './config.store.js';
+import { UMB_TEMPORARY_FILE_CONFIG_STORE_ALIAS } from './constants.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_TEMPORARY_FILE_CONFIG_STORE_CONTEXT = new UmbContextToken<UmbTemporaryFileConfigStore>(
+	UMB_TEMPORARY_FILE_CONFIG_STORE_ALIAS,
+);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.store.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/config.store.ts
@@ -0,0 +1,12 @@
+import type { UmbTemporaryFileConfigurationModel } from '../types.js';
+import { UMB_TEMPORARY_FILE_CONFIG_STORE_CONTEXT } from './config.store.token.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbStoreObjectBase } from '@umbraco-cms/backoffice/store';
+
+export class UmbTemporaryFileConfigStore extends UmbStoreObjectBase<UmbTemporaryFileConfigurationModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_TEMPORARY_FILE_CONFIG_STORE_CONTEXT.toString());
+	}
+}
+
+export default UmbTemporaryFileConfigStore;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/constants.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/constants.ts
@@ -0,0 +1,2 @@
+export const UMB_TEMPORARY_FILE_REPOSITORY_ALIAS = 'Umb.Repository.TemporaryFile.Config';
+export const UMB_TEMPORARY_FILE_CONFIG_STORE_ALIAS = 'UmbTemporaryFileConfigStore';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/index.ts
@@ -0,0 +1,4 @@
+export * from './config.repository.js';
+export * from './config.store.token.js';
+export * from './config.store.js';
+export * from './constants.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/config/manifests.ts
@@ -0,0 +1,16 @@
+import { UMB_TEMPORARY_FILE_CONFIG_STORE_ALIAS, UMB_TEMPORARY_FILE_REPOSITORY_ALIAS } from './constants.js';
+
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'store',
+		alias: UMB_TEMPORARY_FILE_CONFIG_STORE_ALIAS,
+		name: 'Temporary File Config Store',
+		api: () => import('./config.store.js'),
+	},
+	{
+		type: 'repository',
+		alias: UMB_TEMPORARY_FILE_REPOSITORY_ALIAS,
+		name: 'Temporary File Config Repository',
+		api: () => import('./config.repository.js'),
+	},
+];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/index.ts
@@ -1,4 +1,5 @@
 export * from './temporary-file.repository.js';
 export * from './components/temporary-file-badge.element.js';
+export * from './config/index.js';
 export * from './temporary-file-manager.class.js';
 export * from './types.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/manifests.ts
@@ -0,0 +1,3 @@
+import { manifests as configManifests } from './config/manifests.js';
+
+export const manifests = [...configManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts
@@ -1,17 +1,23 @@
 import { UmbTemporaryFileRepository } from './temporary-file.repository.js';
+import { UmbTemporaryFileConfigRepository } from './config/index.js';
 import {
 	TemporaryFileStatus,
 	type UmbQueueHandlerCallback,
 	type UmbTemporaryFileModel,
 	type UmbUploadOptions,
 } from './types.js';
-import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { observeMultiple, UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api';
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
+import { formatBytes } from '@umbraco-cms/backoffice/utils';
 
 export class UmbTemporaryFileManager<
 	UploadableItem extends UmbTemporaryFileModel = UmbTemporaryFileModel,
 > extends UmbControllerBase {
 	readonly #temporaryFileRepository = new UmbTemporaryFileRepository(this._host);
+	readonly #temporaryFileConfigRepository = new UmbTemporaryFileConfigRepository(this._host);
+	readonly #localization = new UmbLocalizationController(this._host);
 
 	readonly #queue = new UmbArrayState<UploadableItem>([], (item) => item.temporaryUnique);
 	public readonly queue = this.#queue.asObservable();
@@ -71,9 +77,62 @@ export class UmbTemporaryFileManager<
 		return filesCompleted;
 	}
 
+	async #validateItem(item: UploadableItem): Promise<boolean> {
+		let maxFileSize = await this.observe(this.#temporaryFileConfigRepository.part('maxFileSize')).asPromise();
+		if (maxFileSize) {
+			// Convert from kilobytes to bytes
+			maxFileSize *= 1024;
+			if (item.file.size > maxFileSize) {
+				const notification = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+				notification.peek('warning', {
+					data: {
+						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',
+					},
+				});
+				return false;
+			}
+		}
+
+		const fileExtension = item.file.name.split('.').pop() ?? '';
+
+		const [allowedExtensions, disallowedExtensions] = await this.observe(
+			observeMultiple([
+				this.#temporaryFileConfigRepository.part('allowedUploadedFileExtensions'),
+				this.#temporaryFileConfigRepository.part('disallowedUploadedFilesExtensions'),
+			]),
+		).asPromise();
+
+		if (
+			(allowedExtensions?.length && !allowedExtensions.includes(fileExtension)) ||
+			(disallowedExtensions?.length && disallowedExtensions.includes(fileExtension))
+		) {
+			const notification = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+			notification.peek('warning', {
+				data: {
+					message: `${this.#localization.term('media_disallowedFileType')}: ${fileExtension}`,
+				},
+			});
+			return false;
+		}
+
+		return true;
+	}
+
 	async #handleUpload(item: UploadableItem) {
 		if (!item.temporaryUnique) throw new Error(`Unique is missing for item ${item}`);
 
+		const isValid = await this.#validateItem(item);
+		if (!isValid) {
+			this.#queue.updateOne(item.temporaryUnique, { ...item, status: TemporaryFileStatus.ERROR });
+			return { ...item, status: TemporaryFileStatus.ERROR };
+		}
+
 		const { error } = await this.#temporaryFileRepository.upload(item.temporaryUnique, item.file, (evt) => {
 			// Update progress in percent if a callback is provided
 			if (item.onProgress) item.onProgress((evt.loaded / evt.total) * 100);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/types.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/types.ts
@@ -1,3 +1,5 @@
+import type { TemporaryFileConfigurationResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+
 export enum TemporaryFileStatus {
 	SUCCESS = 'success',
 	WAITING = 'waiting',
@@ -17,3 +19,5 @@ export type UmbUploadOptions<TItem extends UmbTemporaryFileModel> = {
 	chunkSize?: number;
 	callback?: UmbQueueHandlerCallback<TItem>;
 };
+
+export type UmbTemporaryFileConfigurationModel = TemporaryFileConfigurationResponseModel;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/bytes/bytes.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/bytes/bytes.function.ts
@@ -0,0 +1,45 @@
+/* This Source Code has been derived from Lee Kelleher's Contentment.
+ * https://github.com/leekelleher/umbraco-contentment/blob/develop/src/Umbraco.Community.Contentment/DataEditors/Bytes/bytes.js
+ * SPDX-License-Identifier: MPL-2.0
+ * Copyright © 2019 Lee Kelleher.
+ * Modifications are licensed under the MIT License.
+ */
+
+export interface IFormatBytesOptions {
+	/**
+	 * Number of kilobytes, default is 1024.
+	 * @example 1000 (1KB) or 1024 (1KiB)
+	 */
+	kilo?: number;
+
+	/**
+	 * Number of decimal places, default is 2.
+	 * @example 0, 1, 2, 3, etc.
+	 */
+	decimals?: number;
+
+	/**
+	 * The culture to use for formatting the number itself, default is `undefined` which means the browser's default culture.
+	 * @example 'en-GB', 'en-US', 'fr-FR', etc.
+	 */
+	culture?: string;
+}
+
+/**
+ * Format bytes as human-readable text.
+ * @param {number} bytes - The number of bytes to format.
+ * @param {IFormatBytesOptions} opts - Optional settings.
+ * @returns {string} - The formatted bytes.
+ */
+export function formatBytes(bytes: number, opts?: IFormatBytesOptions): string {
+	if (bytes === 0) return '0 Bytes';
+
+	const k = opts?.kilo ?? 1024;
+	const dm = opts?.decimals ?? 2;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	const n = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+	return `${n.toLocaleString(opts?.culture)} ${sizes[i]}`;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/bytes/bytes.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/bytes/bytes.test.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts
diff --git a/src/Umbraco.Web.UI.Client/utils/all-umb-consts/index.ts b/src/Umbraco.Web.UI.Client/utils/all-umb-consts/index.ts

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export interface UmbNotificationDefaultData {`
`12`	`12`	`message: string;`
`13`	`13`	`headline?: string;`
`14`	`14`	`structuredList?: Record<string, Array<unknown>>;`
	`15`	`+ whitespace?: 'normal' \| 'pre-line' \| 'pre-wrap' \| 'nowrap' \| 'pre';`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`/**`