V16: Property editor file upload does not validate file types

[iOvergaard]

Description

Fixes #19482

This pull request includes several updates to improve file upload handling, enhance configuration flexibility, and refine code readability in the UmbInputUploadFieldElement and related components. The most notable changes include simplifying property definitions, adding safeguards for race conditions, improving error handling, and enhancing UI elements for better usability.

File upload handling improvements:

• Simplified the allowedFileExtensions property definition by removing the custom converter logic, relying instead on direct assignment. ([src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.tsL40-L57](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-47b6d3fedf3e4ff20aeca6644a860e3e019165e002b6ca0e9b04ac850ddadef6L40-L57))
• Added a check to prevent race conditions during asynchronous operations in the #setPreviewAlias method. ([src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.tsL90-R85](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-47b6d3fedf3e4ff20aeca6644a860e3e019165e002b6ca0e9b04ac850ddadef6L90-R85))
• Improved error handling by adding a check for missing files during upload and logging an error message if no file is available. ([src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.tsR147-R151](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-47b6d3fedf3e4ff20aeca6644a860e3e019165e002b6ca0e9b04ac850ddadef6R147-R151))

Configuration and UI enhancements:

• Updated the accept attribute in the umb-input-dropzone element to use the allowedFileExtensions property directly, simplifying the logic and improving maintainability. ([src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.tsL179-R177](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-47b6d3fedf3e4ff20aeca6644a860e3e019165e002b6ca0e9b04ac850ddadef6L179-R177))
• Enhanced the description for the fileExtensions property editor schema to clarify supported formats, including examples for extensions and MIME types. ([src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/Umbraco.UploadField.tsR14-R15](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-150e42b96acf1f4bc354ef369cb84f3b06d5e46899af20e71b4e9f868c771916R14-R15))
• Modified the config setter in UmbPropertyEditorUIUploadFieldElement to ensure all file extensions are properly formatted with a leading dot or MIME type prefix. ([src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.tsR25-R29](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-fc88712a4cfb1f39270d06b231a69cade8ba7e3bfdb912f9c8d7a1dacaba9208R25-R29))

Code readability and UI styling:

• Added styling for <code> elements in the UmbUfmRenderElement component, improving the display of code snippets with monospace font, background color, and padding. ([src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.tsR62-R69](https://github.com/umbraco/Umbraco-CMS/pull/19714/files#diff-12cfa88e28b52e47e4072c4293dbabd6f9ee5d7a8f31ea60e736d44574742343R62-R69))

Note to reviewers: This is an optional enhancement - I thought it would be good to style inline code snippets in UFM a bit.

[Copilot]

Pull Request Overview

This PR refactors file upload components to simplify extension handling, improve error and race-condition safeguards, and enhances UI styling for inline code snippets.

• Simplified allowedFileExtensions property and updated dropzone accept binding.
• Added formatting logic for fileExtensions config and a guard for missing files.
• Styled <code> elements in the UFM renderer and clarified upload-field schema description.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/packages/ufm/components/ufm-render/ufm-render.element.ts	Add CSS styling for <code> elements.
src/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.ts	Format fileExtensions with leading dots or MIME types.
src/packages/media/media/property-editors/upload-field/Umbraco.UploadField.ts	Enhance description with examples for extensions and MIME types.
src/packages/media/media/components/input-upload-field/input-upload-field.element.ts	Remove custom converter, add race-condition guard, improve missing-file check, and update accept attribute binding.

Comments suppressed due to low confidence (2)

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

• The new mapping logic in the config setter ensures extensions are formatted correctly but lacks unit tests. Consider adding tests to cover cases for both file extensions and MIME types.

		if (this._fileExtensions?.length) {

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

• Removing the custom converter means comma-separated attribute values won’t be parsed into an array, so allowedFileExtensions may remain a raw string. Consider adding a converter or parsing logic to split the string by commas.

	@property({ type: Array, attribute: 'allowed-file-extensions' })

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-19714.westeurope.6.azurestaticapps.net

[leekelleher]

Tested out, works as expected. 🚀