Can upload new track

ui/src/lib/track.js

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

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

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