Can upload new gong

ui/src/lib/gong.js

@@ -45,6 +45,25 @@ export class Gong {
   }
 }
 
+export async function uploadGong(files, meta) {
+  for (const file of files) {
+    const formData = new FormData();
+    formData.append("gongfile", file);
+    formData.append("meta", JSON.stringify(meta));
+
+    const res = await fetch('/api/gongs', {
+      method: 'POST',
+      body: formData,
+    });
+    if (res.ok) {
+      const data = await res.json();
+      return new Gong(data)
+    } else {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+}
+
 export async function getGongs() {
   const res = await fetch(`api/gongs`, {headers: {'Accept': 'application/json'}})
   if (res.status == 200) {

ui/src/routes/musiks/gongs/new/+page.svelte

@@ -1,3 +1,45 @@
-<h2>
-    Nouveau gong
-</h2>
+<script>
+ import { goto } from '$app/navigation';
+
+ import {
+     Button,
+     Container,
+     Form,
+     Icon,
+     Input,
+     ListGroup,
+     ListGroupItem,
+     Spinner,
+ } from 'sveltestrap';
+
+ import { gongs } from '$lib/stores/gongs';
+ import { uploadGong } from '$lib/gong';
+
+ function submitGong() {
+     if (files.length == 0) {
+         alert("Vous n'avez sélectionné aucun fichier !")
+         return false;
+     }
+
+     uploadGong(files).then((gong) => {
+         gongs.refresh();
+         goto('musiks/gongs/' + gong.id);
+     })
+ }
+
+ export let files = [];
+</script>
+
+<Container>
+    <h2>
+        Nouveau gong
+    </h2>
+
+    <form on:submit|preventDefault={submitGong}>
+        <Input type="file" bind:files />
+
+        <Button type="submit" color="primary" class="mt-2" disabled={files.length == 0}>
+            Ajouter ce gong
+        </Button>
+    </form>
+</Container>