V15: File upload should use better Image & SVG preview

[iOvergaard]

Description

Similar to #18899, this changes the preview of SVGs on the Upload Field to use <uui-card-media />.

Fixes #18861

Changes

• Adds same preview for SVG and Image using <uui-card-media />
• Adds loading="lazy" on SVG and Image
• Ensures that neither SVG nor Image can exceed its bounds (try testing with width: 10000px for example)
• Adds a title attribute on Audio and Video

Screenshots

JPG/PNG

🔴 BEFORE

✅ AFTER

SVG

🔴 BEFORE

✅ AFTER

[Copilot]

Pull Request Overview

This PR updates the SVG preview in the Upload Field to use the component, improving the visual presentation of SVG uploads.

• Introduces a computed property to extract the file name from the file path.
• Replaces the simple element with a wrapper that includes an anchor for the image.
• Updates styling to target the inner image instead of the host.

Comments suppressed due to low confidence (2)

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

• [nitpick] Consider renaming '#label' to a more descriptive name like 'extractedFileName' for improved clarity.

get #label() {

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

• Consider using property binding for the 'href' attribute (e.g., .href=${this.path}) instead of a string literal to ensure reactive updates align with the other bindings.

return html`<uui-card-media .name=${this.#label} href="${this.path}" target="_blank">`;

[Copilot]

Pull Request Overview

This PR enhances the file upload preview functionality by wrapping image and SVG previews in a uui-card-media component. It extracts a label from the file path for improved accessibility and adjusts CSS styling for better layout control.

• Replace plain tags with uui-card-media wrappers.
• Introduce a private getter to extract file labels from paths.
• Update CSS to improve layout consistency and background styling.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts	Changed SVG preview rendering using uui-card-media and updated CSS styling
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-image.element.ts	Changed image preview rendering using uui-card-media and updated CSS styling
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts	Updated CSS on the wrapper element for layout improvements

Comments suppressed due to low confidence (2)

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

• Changing the wrapper's width to 100% could potentially alter the intended layout behavior compared to the previous 'fit-content' setting. Please confirm that this update aligns with the design requirements.

width: 100%;

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

• [nitpick] Consider adding tests to validate that the label extraction logic from the file path works correctly, ensuring that the correct value is passed to the uui-card-media component.

const label = this.#label;

[leekelleher]

Looking good! 🚀

I've added a little spacing between the preview and the remove button; as hovering over the remove button looked like it slightly overlapped the bottom of the preview.