V16: Property editor file upload does not validate file types (#19714)

* fix: forwards the file extensions to the inner dropzone

* fix: ensures non-mimetype extensions start with a dot (.)

* chore: adds more details on how to set file extensions

* feat: adds a bit of styling to code snippets in UFM

* fix: return if no file in stream

* fix: prevents potential race condition if src changes

* chore: minor code improvement

Author: iOvergaard

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts

@@ -37,24 +37,12 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	 * @type {Array<string>}
 	 * @default
 	 */
-	@property({
-		type: Array,
-		attribute: 'allowed-file-extensions',
-		converter(value) {
-			if (typeof value === 'string') {
-				return value.split(',').map((ext) => ext.trim());
-			}
-			return value;
-		},
-	})
+	@property({ type: Array, attribute: 'allowed-file-extensions' })
 	allowedFileExtensions?: Array<string>;
 
 	@state()
 	public temporaryFile?: UmbTemporaryFileModel;
 
-	@state()
-	private _extensions?: string[];
-
 	@state()
 	private _previewAlias?: string;
 
@@ -87,7 +75,14 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	}
 
 	async #setPreviewAlias(): Promise<void> {
-		this._previewAlias = await this.#getPreviewElementAlias();
+		// Store current src to detect changes during async operation
+		const currentSrc = this.#src;
+		const alias = await this.#getPreviewElementAlias();
+
+		// Only update if src hasn't changed in the meantime (prevents race conditions)
+		if (this.#src === currentSrc) {
+			this._previewAlias = alias;
+		}
 	}
 
 	async #getPreviewElementAlias() {
@@ -107,9 +102,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 		if (!mimeType) return fallbackAlias;
 
 		// Check for an exact match
-		const exactMatch = manifests.find((manifest) => {
-			return stringOrStringArrayContains(manifest.forMimeTypes, mimeType);
-		});
+		const exactMatch = manifests.find((manifest) => stringOrStringArrayContains(manifest.forMimeTypes, mimeType));
 		if (exactMatch) return exactMatch.alias;
 
 		// Check for wildcard match (e.g. image/*)
@@ -151,6 +144,11 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 
 		this.temporaryFile = (file as UmbUploadableFile).temporaryFile;
 
+		if (!this.temporaryFile?.file) {
+			console.error('No file available for upload');
+			return;
+		}
+
 		this.#clearObjectUrl();
 
 		const blobUrl = URL.createObjectURL(this.temporaryFile.file);
@@ -176,7 +174,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 			<umb-input-dropzone
 				standalone
 				disable-folder-upload
-				accept=${ifDefined(this._extensions?.join(','))}
+				accept=${ifDefined(this.allowedFileExtensions ? this.allowedFileExtensions.join(',') : undefined)}
 				@change=${this.#onUpload}></umb-input-dropzone>
 		`;
 	}

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

@@ -11,6 +11,8 @@ export const manifest: ManifestPropertyEditorSchema = {
 				{
 					alias: 'fileExtensions',
 					label: 'Accepted file extensions',
+					description:
+						'Insert one extension per line, for example `.jpg`.\n\nYou can also use mime types, for example `image/*` or `application/pdf`.',
 					propertyEditorUiAlias: 'Umb.PropertyEditorUi.AcceptedUploadTypes',
 				},
 			],

src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.ts

@@ -22,6 +22,11 @@ export class UmbPropertyEditorUIUploadFieldElement extends UmbLitElement impleme
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
 		if (!config) return;
 		this._fileExtensions = config.getValueByAlias<Array<string>>('fileExtensions');
+		if (this._fileExtensions?.length) {
+			this._fileExtensions = this._fileExtensions.map((ext) =>
+				ext.startsWith('.') ? ext : ext.includes('/') ? ext : `.${ext}`,
+			);
+		}
 	}
 
 	#onChange(event: CustomEvent) {

src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts

@@ -59,6 +59,14 @@ export class UmbUfmRenderElement extends UmbLitElement {
 				overflow: auto;
 			}
 
+			code {
+				font-family: var(--uui-font-monospace);
+				white-space: pre-wrap;
+				background-color: var(--uui-color-background);
+				border-radius: var(--uui-border-radius);
+				padding: 0.2em 0.4em;
+			}
+
 			:host > :first-child {
 				margin-block-start: 0;
 			}