From 2d46160053f9aeffaea3fb3c600b3af07050b576 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@noreply.localhost>
Date: Mon, 19 Jan 2026 22:42:55 -0700
Subject: [PATCH] Finish adding editing support to the Image app

---
 module/apps/Image.mjs         | 31 ++++++++++++++++++++++++-------
 templates/ImageApp/header.hbs | 31 +++++++++++++++++++++++--------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/module/apps/Image.mjs b/module/apps/Image.mjs
index 36a9eee..1a5c38f 100644
--- a/module/apps/Image.mjs
+++ b/module/apps/Image.mjs
@@ -33,7 +33,9 @@ export class ImageApp extends
 			submitOnChange: false,
 			closeOnSubmit: true,
 		},
-		actions: {},
+		actions: {
+			removeEditingImage: this.#removeEditingImage,
+		},
 	};
 
 	static PARTS = {
@@ -68,11 +70,15 @@ export class ImageApp extends
 		if (this._doc?.name) {
 			this._updateFrame({ window: { title: this.title } });
 		};
+	};
 
-		this.element.querySelector(`input[type="file"]`)?.addEventListener(
-			`change`,
-			this.#changeImage.bind(this),
-		);
+	_onRender(context, options) {
+		if (options.parts?.includes(`header`)) {
+			this.element.querySelector(`input[type="file"]`)?.addEventListener(
+				`change`,
+				this.#changeImage.bind(this),
+			);
+		};
 	};
 
 	/** @this {ImageApp} */
@@ -147,6 +153,7 @@ export class ImageApp extends
 			imageURL: this._doc.path.startsWith(`blob`)
 				? this._doc.path
 				: filePath(this._doc.path),
+			docID: this._docID,
 			image: this._doc,
 			artists: this.#artistCache,
 		};
@@ -166,10 +173,11 @@ export class ImageApp extends
 		URL.revokeObjectURL(this._doc.path);
 
 		if (!file) {
+			this.#file = null;
 			this._docID = null;
 			this._doc = { path: ``, artists: [], tags: [] };
 			this._updateFrame({ window: { title: this.title } });
-			await this.render({ parts: [`preview`, `form`] });
+			await this.render({ parts: [`header`, `preview`, `form`] });
 			return;
 		};
 
@@ -183,7 +191,7 @@ export class ImageApp extends
 			this._doc.hash = hash;
 			await this._fetchDocument();
 			this._updateFrame({ window: { title: this.title } });
-			await this.render({ parts: [`preview`, `form`] });
+			await this.render({ parts: [`header`, `preview`, `form`] });
 			return;
 		};
 
@@ -193,5 +201,14 @@ export class ImageApp extends
 		this._doc.hash = hash;
 		await this.render({ parts: [`preview`] });
 	};
+
+	/** @this {ImageApp} */
+	static async #removeEditingImage() {
+		this.#file = null;
+		this._docID = null;
+		this._doc = { path: ``, artists: [], tags: [] };
+		this._updateFrame({ window: { title: this.title } });
+		await this.render({ parts: [`header`, `preview`, `form`] });
+	};
 	// #endregion Actions
 };
diff --git a/templates/ImageApp/header.hbs b/templates/ImageApp/header.hbs
index f323ca1..e49503b 100644
--- a/templates/ImageApp/header.hbs
+++ b/templates/ImageApp/header.hbs
@@ -1,14 +1,29 @@
 <header>
 	<div class="row">
 		<label for="{{meta.idp}}-image">
-			Image File
+			Image
 		</label>
-		{{!-- TODO: when adding support for editing, make this readonly --}}
-		<input
-			type="file"
-			id="{{meta.idp}}-image"
-			accept="{{imageTypes}}"
-			name="file"
-		>
+		{{#if docID}}
+			<input
+				type="text"
+				id="{{meta.idp}}-image"
+				value="{{imageURL}}"
+				disabled
+				readonly
+			>
+			<button
+				type="button"
+				data-action="removeEditingImage"
+			>
+				Clear
+			</button>
+		{{else}}
+			<input
+				type="file"
+				id="{{meta.idp}}-image"
+				accept="{{imageTypes}}"
+				name="file"
+			>
+		{{/if}}
 	</div>
 </header>