diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/file-upload-preview.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/file-upload-preview.model.ts index 9c5bba9bc0..797491b693 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/file-upload-preview.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/file-upload-preview.model.ts @@ -3,5 +3,5 @@ import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api'; export interface ManifestFileUploadPreview extends ManifestElement { type: 'fileUploadPreview'; - forMimeTypes?: Array; + forMimeTypes: Array; } 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 f30c3e6a9a..05be476e2f 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 @@ -63,7 +63,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement { private _extensions?: string[]; @state() - private _previewAlias = ''; + private _previewAlias?: string; @query('#dropzone') private _dropzone?: UUIFileDropzoneElement; @@ -92,7 +92,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement { #getPreviewElementAlias() { const previews = this.#previewers.getValue(); - const fallbackAlias = previews.find((preview) => !preview.forMimeTypes?.length)?.alias ?? ''; + const fallbackAlias = previews.find((preview) => preview.forMimeTypes.includes('*/*'))?.alias; const mimeType = this.#getMimeTypeFromPath(this._src); if (!mimeType) return fallbackAlias; @@ -101,7 +101,8 @@ export class UmbInputUploadFieldElement extends UmbLitElement { return preview.forMimeTypes?.find((type) => { if (mimeType === type) preview.alias; - const snippet = type.replace('*', ''); + const snippet = type.replace(/\*/g, ''); + if (mimeType.startsWith(snippet)) return preview.alias; if (mimeType.endsWith(snippet)) return preview.alias; return undefined; @@ -174,7 +175,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement { `; } - #renderFile(src: string, previewAlias: string, file?: File) { + #renderFile(src: string, previewAlias?: string, file?: File) { if (!previewAlias) return 'An error occurred. No previewer found for the file type.'; return html`
diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/manifest.ts index 4fca63ae09..02413610f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/manifest.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/manifest.ts @@ -13,6 +13,7 @@ const previews: Array = [ alias: 'Umb.FileUploadPreview.File', name: 'File File Upload Preview', element: () => import('./input-upload-field-file.element.js'), + forMimeTypes: ['*/*'], }, { type: 'fileUploadPreview',