Set the default image name to be the original file name, and move all of the strings into the localization file (closes #10)

langs/en-ca.json

@@ -34,7 +34,13 @@
 					"upload": "Upload New Image",
 					"edit-named": "Editing Image: {name}",
 					"edit-generic": "Editing Image"
-				}
+				},
+				"image-label": "Image",
+				"clear": "Clear",
+				"preview-placeholder": "Select an image to see a preview",
+				"name-label": "Name",
+				"tags-label": "Tags",
+				"artists-label": "Artists"
 			}
 		},
 		"settings": {

module/apps/ImageApp.mjs

@@ -48,7 +48,7 @@ export class ImageApp extends
 
 	// #region Instance Data
 	/** The artist that is being edited, or the default artist values */
-	_doc = { path: ``, tags: [], artists: [] };
+	_doc = { name: ``, path: ``, tags: [], artists: [] };
 
 	get title() {
 		if (this._docID) {
@@ -88,7 +88,6 @@ export class ImageApp extends
 		// Validate the DB hasn't been updated since opening
 		if (!(await this.isAbleToSave())) { return };
 
-
 		// Upload new image to server
 		if (!this._docID) {
 			const hash = this._doc.hash;
@@ -148,7 +147,7 @@ export class ImageApp extends
 				this.#artistCache.push({ value: id, label: artist.name });
 			};
 		};
-
+		console.log(this._doc);
 		const ctx = {
 			meta: {
 				idp: this.id,
@@ -179,7 +178,7 @@ export class ImageApp extends
 		if (!file) {
 			this.#file = null;
 			this._docID = null;
-			this._doc = { path: ``, artists: [], tags: [] };
+			this._doc = { path: ``, name: ``, artists: [], tags: [] };
 			this._updateFrame({ window: { title: this.title } });
 			await this.render({ parts: [`header`, `preview`, `form`] });
 			return;
@@ -201,9 +200,10 @@ export class ImageApp extends
 
 		// Temporarily blob the image so it can be displayed in-app
 		const url = URL.createObjectURL(file);
+		this._doc.name = file.name.replace(`.${extension}`, ``);
 		this._doc.path = url;
 		this._doc.hash = hash;
-		await this.render({ parts: [`preview`] });
+		await this.render({ parts: [`preview`, `form`] });
 	};
 
 	/** @this {ImageApp} */

templates/ImageApp/form.hbs

@@ -1,6 +1,6 @@
 <div class="inputs">
 	<label for="{{meta.idp}}-name">
-		Name (Optional)
+		{{ localize "IT.apps.ImageApp.name-label" }}
 	</label>
 	<input
 		id="{{meta.idp}}-name"
@@ -10,7 +10,7 @@
 	>
 
 	<label for="{{meta.idp}}-tags">
-		Tags (Optional)
+		{{ localize "IT.apps.ImageApp.tags-label" }}
 	</label>
 	<string-tags
 		id="{{meta.idp}}-tags"
@@ -19,7 +19,7 @@
 	></string-tags>
 
 	<label for="{{meta.idp}}-artists">
-		Artists (Optional)
+		{{ localize "IT.apps.ImageApp.artists-label" }}
 	</label>
 	<multi-select
 		id="{{meta.idp}}-artists"

templates/ImageApp/header.hbs

@@ -1,7 +1,7 @@
 <header>
 	<div class="row">
 		<label for="{{meta.idp}}-image">
-			Image
+			{{ localize "IT.apps.ImageApp.image-label" }}
 		</label>
 		{{#if docID}}
 			<input
@@ -15,7 +15,7 @@
 				type="button"
 				data-action="removeEditingImage"
 			>
-				Clear
+				{{ localize "IT.apps.ImageApp.clear" }}
 			</button>
 		{{else}}
 			<input

templates/ImageApp/preview.hbs

@@ -6,7 +6,7 @@
 		>
 	{{else}}
 		<span class="placeholder">
-			Select an image to see the preview
+			{{ localize "IT.apps.ImageApp.preview-placeholder" }}
 		</span>
 	{{/if}}
 </div>