yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrects filename label on the Upload File component (#18205)

Browse Source 
* Corrects input upload filename label

Fixes #18195

* Refactored input upload file code
This commit is contained in:
Lee Kelleher
2025-02-03 12:12:19 +00:00
committed by GitHub
parent 2cdcacb9a8
commit ee231c7bae
1 changed files with 30 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts
View File

@@ -1,11 +1,15 @@
import { html, customElement, property, state, css, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-input-upload-field-file')
export default class UmbInputUploadFieldFileElement extends UmbLitElement {
@property({ type: String })
#loadingText = `(${this.localize.term('general_loading')}...)`;
#serverUrl = '';
@property()
path: string = '';
/**
@@ -22,53 +26,39 @@ export default class UmbInputUploadFieldFileElement extends UmbLitElement {
@state()
label = '';
#serverUrl = '';
#loadingText = `(${this.localize.term('general_loading')}...)`;
/**
*
*/
constructor() {
super();
this.consumeContext(UMB_APP_CONTEXT, (instance) => {
this.#serverUrl = instance.getServerUrl();
}).asPromise();
});
}
protected override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
super.updated(_changedProperties);
if (_changedProperties.has('file') && this.file) {
this.extension = this.file.name.split('.').pop() ?? '';
this.label = this.file.name || this.#loadingText;
}
if (_changedProperties.has('path')) {
if (this.#serverUrl) {
if (this.file) return;
this.extension = this.path.split('.').pop() ?? '';
this.label = this.#serverUrl ? this.path.substring(this.#serverUrl.length) : this.#loadingText;
}
if (_changedProperties.has('path') && !this.file) {
this.extension = this.path.split('.').pop() ?? '';
this.label = this.path.split('/').pop() ?? this.#loadingText;
}
}
#renderLabel() {
if (this.path) {
// Don't make it a link if it's a temp file upload.
return this.file ? this.label : html`<a id="label" href=${this.path} target="_blank">${this.label}</a>`;
}
return html`<span id="label">${this.label}</span>`;
}
override render() {
if (!this.label && !this.extension) return html`<uui-loader></uui-loader>`;
return html`
<div id="main">
<uui-symbol-file id="file-symbol" .type=${this.extension}></uui-symbol-file>
${this.#renderLabel()}
${when(
!this.file && this.path,
() => html`<a id="label" href="${this.#serverUrl}${this.path}" target="_blank">${this.label}</a>`,
() => html`<span id="label">${this.label}</span>`,
)}
</div>
`;
}
@@ -81,26 +71,30 @@ export default class UmbInputUploadFieldFileElement extends UmbLitElement {
box-sizing: border-box;
color: var(--uui-color-text);
}
#file-symbol {
aspect-ratio: 1 / 1;
margin: auto;
max-width: 100%;
max-height: 100%;
}
#label {
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--uui-color-text);
}
a#label {
text-decoration: none;
color: var(--uui-color-interactive);
}
a#label:hover {
text-decoration: underline;
color: var(--uui-color-interactive-emphasis);
&:is(a) {
text-decoration: none;
color: var(--uui-color-interactive);
&:hover {
text-decoration: underline;
color: var(--uui-color-interactive-emphasis);
}
}
}
`,
];