@umbraco-cms/backoffice 16.1.1 → 16.2.0-rc

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-search-input.element.js

@@ -7,12 +7,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer-workspace.context-token.js';
 import { UMB_LOG_VIEWER_SAVE_SEARCH_MODAL } from './log-viewer-search-input-modal.modal-token.js';
 import { css, html, customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
-import { Subject, debounceTime, tap } from '@umbraco-cms/backoffice/external/rxjs';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { escapeHTML } from '@umbraco-cms/backoffice/utils';
 import { query as getQuery, path, toQueryString } from '@umbraco-cms/backoffice/router';
+import { Subject, debounceTime, tap } from '@umbraco-cms/backoffice/external/rxjs';
 import { umbConfirmModal, umbOpenModal } from '@umbraco-cms/backoffice/modal';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import './log-viewer-search-input-modal.element.js';
 let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extends UmbLitElement {
+    // TODO: Revisit this code, to not use RxJS directly:
+    #inputQuery$;
     #logViewerContext;
     constructor() {
         super();
@@ -21,13 +24,13 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
         this._showLoader = false;
         this._isQuerySaved = false;
         // TODO: Revisit this code, to not use RxJS directly:
-        this.inputQuery$ = new Subject();
+        this.#inputQuery$ = new Subject();
         this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
             this.#logViewerContext = instance;
             this.#observeStuff();
             this.#logViewerContext?.getSavedSearches();
         });
-        this.inputQuery$
+        this.#inputQuery$
             .pipe(tap(() => (this._showLoader = true)), debounceTime(250))
             .subscribe((query) => {
             this.#logViewerContext?.setFilterExpression(query);
@@ -50,10 +53,10 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
     }
     #setQuery(event) {
         const target = event.target;
-        this.inputQuery$.next(target.value);
+        this.#inputQuery$.next(target.value);
     }
     #setQueryFromSavedSearch(query) {
-        this.inputQuery$.next(query);
+        this.#inputQuery$.next(query);
         this._searchDropdownElement.open = false;
     }
     #persist(filter) {
@@ -65,7 +68,7 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
         window.history.pushState({}, '', `${path()}?${toQueryString(query)}`);
     }
     #clearQuery() {
-        this.inputQuery$.next('');
+        this.#inputQuery$.next('');
         this.#logViewerContext?.setFilterExpression('');
     }
     #saveSearch(savedSearch) {
@@ -74,7 +77,7 @@ let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement extend
     async #removeSearch(name) {
         await umbConfirmModal(this, {
             headline: this.localize.term('logViewer_deleteSavedSearch'),
-            content: `${this.localize.term('defaultdialogs_confirmdelete')} ${name}?`,
+            content: this.localize.term('defaultdialogs_confirmdelete', escapeHTML(name)),
             color: 'danger',
             confirmLabel: 'Delete',
         });

package/dist-cms/packages/media/dropzone/components/input-dropzone/input-dropzone.element.d.ts

@@ -46,7 +46,7 @@ export declare class UmbInputDropzoneElement extends UmbInputDropzoneElement_bas
     protected _progressItems: Array<UmbUploadableItem>;
     protected _manager: UmbDropzoneManager;
     constructor();
