diff --git a/src/routes/Upload.svelte b/src/routes/Upload.svelte index eeec0bcba5a63527b3b8fc4d704d97b3e45e268e..11e68d157df496f404a8cae716685192fc147f34 100644 --- a/src/routes/Upload.svelte +++ b/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>