Image metadata fields in upload page

src/routes/Upload.svelte

@@ -5,7 +5,7 @@
 
     let imageUpload;
     let previews = [];
-
+    let forms = [];
     const acceptedTypes = ["image/png", "image/jpeg", "image/gif"];
 
     function validImageTypes(file) {
@@ -21,11 +21,17 @@
         }
     }
 
-    function postImages() {
+    async function postImages() {
         let formData = new FormData();
+        let i = 0;
         for (const file of imageUpload.files) {
             formData.set("image", file);
-            post1Image(formData);
+            const imageMetadata = await post1Image(formData);
+            updateImageMetadata(
+                imageMetadata.snowflake,
+                serializeForm(forms[i])
+            );
+            i++;
         }
         imageUpload.value = null;
         previews = [];
@@ -42,6 +48,22 @@
         const imageMetadata = await fetchAPI(paths.Image, options);
         return imageMetadata;
     }
+
+    // Serialize image metada fields into JSON string that can be sent to API endpoints
+    function serializeForm(form) {
+        return JSON.stringify(Object.fromEntries(new FormData(form)));
+    }
+
+    function updateImageMetadata(snowflake, metadata) {
+        const options = {
+            method: "PATCH",
+            headers: {
+                secret: $user.secret,
+            },
+            body: metadata,
+        };
+        fetchAPI(paths.ImageField(snowflake), options);
+    }
 </script>
 
 <main class="flex flex-col items-center mx-auto max-w-4xl">
@@ -55,8 +77,38 @@
         />
         <button on:click={postImages}>Submit</button>
     </div>
-
-    {#each previews as preview}
-        <img src={preview} alt="" class="max-w-md" />
+    <!-- {(console.log(forms), "")} -->
+    {#each previews as preview, i}
+        <div class="flex flex-row space-x-6 m-4">
+            <form class="flex flex-col flex-1 space-y-6" bind:this={forms[i]}>
+                <input
+                    type="text"
+                    placeholder="Source"
+                    name="source"
+                    autocomplete="off"
+                />
+                <input
+                    type="text"
+                    placeholder="Parent"
+                    name="parent"
+                    autocomplete="off"
+                />
+                <textarea
+                    type="text"
+                    placeholder="Commentary"
+                    name="commentary"
+                    autocomplete="off"
+                    class="max-h-full resize-none flex-1"
+                />
+                <textarea
+                    type="text"
+                    placeholder="Commentary translation"
+                    name="commentary_translation"
+                    autocomplete="off"
+                    class="max-h-full resize-none flex-1"
+                />
+            </form>
+            <img src={preview} alt="" class="max-w-xs" />
+        </div>
     {/each}
 </main>