V16: Media Picker property editor does not handle dropped files appropriately (#19900)

* fix: make it clear that the clearUploads button is used to "Clear file(s)" and not necessarily remove them (from the dropzone)

* fix: adds extra null-check to avoid browser error on failed uploads

* fix: adds check that no media files are added twice (or more) to the media picker

* fix: adds try/catch around confirm modal to avoid browser error in case user cancels

* fix: change from deprecated 'complete' event to 'change' event and filter out non-successful files

* chore: sort imports

* feat: renders the 'add' button even if the limits have been exceeded

* feat: shows all values as cards even if the media item does not exist so the user has a chance to update the value

* feat: shows all values as cards even if the media item does not exist so the user has a chance to update the value

* feat: adds localization to the media picker context

* feat: uses the media picker context to control the picker

this also fixes an issue where already selected items were not preselected when opening the picker again

* feat: adds a bit of margin between the dropzone and media picker itself

Author: iOvergaard

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -293,7 +293,7 @@ export default {
 		notCreated: 'Ikke oprettet',
 		updateDate: 'Sidst redigeret',
 		updateDateDesc: 'Tidspunkt for seneste redigering',
-		uploadClear: 'Fjern fil',
+		uploadClear: 'Fjern fil(er)',
 		uploadClearImageContext: 'Klik her for at fjerne billedet fra medie filen',
 		uploadClearFileContext: 'Klik her for at fjerne filen fra medie filen',
 		urls: 'Link til dokument',

src/Umbraco.Web.UI.Client/src/assets/lang/de.ts

@@ -277,7 +277,7 @@ export default {
 		notCreated: 'Nicht angelegt',
 		updateDate: 'Zuletzt bearbeitet am',
 		updateDateDesc: 'Letzter Änderungszeitpunkt des Dokuments',
-		uploadClear: 'Datei entfernen',
+		uploadClear: 'Datei(en) entfernen',
 		uploadClearImageContext: 'Klicke hier um das das Bild vom Medienelement zu entfernen.',
 		uploadClearFileContext: 'Klicke hier um das das Bild vom Medienelement zu entfernen.',
 		urls: 'Link zum Dokument',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -176,7 +176,7 @@ export default {
 		confirmActionConfirm: 'Confirm',
 		morePublishingOptions: 'More publishing options',
 		submitChanges: 'Submit',
-		viewSystemDetails:"View Umbraco CMS system information and version number"
+		viewSystemDetails: 'View Umbraco CMS system information and version number',
 	},
 	auditTrailsMedia: {
 		delete: 'Media deleted',
@@ -295,7 +295,7 @@ export default {
 		notCreated: 'Not created',
 		updateDate: 'Last edited',
 		updateDateDesc: 'Date/time this document was edited',
-		uploadClear: 'Remove file(s)',
+		uploadClear: 'Clear file(s)',
 		uploadClearImageContext: 'Click here to remove the image from the media item',
 		uploadClearFileContext: 'Click here to remove the file from the media item',
 		urls: 'Link to document',

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts

@@ -112,8 +112,8 @@ export class UmbPickerInputContext<
 
 		await umbConfirmModal(this, {
 			color: 'danger',
-			headline: `Remove ${item.name}?`,
-			content: 'Are you sure you want to remove this item',
+			headline: `#actions_remove ${item.name}?`,
+			content: `#defaultdialogs_confirmremove ${item.name}?`,
 			confirmLabel: '#actions_remove',
 		});
 

src/Umbraco.Web.UI.Client/src/packages/media/dropzone/components/input-dropzone/input-dropzone.element.ts

@@ -170,7 +170,8 @@ export class UmbInputDropzoneElement extends UmbFormControlMixin<UmbUploadableIt
 					compact
 					@click=${this.#handleRemove}
 					label=${this.localize.term('content_uploadClear')}>
-					<uui-icon name="icon-trash"></uui-icon>${this.localize.term('content_uploadClear')}
+					<uui-icon name="icon-trash"></uui-icon>
+					<umb-localize key="content_uploadClear">Clear file(s)</umb-localize>
 				</uui-button>
 			</div>
 		`;

src/Umbraco.Web.UI.Client/src/packages/media/imaging/imaging.repository.ts

@@ -51,7 +51,7 @@ export class UmbImagingRepository extends UmbRepositoryBase implements UmbApi {
 				continue;
 			}
 
-			const url = urlModels?.[0].url;
+			const url = urlModels?.[0]?.url;
 
 			this.#dataStore.addCrop(unique, url ?? '', imagingModel);
 

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts

@@ -177,7 +177,7 @@ export class UmbInputImageCropperElement extends UmbFormControlMixin<
 			<umb-image-cropper-field .value=${this.value} .file=${this._file?.temporaryFile?.file} @change=${this.#onChange}>
 				<uui-button slot="actions" compact label=${this.localize.term('content_uploadClear')} @click=${this.#onRemove}>
 					<uui-icon name="icon-trash"></uui-icon>
-					<umb-localize key="content_uploadClear">Remove file(s)</umb-localize>
+					<umb-localize key="content_uploadClear">Clear file(s)</umb-localize>
 				</uui-button>
 			</umb-image-cropper-field>
 		`;

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts

@@ -1,9 +1,10 @@
-import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
+import { UMB_IMAGE_CROPPER_EDITOR_MODAL } from '../../modals/index.js';
 import type { UmbMediaItemModel, UmbCropModel, UmbMediaPickerPropertyValueEntry } from '../../types.js';
 import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/constants.js';
-import type { UmbUploadableItem } from '@umbraco-cms/backoffice/dropzone';
-import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
-import { umbConfirmModal, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UmbMediaPickerInputContext } from '../input-media/input-media.context.js';
+import { UmbFileDropzoneItemStatus } from '@umbraco-cms/backoffice/dropzone';
+import type { UmbDropzoneChangeEvent } from '@umbraco-cms/backoffice/dropzone';
+import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -14,6 +15,7 @@ import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
+import { UMB_MEDIA_TYPE_ENTITY_TYPE } from '@umbraco-cms/backoffice/media-type';
 
 import '@umbraco-cms/backoffice/imaging';
 
@@ -24,6 +26,7 @@ type UmbRichMediaCardModel = {
 	src?: string;
 	icon?: string;
 	isTrashed?: boolean;
+	isLoading?: boolean;
 };
 
 @customElement('umb-input-rich-media')
@@ -99,6 +102,7 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 	public override set value(value: Array<UmbMediaPickerPropertyValueEntry> | undefined) {
 		super.value = value;
 		this.#sorter.setModel(value);
+		this.#pickerContext.setSelection(value?.map((item) => item.mediaKey) ?? []);
 		this.#itemManager.setUniques(value?.map((x) => x.mediaKey));
 		// Maybe the new value is using an existing media, and there we need to update the cards despite no repository update.
 		this.#populateCards();
@@ -175,6 +179,8 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 
 	readonly #itemManager = new UmbRepositoryItemsManager<UmbMediaItemModel>(this, UMB_MEDIA_ITEM_REPOSITORY_ALIAS);
 
+	readonly #pickerContext = new UmbMediaPickerInputContext(this);
+
 	constructor() {
 		super();
 
@@ -228,6 +234,10 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 				this._routeBuilder = routeBuilder;
 			});
 
+		this.observe(this.#pickerContext.selection, (selection) => {
+			this.#addItems(selection);
+		});
+
 		this.addValidator(
 			'valueMissing',
 			() => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
@@ -262,16 +272,6 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 	async #populateCards() {
 		const mediaItems = this.#itemManager.getItems();
 
-		if (!mediaItems.length) {
-			this._cards = [];
-			return;
-		}
-		// Check if all media items is loaded.
-		// But notice, it would be nicer UX if we could show a loading state on the cards that are missing(loading) their items.
-		const missingCards = mediaItems.filter((item) => !this._cards.find((card) => card.unique === item.unique));
-		const removedCards = this._cards.filter((card) => !mediaItems.find((item) => card.unique === item.unique));
-		if (missingCards.length === 0 && removedCards.length === 0) return;
-
 		this._cards =
 			this.value?.map((item) => {
 				const media = mediaItems.find((x) => x.unique === item.mediaKey);
@@ -281,6 +281,7 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 					name: media?.name ?? '',
 					icon: media?.mediaType?.icon,
 					isTrashed: media?.isTrashed ?? false,
+					isLoading: !media,
 				};
 			}) ?? [];
 	}
@@ -292,7 +293,10 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 		return true;
 	};
 
-	#addItems(uniques: string[]) {
+	#addItems(additionalMediaKeys: string[]) {
+		// Check that the unique is not already added
+		const uniques = additionalMediaKeys.filter((key) => !this.value?.some((item) => item.mediaKey === key));
+
 		if (!uniques.length) return;
 
 		const additions: Array<UmbMediaPickerPropertyValueEntry> = uniques.map((unique) => ({
@@ -307,40 +311,40 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
-	async #openPicker() {
-		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-		const modalHandler = modalManager?.open(this, UMB_MEDIA_PICKER_MODAL, {
-			data: {
+	#openPicker() {
+		this.#pickerContext.openPicker(
+			{
 				multiple: this.multiple,
 				startNode: this.startNode,
 				pickableFilter: this.#pickableFilter,
 			},
-			value: { selection: [] },
-		});
-
-		const data = await modalHandler?.onSubmit().catch(() => null);
-		if (!data) return;
-
-		const selection = data.selection.filter((x) => x !== null) as string[];
-		this.#addItems(selection);
+			{
+				allowedContentTypes: this.allowedContentTypeIds?.map((id) => ({
+					unique: id,
+					entityType: UMB_MEDIA_TYPE_ENTITY_TYPE,
+				})),
+				includeTrashed: false,
+			},
+		);
 	}
 
 	async #onRemove(item: UmbRichMediaCardModel) {
-		await umbConfirmModal(this, {
-			color: 'danger',
-			headline: `${this.localize.term('actions_remove')} ${item.name}?`,
-			content: `${this.localize.term('defaultdialogs_confirmremove')} ${item.name}?`,
-			confirmLabel: this.localize.term('actions_remove'),
-		});
-
-		this.value = this.value?.filter((x) => x.key !== item.unique);
-
-		this.dispatchEvent(new UmbChangeEvent());
+		try {
+			await this.#pickerContext.requestRemoveItem(item.media);
+			this.value = this.value?.filter((x) => x.key !== item.unique);
+			this.dispatchEvent(new UmbChangeEvent());
+		} catch {
+			// User cancelled the action
+		}
 	}
 
-	async #onUploadCompleted(e: CustomEvent) {
-		const completed = e.detail as Array<UmbUploadableItem>;
-		const uploaded = completed.map((file) => file.unique);
+	async #onUploadCompleted(e: UmbDropzoneChangeEvent) {
+		if (this.readonly) return;
+
+		// If there are any finished uploadable items, we need to add them to the value
+		const uploaded = e.items
+			.filter((file) => file.status === UmbFileDropzoneItemStatus.COMPLETE)
+			.map((file) => file.unique);
 		this.#addItems(uploaded);
 	}
 
@@ -351,16 +355,17 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 		`;
 	}
 
+	// TODO: Consider removing the "progress element" from the dropzone and render that using a context instead. This would allow the media picker to show inline progress items instead [JOV]
 	#renderDropzone() {
 		if (this.readonly) return nothing;
-		if (this._cards && this._cards.length >= this.max) return;
 		return html`<umb-dropzone-media
-			?multiple=${this.max > 1}
-			@complete=${this.#onUploadCompleted}></umb-dropzone-media>`;
+			id="dropzone"
+			?multiple=${this.multiple}
+			@change=${this.#onUploadCompleted}></umb-dropzone-media>`;
 	}
 
 	#renderItems() {
-		if (!this._cards.length) return;
+		if (!this._cards.length) return nothing;
 		return html`
 			${repeat(
 				this._cards,
@@ -371,37 +376,39 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 	}
 
 	#renderAddButton() {
-		if (this._cards && this._cards.length && !this.multiple) return;
-		if (this.readonly && this._cards.length > 0) {
-			return nothing;
-		} else {
-			return html`
-				<uui-button
-					id="btn-add"
-					look="placeholder"
-					@blur=${() => {
-						this.pristine = false;
-						this.checkValidity();
-					}}
-					@click=${this.#openPicker}
-					label=${this.localize.term('general_choose')}
-					?disabled=${this.readonly}>
-					<uui-icon name="icon-add"></uui-icon>
-					${this.localize.term('general_choose')}
-				</uui-button>
-			`;
-		}
+		if (this.readonly) return nothing;
+		return html`
+			<uui-button
+				id="btn-add"
+				look="placeholder"
+				@blur=${() => {
+					this.pristine = false;
+					this.checkValidity();
+				}}
+				@click=${this.#openPicker}
+				label=${this.localize.term('general_choose')}
+				?disabled=${this.readonly}>
+				<uui-icon name="icon-add"></uui-icon>
+				${this.localize.term('general_choose')}
+			</uui-button>
+		`;
 	}
 
 	#renderItem(item: UmbRichMediaCardModel) {
 		if (!item.unique) return nothing;
 		const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
 		return html`
 			<uui-card-media id=${item.unique} name=${item.name} .href=${href} ?readonly=${this.readonly}>
-				<umb-imaging-thumbnail
-					unique=${item.media}
-					alt=${item.name}
-					icon=${item.icon ?? 'icon-picture'}></umb-imaging-thumbnail>
+				${when(
+					item.isLoading,
+					() => html`<uui-loader-circle></uui-loader-circle>`,
+					() => html`
+						<umb-imaging-thumbnail
+							unique=${item.media}
+							alt=${item.name}
+							icon=${item.icon ?? 'icon-picture'}></umb-imaging-thumbnail>
+					`,
+				)}
 				${this.#renderIsTrashed(item)} ${this.#renderActions(item)}
 			</uui-card-media>
 		`;
@@ -427,7 +434,7 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 		`;
 	}
 
-	static override styles = [
+	static override readonly styles = [
 		css`
 			:host {
 				position: relative;
@@ -439,6 +446,10 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 				grid-auto-rows: var(--umb-card-medium-min-width);
 			}
 
+			#dropzone {
+				margin-bottom: var(--uui-size-space-5);
+			}
+
 			#btn-add {
 				text-align: center;
 				height: 100%;

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

@@ -201,7 +201,8 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	#renderButtonRemove() {
 		return html`
 			<uui-button compact @click=${this.#handleRemove} label=${this.localize.term('content_uploadClear')}>
-				<uui-icon name="icon-trash"></uui-icon>${this.localize.term('content_uploadClear')}
+				<uui-icon name="icon-trash"></uui-icon>
+				<umb-localize key="content_uploadClear">Clear file(s)</umb-localize>
 			</uui-button>
 		`;
 	}