diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/index.ts index 890e2fbe58..2807ab69a3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/index.ts @@ -1,6 +1,2 @@ +export * from './preview/index.js'; export * from './input-upload-field.element.js'; -export * from './input-upload-field-file.element.js'; -export * from './input-upload-field-audio.element.js'; -export * from './input-upload-field-video.element.js'; -export * from './input-upload-field-svg.element.js'; -export * from './input-upload-field-image.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/manifests.ts index 12e70fe184..4fd2cf3384 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/manifests.ts @@ -1,12 +1 @@ -import type { ManifestFileUploadPreview } from '@umbraco-cms/backoffice/extension-registry'; -const previews: Array = [ - { - type: 'fileUploadPreview', - alias: 'My PDF Showcase', - name: 'PDF Showcase', - forMimeTypes: ['application/pdf'], - }, -]; -console.log('export..'); - -export const manifests = [...previews]; +export * from './preview/manifest.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/index.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/index.ts new file mode 100644 index 0000000000..abc41913ce --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/index.ts @@ -0,0 +1,5 @@ +export * from './input-upload-field-file.element.js'; +export * from './input-upload-field-audio.element.js'; +export * from './input-upload-field-video.element.js'; +export * from './input-upload-field-svg.element.js'; +export * from './input-upload-field-image.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-audio.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.ts similarity index 89% rename from src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-audio.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.ts index 0d838ce98a..3e42eea811 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-audio.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-input-upload-field-audio') -export class UmbInputUploadFieldAudioElement extends UmbLitElement { +export default class UmbInputUploadFieldAudioElement extends UmbLitElement { @property({ type: String }) path = ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-file.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts similarity index 97% rename from src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-file.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts index 7882601f8f..5942802e83 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-file.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts @@ -4,7 +4,7 @@ import { html, customElement, property, state, css } from '@umbraco-cms/backoffi import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-input-upload-field-file') -export class UmbInputUploadFieldFileElement extends UmbLitElement { +export default class UmbInputUploadFieldFileElement extends UmbLitElement { @property({ type: String }) path: string = ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-image.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-image.element.ts similarity index 91% rename from src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-image.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-image.element.ts index fbd5715feb..84f26c9333 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-image.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-image.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-input-upload-field-image') -export class UmbInputUploadFieldImageElement extends UmbLitElement { +export default class UmbInputUploadFieldImageElement extends UmbLitElement { @property({ type: String }) path = ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-svg.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts similarity index 93% rename from src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-svg.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts index 63fd7ca738..0ea86c186a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-svg.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-input-upload-field-svg') -export class UmbInputUploadFieldSvgElement extends UmbLitElement { +export default class UmbInputUploadFieldSvgElement extends UmbLitElement { @property({ type: String }) path = ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-video.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-video.element.ts similarity index 90% rename from src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-video.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-video.element.ts index 477c1858bb..c2821b9b1a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field-video.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-video.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property, css } from '@umbraco-cms/backoffice/exte import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @customElement('umb-input-upload-field-video') -export class UmbInputUploadFieldVideoElement extends UmbLitElement { +export default class UmbInputUploadFieldVideoElement extends UmbLitElement { @property({ type: String }) path = ''; 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 new file mode 100644 index 0000000000..4fca63ae09 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/manifest.ts @@ -0,0 +1,40 @@ +import type { ManifestFileUploadPreview, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +const previews: Array = [ + { + type: 'fileUploadPreview', + alias: 'Umb.FileUploadPreview.Audio', + name: 'Audio File Upload Preview', + element: () => import('./input-upload-field-audio.element.js'), + forMimeTypes: ['audio/*'], + }, + { + type: 'fileUploadPreview', + alias: 'Umb.FileUploadPreview.File', + name: 'File File Upload Preview', + element: () => import('./input-upload-field-file.element.js'), + }, + { + type: 'fileUploadPreview', + alias: 'Umb.FileUploadPreview.Image', + name: 'Image File Upload Preview', + element: () => import('./input-upload-field-image.element.js'), + forMimeTypes: ['image/*'], + }, + { + type: 'fileUploadPreview', + alias: 'Umb.FileUploadPreview.Svg', + name: 'Svg File Upload Preview', + element: () => import('./input-upload-field-svg.element.js'), + forMimeTypes: ['image/svg+xml'], + }, + { + type: 'fileUploadPreview', + alias: 'Umb.FileUploadPreview.Video', + name: 'Video File Upload Preview', + element: () => import('./input-upload-field-video.element.js'), + forMimeTypes: ['video/*'], + }, +]; + +export const manifests: Array = [...previews]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/test.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/test.element.ts deleted file mode 100644 index 09adc8addc..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/test.element.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -@customElement('umb-pdf-preview') -export class UmbPDFPreviewElement extends UmbLitElement { - @property({ attribute: false }) - file?: File; - - @property({ type: String }) - path?: string; - - override render() { - if (!this.path) return html``; - - return html`This is the path: ${this.path} & the file is named ${this.file?.name}`; - } - - static override styles = [ - css` - :host { - display: flex; - background-color: #fff; - background-image: url('data:image/svg+xml;charset=utf-8,'); - background-repeat: repeat; - background-size: 10px 10px; - height: 100%; - min-height: 240px; - position: relative; - width: fit-content; - max-height: 240px; - } - - img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - width: auto; - height: auto; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-pdf-preview': UmbPDFPreviewElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts index 64ef9c80d7..c63a81573f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts @@ -11,6 +11,7 @@ import { manifests as searchManifests } from './search/manifests.js'; import { manifests as sectionViewManifests } from './section-view/manifests.js'; import { manifests as treeManifests } from './tree/manifests.js'; import { manifests as workspaceManifests } from './workspace/manifests.js'; +import { manifests as fileUploadPreviewManifests } from './components/input-upload-field/manifests.js'; import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const manifests: Array = [ @@ -27,4 +28,5 @@ export const manifests: Array = [ ...sectionViewManifests, ...treeManifests, ...workspaceManifests, + ...fileUploadPreviewManifests, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/manifests.ts index a5aca4d748..311f8d61b9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/manifests.ts @@ -1,9 +1,5 @@ import { manifest as schemaManifest } from './Umbraco.UploadField.js'; -import type { - ManifestFileUploadPreview, - ManifestPropertyEditorUi, - ManifestTypes, -} from '@umbraco-cms/backoffice/extension-registry'; +import type { ManifestPropertyEditorUi, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; const manifest: ManifestPropertyEditorUi = { type: 'propertyEditorUi', @@ -18,13 +14,4 @@ const manifest: ManifestPropertyEditorUi = { }, }; -/** Testing */ -const previews: ManifestFileUploadPreview = { - type: 'fileUploadPreview', - alias: 'My PDF Showcase', - name: 'PDF Showcase', - element: () => import('./test.element.js'), - forMimeTypes: ['application/pdf'], -}; - -export const manifests: Array = [manifest, schemaManifest, previews]; +export const manifests: Array = [manifest, schemaManifest]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/test.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/test.element.ts deleted file mode 100644 index 65072a1316..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/upload-field/test.element.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -@customElement('umb-pdf-preview') -export default class UmbPDFPreviewElement extends UmbLitElement { - @property({ attribute: false }) - file?: File; - - @property({ type: String }) - path?: string; - - override render() { - if (!this.path) return html``; - - return html`This is the path: ${this.path} & the file is named ${this.file?.name}`; - } - - static override styles = [ - css` - :host { - display: flex; - background-color: #fff; - background-image: url('data:image/svg+xml;charset=utf-8,'); - background-repeat: repeat; - background-size: 10px 10px; - height: 100%; - min-height: 240px; - position: relative; - width: fit-content; - max-height: 240px; - } - - img { - max-width: 100%; - max-height: 100%; - object-fit: contain; - width: auto; - height: auto; - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-pdf-preview': UmbPDFPreviewElement; - } -}