diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index 020dcd75f1d3..f4203b0ce5dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/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} * @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; @state() public temporaryFile?: UmbTemporaryFileModel; - @state() - private _extensions?: string[]; - @state() private _previewAlias?: string; @@ -87,7 +75,14 @@ export class UmbInputUploadFieldElement extends UmbLitElement { } async #setPreviewAlias(): Promise { - 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 { `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/Umbraco.UploadField.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/Umbraco.UploadField.ts index ba74e968d814..9c5abc184ff4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/Umbraco.UploadField.ts +++ b/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', }, ], diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.ts index 02539406e373..168b2b0fc206 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/property-editor-ui-upload-field.element.ts +++ b/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>('fileExtensions'); + if (this._fileExtensions?.length) { + this._fileExtensions = this._fileExtensions.map((ext) => + ext.startsWith('.') ? ext : ext.includes('/') ? ext : `.${ext}`, + ); + } } #onChange(event: CustomEvent) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts b/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts index 54f7d0c8c023..4ef5cf573e62 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/ufm/components/ufm-render/ufm-render.element.ts +++ b/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; }