add button to add new image to class closes #15

webpage/src/lib/FileUpload.svelte

@@ -35,6 +35,7 @@
 	<button
 		class="icon"
 		class:adapt={replace_slot && file && !notExpand}
+		type="button"
 		on:click={() => fileInput.click()}
 	>
 		{#if replace_slot && file}

webpage/src/lib/requests.svelte.ts

@@ -111,6 +111,7 @@ export async function showMessage(
 		messages.display(await e.json());
 		return true;
 	} else {
+		console.error(e);
 		messages.display(message);
 		return true;
 	}

webpage/src/routes/models/edit/ModelTable.svelte

@@ -112,6 +112,33 @@
 			console.error('TODO notify user', e);
 		}
 	}
+
+	let addFile: File | undefined = $state();
+	let addImageMessages: MessageSimple;
+	let adding = $state(Promise.resolve());
+	let uploadImageDialog: HTMLDialogElement;
+	async function addImage() {
+		if (!selected_class?.id || !addFile) {
+			return;
+		}
+		try {
+			let form = new FormData();
+			form.append(
+				'json_data',
+				JSON.stringify({
+					id: selected_class?.id
+				})
+			);
+			form.append('file', addFile, 'upload.zip');
+			const r = await postFormData('models/data/class/image', form);
+			console.log(r);
+			uploadImageDialog.close();
+			addFile = undefined;
+			getList();
+		} catch (e) {
+			showMessage(e, addImageMessages);
+		}
+	}
 </script>
 
 {#if classes.length == 0}
@@ -219,15 +246,18 @@
 		{/if}
 		{#if selected_class}
 			<div class="content selected">
-				{#if model.model_type == 2}
-					{#if selected_class?.status == 1}
-						<h2>Class to train</h2>
-					{:else if selected_class?.status == 2}
-						<h2>Class training</h2>
-					{:else if selected_class?.status == 3}
-						<h2>Class trained</h2>
+				<h2>
+					{#if model.model_type == 2}
+						{#if selected_class?.status == 1}
+							Class to train
+						{:else if selected_class?.status == 2}
+							Class training
+						{:else if selected_class?.status == 3}
+							Class trained
+						{/if}
 					{/if}
-				{/if}
+					<button on:click={() => uploadImageDialog.showModal()}> Upload Image </button>
+				</h2>
 				<table>
 					<thead>
 						<tr>
@@ -312,7 +342,45 @@
 	</Tabs>
 {/if}
 
+<dialog class="newImageDialog" bind:this={uploadImageDialog}>
+	<form on:submit|preventDefault={addImage}>
+		<fieldset class="file-upload">
+			<label for="file">Data file</label>
+			<div class="form-msg">
+				Please provide a file that has the training and testing data<br />
+				The file must have 2 folders one with testing images and one with training images.
+				<br />
+				Each of the folders will contain the classes of the model. The folders must be the same in testing
+				and training. The class folders must have the images for the classes.
+				<ZipStructure />
+			</div>
+			<FileUpload replace_slot bind:file={addFile} accept="application/zip,image/*" notExpand>
+				<img src="/imgs/upload-icon.png" alt="" />
+				<span> Upload Zip File or Image </span>
+				<div slot="replaced" style="display: inline;">
+					<img src="/imgs/upload-icon.png" alt="" />
+					<span> File selected </span>
+				</div>
+			</FileUpload>
+		</fieldset>
+		<MessageSimple bind:this={addImageMessages} />
+		{#if addFile}
+			{#await adding}
+				<button disabled> Uploading </button>
+			{:then}
+				<button> Add </button>
+			{/await}
+		{/if}
+	</form>
+</dialog>
+
 <style lang="scss">
+	.newImageDialog {
+		border-radius: 20px;
+		min-width: 300px;
+		min-height: 200px;
+	}
+
 	.buttons {
 		width: 100%;
 		display: flex;