Fix bug uploading an image via the Media Picker is no longer automatically selected

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

@@ -44,14 +44,8 @@ export class UmbInputDropzoneElement extends UmbFormControlMixin<UmbUploadableIt
 	/**
 	 * Disable folder uploads.
 	 */
-	@property({ type: Boolean, attribute: 'disable-folder-upload', reflect: true })
-	public set disableFolderUpload(isAllowed: boolean) {
-		this.#manager.setIsFoldersAllowed(!isAllowed);
-	}
-	public get disableFolderUpload() {
-		return this._disableFolderUpload;
-	}
-	private readonly _disableFolderUpload = false;
+	@property({ type: Boolean, attribute: 'disable-folder-upload' })
+	disableFolderUpload: boolean = false;
 
 	/**
 	 * Disables the dropzone.
@@ -78,20 +72,20 @@ export class UmbInputDropzoneElement extends UmbFormControlMixin<UmbUploadableIt
 	@state()
 	protected _progressItems: Array<UmbUploadableItem> = [];
 
-	#manager = new UmbDropzoneManager(this);
+	protected _manager = new UmbDropzoneManager(this);
 
 	constructor() {
 		super();
 
 		this.observe(
-			this.#manager.progress,
+			this._manager.progress,
 			(progress) =>
 				this.dispatchEvent(new ProgressEvent('progress', { loaded: progress.completed, total: progress.total })),
 			'_observeProgress',
 		);
 
 		this.observe(
-			this.#manager.progressItems,
+			this._manager.progressItems,
 			(progressItems) => {
 				this._progressItems = [...progressItems];
 				const waiting = this._progressItems.find((item) => item.status === UmbFileDropzoneItemStatus.WAITING);
@@ -106,7 +100,7 @@ export class UmbInputDropzoneElement extends UmbFormControlMixin<UmbUploadableIt
 
 	override disconnectedCallback(): void {
 		super.disconnectedCallback();
-		this.#manager.destroy();
+		this._manager.destroy();
 	}
 
 	/**
@@ -218,7 +212,7 @@ export class UmbInputDropzoneElement extends UmbFormControlMixin<UmbUploadableIt
 		if (this.disabled) return;
 		if (!e.detail.files.length && !e.detail.folders.length) return;
 
-		const uploadables = this.#manager.createTemporaryFiles(e.detail.files);
+		const uploadables = this._manager.createTemporaryFiles(e.detail.files);
 		this.dispatchEvent(new UmbDropzoneSubmittedEvent(await uploadables));
 	}
 
@@ -233,7 +227,7 @@ export class UmbInputDropzoneElement extends UmbFormControlMixin<UmbUploadableIt
 	}
 
 	#handleRemove() {
-		this.#manager.removeAll();
+		this._manager.removeAll();
 	}
 
 	static override readonly styles = [

src/Umbraco.Web.UI.Client/src/packages/media/dropzone/dropzone-manager.class.ts

@@ -35,6 +35,9 @@ import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-
  */
 export class UmbDropzoneManager extends UmbControllerBase {
 	readonly #host: UmbControllerHost;
+	/**
+	 * @deprecated Not used anymore; this method will be removed in Umbraco 17.
+	 */
 	#isFoldersAllowed = true;
 
 	#mediaTypeStructure = new UmbMediaTypeStructureRepository(this);
@@ -66,10 +69,16 @@ export class UmbDropzoneManager extends UmbControllerBase {
 		});
 	}
 
+	/**
+	 * @deprecated Not used anymore; this method will be removed in Umbraco 17.
+	 */
 	public setIsFoldersAllowed(isAllowed: boolean) {
 		this.#isFoldersAllowed = isAllowed;
 	}
 
+	/**
+	 * @deprecated Not used anymore; this method will be removed in Umbraco 17.
+	 */
 	public getIsFoldersAllowed(): boolean {
 		return this.#isFoldersAllowed;
 	}
