From ce97fa45f85de9a0dde9cfc88309d5e73e53e99a Mon Sep 17 00:00:00 2001
From: JesmoDev <jjensenmoeller@gmail.com>
Date: Mon, 12 Feb 2024 16:16:05 +0100
Subject: [PATCH] add remove button

---
 .../input-image-cropper.element.ts            | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
index d239dfc629..134e5cf938 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/input-image-cropper.element.ts
@@ -66,6 +66,16 @@ export class UmbInputImageCropperElement extends UmbLitElement {
 		this._dropzone.browse();
 	}
 
+	#onRemove = () => {
+		this.value = { ...this.value, src: '' };
+		if (!this.fileUnique) return;
+		this.#manager?.removeOne(this.fileUnique);
+		this.fileUnique = undefined;
+		this.file = undefined;
+
+		this.dispatchEvent(new UmbChangeEvent());
+	};
+
 	render() {
 		if (this.value.src || this.file) {
 			return this.#renderImageCropper();
@@ -89,10 +99,11 @@ export class UmbInputImageCropperElement extends UmbLitElement {
 	}
 
 	#renderImageCropper() {
-		return html`<umb-image-cropper-field
-			.value=${this.value}
-			.file=${this.file as File}
-			@change=${this.#onChange}></umb-image-cropper-field>`;
+		return html`<umb-image-cropper-field .value=${this.value} .file=${this.file as File} @change=${this.#onChange}>
+			<uui-button slot="actions" @click=${this.#onRemove} label="Remove files">
+				<uui-icon name="icon-trash"></uui-icon> Remove file(s)
+			</uui-button>
+		</umb-image-cropper-field> `;
 	}
 
 	static styles = css``;