ui for uploading intros

src/IntroDownloader.svelte

@@ -2,12 +2,15 @@
     import { intros, member } from './store.ts';
     import { member_can, Permission } from './permissions.ts';
     import { onMount } from 'svelte';
+    import { uploadIntro } from './api.js';
 
     let enteredUrl = '';
     let enteredTitle = '';
+    let selectedFile = null;
     let selectedGuild = null;
     let canDownloadAny = false;
     let downloadPromise = null;
+    let uploadPromise = null;
     let allowedGuildList = [];
 
     $: allowedGuildList = $member.guilds
@@ -26,6 +29,18 @@
 
         }
     };
+
+    const upload = () => {
+        // TODO: limit to 1 file
+        if (!!selectedGuild) {
+            uploadPromise = (async () => {
+                await uploadIntro(selectedGuild.id, enteredTitle, selectedFile[0], $member.token);
+                await intros.fetchIntros($member.guilds);
+            })();
+        } else {
+
+        }
+    }
 </script>
 
 {#if canDownloadAny}
@@ -53,6 +68,29 @@
                 <button on:click={download}>Download</button>
             {/if}
         </div>
+        <div>
+            <h3>Upload New Intro</h3>
+            {#if !!uploadPromise}
+                {#await uploadPromise}
+                    <p>uploading...</p>
+                {:then result}
+                    <p>Uploaded</p>
+                    <button on:click={() => {uploadPromise = null}}>Add another</button>
+                {:catch err}
+                    <p style='color: red'>{err}</p>
+                    <button on:click={() => {uploadPromise = null}}>Ok</button>
+                {/await}
+            {:else}
+                <select bind:value={selectedGuild}>
+                    {#each allowedGuildList as guild}
+                        <option value={guild}>{guild.name}</option>
+                    {/each}
+                </select>
+                <input bind:value={enteredTitle} placeholder='enter intro title'>
+                <input type="file" accept="audio/*, video/*" bind:files={selectedFile}>
+                <button on:click={upload}>Upload</button>
+            {/if}
+        </div>
     </div>
 {/if}
 
@@ -60,11 +98,13 @@
     div {
         display: flex;
         width: 85%;
+        height: 85%;
         flex-direction: column;
         align-items: center;
         background-color: #2a2a4a;
         padding: 1.5em;
         box-shadow: 1px 3px 4px 1px #1f1f36;
+        margin: 0.5em;
     }
 
     h3 {

src/api.js

@@ -1,6 +1,6 @@
 import { env } from '$env/dynamic/public';
 
-export const apiCall = async (method, endpoint, token) => {
+export const apiCall = async (method, endpoint, token, body) => {
     const headers = (() => {
         if (!!token) {
             return { 'token': token };
@@ -12,7 +12,7 @@ export const apiCall = async (method, endpoint, token) => {
     return (await
         fetch(
             `${env.PUBLIC_API_URL}/${endpoint}`,
-            { method: method, headers: headers })
+            { method: method, headers: headers, body: body })
 
     );
 };
@@ -44,3 +44,7 @@ export const removeIntro = async (guild, channel, selectedIntros, token) => {
         await apiCall('POST', `intros/${guild}/${channel}/${intro}/remove`, token);
     }
 };
+
+export const uploadIntro = async (guild, name, file, token) => {
+    await apiCall('POST', `intros/${guild}/upload?name=${encodeURIComponent(name)}`, token, file);
+}

src/app.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
+        <title>MemeJoin - Dashboard</title>
 		%sveltekit.head%
 	</head>
     <style>