@@ -80,7 +89,6 @@ export class UmbDropzoneManager extends UmbControllerBase {
 	/**
 	 * Uploads files and folders to the server and creates the media items with corresponding media type.\
 	 * Allows the user to pick a media type option if multiple types are allowed.
-	 * @deprecated Use the {@link UmbDropzoneMediaManager} class instead. This will be removed in Umbraco 18.
 	 * @param {UmbFileDropzoneDroppedItems} items - The files and folders to upload.
 	 * @param {string | null} parentUnique - Where the items should be uploaded.
 	 * @returns {Array<UmbUploadableItem>} - The items about to be uploaded.

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

@@ -1,4 +1,3 @@
-import { UmbDropzoneMediaManager } from './dropzone-media-manager.class.js';
 import {
 	UmbInputDropzoneElement,
 	UmbFileDropzoneItemStatus,
@@ -29,8 +28,6 @@ export class UmbDropzoneMediaElement extends UmbInputDropzoneElement {
 	@property({ type: Boolean, attribute: 'create-as-temporary' })
 	createAsTemporary: boolean = false;
 
-	#dropzoneManager = new UmbDropzoneMediaManager(this);
-
 	/**
 	 * @deprecated Please use `getItems()` instead; this method will be removed in Umbraco 17.
 	 * @returns {Array<UmbUploadableItem>} An array of uploadable items.
@@ -45,8 +42,8 @@ export class UmbDropzoneMediaElement extends UmbInputDropzoneElement {
 		return this._progressItems;
 	}
 
-	public progressItems = () => this.#dropzoneManager.progressItems;
-	public progress = () => this.#dropzoneManager.progress;
+	public progressItems = () => this._manager.progressItems;
+	public progress = () => this._manager.progress;
 
 	constructor() {
 		super();
@@ -56,20 +53,19 @@ export class UmbDropzoneMediaElement extends UmbInputDropzoneElement {
 		document.addEventListener('drop', this.#handleDrop.bind(this));
 
 		this.observe(
-			this.#dropzoneManager.progressItems,
+			this._manager.progressItems,
 			(progressItems: Array<UmbUploadableItem>) => {
 				const waiting = progressItems.find((item) => item.status === UmbFileDropzoneItemStatus.WAITING);
 				if (progressItems.length && !waiting) {
 					this.dispatchEvent(new CustomEvent('complete', { detail: progressItems }));
 				}
 			},
-			'_observeProgressItems',
+			'_observeProgressItemsComplete',
 		);
 	}
 
 	override disconnectedCallback(): void {
 		super.disconnectedCallback();
-		this.#dropzoneManager.destroy();
 		document.removeEventListener('dragenter', this.#handleDragEnter.bind(this));
 		document.removeEventListener('dragleave', this.#handleDragLeave.bind(this));
 		document.removeEventListener('drop', this.#handleDrop.bind(this));
@@ -80,10 +76,10 @@ export class UmbDropzoneMediaElement extends UmbInputDropzoneElement {
 		if (!event.detail.files.length && !event.detail.folders.length) return;
 
 		if (this.createAsTemporary) {
-			const uploadable = this.#dropzoneManager.createTemporaryFiles(event.detail.files);
+			const uploadable = this._manager.createTemporaryFiles(event.detail.files);
 			this.dispatchEvent(new UmbDropzoneSubmittedEvent(await uploadable));
 		} else {
-			const uploadable = this.#dropzoneManager.createMediaItems(event.detail, this.parentUnique);
+			const uploadable = this._manager.createMediaItems(event.detail, this.parentUnique);
 			this.dispatchEvent(new UmbDropzoneSubmittedEvent(uploadable));
 		}
 	}

src/Umbraco.Web.UI.Client/src/packages/media/media/dropzone/index.ts

@@ -1,3 +1,2 @@
-export * from './dropzone-media-manager.class.js';
 export * from './dropzone-media.element.js';
 export * from './dropzone.element.js';

src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts

@@ -6,6 +6,7 @@ import { UmbMediaSearchProvider } from '../../search/index.js';
 import type { UmbMediaPathModel } from './types.js';
 import type { UmbMediaPickerFolderPathElement } from './components/media-picker-folder-path.element.js';
 import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from './media-picker-modal.token.js';
+import type { UmbDropzoneChangeEvent, UmbUploadableItem } from '@umbraco-cms/backoffice/dropzone';
 import type { UmbDropzoneMediaElement } from '@umbraco-cms/backoffice/media';
 import {
 	css,
@@ -116,7 +117,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
 		this.#loadChildrenOfCurrentMediaItem();
 	}
 
-	async #loadChildrenOfCurrentMediaItem() {
+	async #loadChildrenOfCurrentMediaItem(selectedItems?: Array<UmbUploadableItem>) {
 		const key = this._currentMediaEntity.entityType + this._currentMediaEntity.unique;
 		let paginationManager = this.#pagingMap.get(key);
 
@@ -143,6 +144,18 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
 		paginationManager.setTotalItems(data?.total ?? 0);
 		this._currentPage = paginationManager.getCurrentPageNumber();
 		this._currentTotalPages = paginationManager.getTotalPages();
+
+		if (selectedItems?.length) {
+			const selectedItem = this._currentChildren.find((x) => x.unique == selectedItems[0].unique);
+			if (selectedItem) {
+				this.#onSelected(selectedItem);
+			}
+		}
+	}
+
+	#onDropzoneChange(evt: UmbDropzoneChangeEvent) {
+		const target = evt.target as UmbDropzoneMediaElement;
+		this.#loadChildrenOfCurrentMediaItem(target.value);
 	}
 
 	#onOpen(item: UmbMediaTreeItemModel | UmbMediaSearchItemModel) {
@@ -290,7 +303,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPick
 			<umb-dropzone-media
 				id="dropzone"
 				multiple
-				@complete=${this.#loadChildrenOfCurrentMediaItem}
+				@change=${this.#onDropzoneChange}
 				.parentUnique=${this._currentMediaEntity.unique}></umb-dropzone-media>
 			${this._searchQuery ? this.#renderSearchResult() : this.#renderCurrentChildren()} `;
 	}