-    _observeProgress(): void;
+    protected _observeProgress(): void;
     protected _observeProgressItems(): void;
     disconnectedCallback(): void;
     /**

package/dist-cms/packages/media/dropzone/components/input-dropzone/input-dropzone.element.js

@@ -119,7 +119,8 @@ let UmbInputDropzoneElement = class UmbInputDropzoneElement extends UmbFormContr
 					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>
 		`;

package/dist-cms/packages/media/imaging/imaging.repository.js

@@ -38,7 +38,7 @@ export class UmbImagingRepository extends UmbRepositoryBase {
                 console.error('[UmbImagingRepository] Error fetching items', error);
                 continue;
             }
-            const url = urlModels?.[0].url;
+            const url = urlModels?.[0]?.url;
             this.#dataStore.addCrop(unique, url ?? '', imagingModel);
             if (url) {
                 urls.set(unique, url);

package/dist-cms/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.d.ts

@@ -1,8 +1,8 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export declare class UmbMediaHistoryWorkspaceInfoAppElement extends UmbLitElement {
     #private;
-    _currentPageNumber: number;
-    _totalPages: number;
+    private _currentPageNumber;
+    private _totalPages;
     private _items;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.js

@@ -36,7 +36,9 @@ let UmbMediaHistoryWorkspaceInfoAppElement = class UmbMediaHistoryWorkspaceInfoA
         });
     }
     async #requestAuditLogs() {
-        const unique = this.#workspaceContext?.getUnique();
+        if (!this.#workspaceContext)
+            return;
+        const unique = this.#workspaceContext.getUnique();
         if (!unique)
             throw new Error('Media unique is required');
         const { data } = await this.#auditLogRepository.requestAuditLog({
@@ -120,9 +122,9 @@ let UmbMediaHistoryWorkspaceInfoAppElement = class UmbMediaHistoryWorkspaceInfoA
 							.current=${this._currentPageNumber}
 							.total=${this._totalPages}
 							firstlabel=${this.localize.term('general_first')}
-                            previouslabel=${this.localize.term('general_previous')}
-                            nextlabel=${this.localize.term('general_next')}
-                            lastlabel=${this.localize.term('general_last')}
+							previouslabel=${this.localize.term('general_previous')}
+							nextlabel=${this.localize.term('general_next')}
+							lastlabel=${this.localize.term('general_last')}
 							@change=${this.#onPageChange}></uui-pagination>
 					`
             : nothing}

package/dist-cms/packages/media/media/collection/views/table/media-table-collection-view.element.js

@@ -61,6 +61,7 @@ let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElemen
                     name: this.localize.string(item.header),
                     alias: item.alias,
                     elementName: item.elementName,
+                    labelTemplate: item.nameTemplate,
                     allowSorting: true,
                 };
             });

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.d.ts

@@ -8,7 +8,7 @@ export declare class UmbImageCropperFocusSetterElement extends UmbLitElement {
     wrapperElement?: HTMLElement;
     focalPointElement: HTMLElement;
     private _isDraggingGridHandle;
-    private coords;
+    private _coords;
     set focalPoint(value: UmbFocalPointModel);
     get focalPoint(): UmbFocalPointModel;
     hideFocalPoint: boolean;

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -13,7 +13,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     constructor() {
         super(...arguments);
         this._isDraggingGridHandle = false;
-        this.coords = { x: 0, y: 0 };
+        this._coords = { x: 0, y: 0 };
         this.#focalPoint = { left: 0.5, top: 0.5 };
         this.hideFocalPoint = false;
         this.disabled = false;
@@ -89,8 +89,8 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         if (!this.imageElement)
             return;
         // Init x and y coords from half of rendered image size, which is equavalient to focal point { left: 0.5, top: 0.5 }.
-        this.coords.x = this.imageElement?.clientWidth / 2;
-        this.coords.y = this.imageElement.clientHeight / 2;
+        this._coords.x = this.imageElement?.clientWidth / 2;
+        this._coords.y = this.imageElement.clientHeight / 2;
     }
     #handleGridDrag(event) {
         if (this.disabled || this.hideFocalPoint)
@@ -113,8 +113,8 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
                 // check if coordinates are not NaN (can happen when dragging outside of the grid)
                 if (isNaN(x) || isNaN(y))
                     return;
-                this.coords.x = x;
-                this.coords.y = y;
+                this._coords.x = x;
+                this._coords.y = y;
                 this.#setFocalPoint(x, y, width, height);
             },
             onStop: () => (this._isDraggingGridHandle = false),
@@ -152,23 +152,23 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
         const { width, height } = grid.getBoundingClientRect();
         if (event.key === 'ArrowLeft') {
             event.preventDefault();
-            this.coords.x = clamp(this.coords.x - increment, 0, width);
-            this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+            this._coords.x = clamp(this._coords.x - increment, 0, width);
+            this.#setFocalPoint(this._coords.x, this._coords.y, width, height);
         }
         if (event.key === 'ArrowRight') {
             event.preventDefault();
-            this.coords.x = clamp(this.coords.x + increment, 0, width);
-            this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+            this._coords.x = clamp(this._coords.x + increment, 0, width);
+            this.#setFocalPoint(this._coords.x, this._coords.y, width, height);
         }
         if (event.key === 'ArrowUp') {
             event.preventDefault();
-            this.coords.y = clamp(this.coords.y - increment, 0, height);
-            this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+            this._coords.y = clamp(this._coords.y - increment, 0, height);
+            this.#setFocalPoint(this._coords.x, this._coords.y, width, height);
         }
         if (event.key === 'ArrowDown') {
             event.preventDefault();
-            this.coords.y = clamp(this.coords.y + increment, 0, height);
-            this.#setFocalPoint(this.coords.x, this.coords.y, width, height);
+            this._coords.y = clamp(this._coords.y + increment, 0, height);
+            this.#setFocalPoint(this._coords.x, this._coords.y, width, height);
         }
     }
     render() {
@@ -257,7 +257,7 @@ __decorate([
 ], UmbImageCropperFocusSetterElement.prototype, "_isDraggingGridHandle", void 0);
 __decorate([
     state()
-], UmbImageCropperFocusSetterElement.prototype, "coords", void 0);
+], UmbImageCropperFocusSetterElement.prototype, "_coords", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbImageCropperFocusSetterElement.prototype, "focalPoint", null);

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper.element.d.ts

@@ -11,7 +11,6 @@ export declare class UmbImageCropperElement extends UmbLitElement {
     focalPoint: UmbImageCropperFocalPoint;
     get zoom(): number;
     set zoom(value: number);
-    _zoom: number;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbImageCropChangeEvent } from './crop-change.event.js';
 import { calculateExtrapolatedValue, clamp, inverseLerp, lerp } from '@umbraco-cms/backoffice/utils';
-import { customElement, property, query, state, css, html } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, property, query, css, html } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement {
     constructor() {
@@ -16,7 +16,7 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
             left: 0.5,
             top: 0.5,
         };
-        this._zoom = 0;
+        this.#zoom = 0;
         this.#VIEWPORT_PADDING = 50;
         this.#MAX_SCALE_FACTOR = 4;
         this.#SCROLL_ZOOM_SPEED = 0.001;
@@ -54,13 +54,14 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
         };
     }
     get zoom() {
-        return this._zoom;
+        return this.#zoom;
     }
     set zoom(value) {
         // Calculate the delta value - the value the zoom has changed b
-        const delta = value - this._zoom;
+        const delta = value - this.#zoom;
         this.#updateImageScale(delta);
     }
+    #zoom;
     #VIEWPORT_PADDING;
     #MAX_SCALE_FACTOR;
     #SCROLL_ZOOM_SPEED;
@@ -71,7 +72,7 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
     #mouseOffsetX;
     #mouseOffsetY;
     get #getImageScale() {
-        return lerp(this.#minImageScale, this.#maxImageScale, this._zoom);
+        return lerp(this.#minImageScale, this.#maxImageScale, this.#zoom);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -182,11 +183,11 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
         const currentScale = Math.max(currentScaleX, currentScaleY);
         // Calculate the zoom level based on the current scale
         // This finds the alpha value in the range of min and max scale.
-        this._zoom = inverseLerp(this.#minImageScale, this.#maxImageScale, currentScale);
+        this.#zoom = inverseLerp(this.#minImageScale, this.#maxImageScale, currentScale);
     }
     #updateImageScale(amount, mouseX, mouseY) {
         this.#oldImageScale = this.#getImageScale;
-        this._zoom = clamp(this._zoom + amount, 0, 1);
+        this.#zoom = clamp(this.zoom + amount, 0, 1);
         const newImageScale = this.#getImageScale;
         const mask = this.maskElement.getBoundingClientRect();
         const image = this.imageElement.getBoundingClientRect();
@@ -274,7 +275,7 @@ let UmbImageCropperElement = class UmbImageCropperElement extends UmbLitElement
 			</div>
 			<uui-slider
 				@input=${this.#onSliderUpdate}
-				.value=${this._zoom.toString()}
+				.value=${this.zoom.toString()}
 				hide-step-values
 				id="slider"
 				type="range"
@@ -370,9 +371,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], UmbImageCropperElement.prototype, "zoom", null);
-__decorate([
-    state()
-], UmbImageCropperElement.prototype, "_zoom", void 0);
 UmbImageCropperElement = __decorate([
     customElement('umb-image-cropper')
 ], UmbImageCropperElement);

package/dist-cms/packages/media/media/components/input-image-cropper/input-image-cropper.element.js

@@ -119,7 +119,7 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbF
 			<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>
 		`;

package/dist-cms/packages/media/media/components/input-media/input-media.element.js

@@ -59,6 +59,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
     }
     set value(selectionString) {
         this.selection = splitStringToArray(selectionString);
+        super.value = selectionString; // Call the parent setter to ensure the value change is triggered in the FormControlMixin. [NL]
     }
     get value() {
         return this.selection.length > 0 ? this.selection.join(',') : undefined;

package/dist-cms/packages/media/media/components/input-rich-media/input-rich-media.element.d.ts

@@ -65,7 +65,7 @@ export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_b
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
 }
 export default UmbInputRichMediaElement;
 declare global {

package/dist-cms/packages/media/media/components/input-rich-media/input-rich-media.element.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-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 { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/constants.js';
-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 { 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';
@@ -15,12 +16,14 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/rou
 import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '@umbraco-cms/backoffice/sorter';
 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';
 let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     #sorter;
     set value(value) {
         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();
@@ -67,6 +70,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
     }
     #readonly;
     #itemManager;
+    #pickerContext;
     constructor() {
         super();
         this.#sorter = new UmbSorterController(this, {
@@ -118,6 +122,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.#readonly = false;
         this._cards = [];
         this.#itemManager = new UmbRepositoryItemsManager(this, UMB_MEDIA_ITEM_REPOSITORY_ALIAS);
+        this.#pickerContext = new UmbMediaPickerInputContext(this);
         this.#pickableFilter = (item) => {
             if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
                 return this.allowedContentTypeIds.includes(item.mediaType.unique);
@@ -169,6 +174,9 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
             .observeRouteBuilder((routeBuilder) => {
             this._routeBuilder = routeBuilder;
         });
+        this.observe(this.#pickerContext.selection, (selection) => {
+            this.#addItems(selection);
+        });
         this.addValidator('valueMissing', () => this.requiredMessage ?? UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => {
             return !this.readonly && !!this.required && (!this.value || this.value.length === 0);
         });
@@ -186,16 +194,6 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
     }
     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);
@@ -205,11 +203,14 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
                     name: media?.name ?? '',
                     icon: media?.mediaType?.icon,
                     isTrashed: media?.isTrashed ?? false,
+                    isLoading: !media,
                 };
             }) ?? [];
     }
     #pickableFilter;
-    #addItems(uniques) {
+    #addItems(additionalMediaKeys) {
+        // 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 = uniques.map((unique) => ({
@@ -222,35 +223,36 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         this.value = [...(this.value ?? []), ...additions];
         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: {
-                multiple: this.multiple,
-                startNode: this.startNode,
-                pickableFilter: this.#pickableFilter,
-            },
-            value: { selection: [] },
+    #openPicker() {
+        this.#pickerContext.openPicker({
+            multiple: this.multiple,
+            startNode: this.startNode,
+            pickableFilter: this.#pickableFilter,
+        }, {
+            allowedContentTypes: this.allowedContentTypeIds?.map((id) => ({
+                unique: id,
+                entityType: UMB_MEDIA_TYPE_ENTITY_TYPE,
+            })),
+            includeTrashed: false,
         });
-        const data = await modalHandler?.onSubmit().catch(() => null);
-        if (!data)
-            return;
-        const selection = data.selection.filter((x) => x !== null);
-        this.#addItems(selection);
     }
     async #onRemove(item) {
-        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) {
-        const completed = e.detail;
-        const uploaded = completed.map((file) => file.unique);
+        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);
     }
     render() {
@@ -259,45 +261,40 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
 			<div class="container">${this.#renderItems()} ${this.#renderAddButton()}</div>
 		`;
     }
+    // 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;
+            return nothing;
         return html `
 			${repeat(this._cards, (item) => item.unique, (item) => this.#renderItem(item))}
 		`;
     }
     #renderAddButton() {
-        if (this._cards && this._cards.length && !this.multiple)
-            return;
-        if (this.readonly && this._cards.length > 0) {
+        if (this.readonly)
             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>
-			`;
-        }
+        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) {
         if (!item.unique)
@@ -305,10 +302,12 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
         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>
 		`;
@@ -345,6 +344,10 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
 				grid-auto-rows: var(--umb-card-medium-min-width);
 			}
 
+			#dropzone {
+				margin-bottom: var(--uui-size-space-5);
+			}
+
 			#btn-add {
 				text-align: center;
 				height: 100%;

package/dist-cms/packages/media/media/components/input-upload-field/input-upload-field.element.d.ts

@@ -1,11 +1,11 @@
-import type { MediaValueType } from '../../property-editors/upload-field/types.js';
+import type { UmbMediaValueType } from '../../property-editors/upload-field/types.js';
 import { nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbTemporaryFileModel } from '@umbraco-cms/backoffice/temporary-file';
 export declare class UmbInputUploadFieldElement extends UmbLitElement {
     #private;
-    set value(value: MediaValueType);
-    get value(): MediaValueType;
+    set value(value: UmbMediaValueType);
+    get value(): UmbMediaValueType;
     /**
      * @description Allowed file extensions. Allow all if empty.
      * @type {Array<string>}
@@ -13,7 +13,6 @@ export declare class UmbInputUploadFieldElement extends UmbLitElement {
      */
     allowedFileExtensions?: Array<string>;
     temporaryFile?: UmbTemporaryFileModel;
-    private _extensions?;
     private _previewAlias?;
     private _serverUrl;
     constructor();