Overhauled post creation

Made the menu significantly better and made it possible to upload files directly from the post page

src/lib/components/Area.svelte

@@ -25,6 +25,8 @@
 
     #main {
         min-height: 250px;
+        max-height: 500px;
+        overflow-y: scroll;
     }
 
     #main.tiny {

src/lib/components/Button.svelte

@@ -0,0 +1,27 @@
+<style>
+    .button {
+        padding: 0.5rem;
+        background-color: var(--dark-3);
+        border: none;
+
+        font-family: 'Open Sans';
+        
+        border-radius: 0.5rem;
+
+        margin: 0.2rem;
+    }
+
+    .button a {
+        color: var(--light-1);
+    }
+
+</style>
+
+<script>
+    export let clickFunc = () => {};
+    export let button = '';
+</script>
+
+<button on:click={clickFunc} class='button'>
+    <a href='#'><slot/></a>
+</button>

src/lib/components/FileUpload.svelte

@@ -0,0 +1,55 @@
+<script>
+    import Button from '$lib/components/Button.svelte';
+
+    export let form;
+
+    let fileInput;
+    let files;
+    let preview;
+
+    function getBase64(image) {
+        const reader = new FileReader();
+        reader.readAsDataURL(image);
+        reader.onload = e => {
+            preview = e.target.result;
+            uploadFunction(e.target.result);
+        };
+    };
+
+    async function uploadFunction(imgBase64) {
+        const imgData = imgBase64.split(',').pop();
+
+        var fData = (new FormData());
+
+        fData.append('img',imgData);
+        fData.append('extension',fileInput.value.split('.').pop());
+
+        form = await fetch(`/api/fileCreate`, {
+            method: 'POST',
+            body: fData
+        }).then(x => x.json());
+    };
+</script>
+
+<style>
+
+    .hidden {
+        display: none;
+    }
+
+    img {
+        max-width: 250px;
+    }
+</style>
+
+<form action='/api/postCreate' method='POST' >
+    {#if preview}
+        <img src={preview} alt="Image preview"/>
+    {:else}
+        <img src='/icon_sanifae.svg' alt="Image preview"/>
+    {/if}
+    <input class="hidden" id="file-to-upload" type="file" bind:files bind:this={fileInput} on:change={() => getBase64(files[0])}/>
+    <p> 
+        <Button class="upload-btn" clickFunc={ () => fileInput.click() }>Upload</Button>
+    </p>
+</form>

src/lib/components/Post.svelte

@@ -1,13 +1,11 @@
 <script>
     import Area from '$lib/components/Area.svelte';
-
-    import {formatPost} from '$lib/util.js';
+    import PostButton from '$lib/components/PostButton.svelte';
+    import PostBody from '$lib/components/PostBody.svelte';
 
     export let success, username, content, upvotes, downvotes, id;
 
     let query = (id) ? `/post/${id}` : '';
-    
-    let contentSplit = formatPost(content || '');
 
     let fData;
 
@@ -29,10 +27,7 @@
 </script>
 
 <style>
-    .button {
-        width: auto;
-        height: 35px;
-    }
+    
     .votes {
         font-weight: bold;
         font-size: 1.5rem;
@@ -59,44 +54,31 @@
         </p>
     </Area>
 {:else}
-    <Area tiny='{!!id}'>
+    <Area>
         <span slot="header">
             <a href='/user/{username}'>
                 {username}
             </a>
         </span>
         <span slot="main">
-            {#each contentSplit as line}
-                {#if line && line.type == 'img'}
-                    <img src={line.url} alt='Image preview'>
-                {:else}
-                    <p>{line}</p>
-                {/if}
-            {/each}
+            <PostBody content={content} />
         </span>
         <span slot="footer">
-            <span class='vote-area'>
-                <a on:click={() => vote('up')} href=''>
-                    <img src='/upvote.svg' class='button' alt='Upvote'>
-                </a>
-                <span class='votes'>
-                    {upvotes + 0}
-                </span>
-            </span>
-            <span class='vote-area'>
-                <a on:click={() => vote('down')} href=''>
-                    <img src='/downvote.svg' class='button' alt='Downvote'>
-                </a>
-                <span class='votes'>
-                    {downvotes + 0}
-                </span>
-            </span>
+            <PostButton
+                clickFunc={() => vote('up')}
+                data={upvotes * 1}
+                icon='/upvote.svg'
+            />
+            <PostButton
+                clickFunc={() => vote('down')}
+                data={downvotes * 1}
+                icon='/downvote.svg'
+            />
             {#if id}
-                <span class='vote-area'>
-                    <a href='/post/{id}'>
-                        <img src='/view.svg' class='button' alt='View'>
-                    </a>
-                </span>
+                <PostButton
+                    href='/post/{id}'
+                    icon='/view.svg'
+                />
             {/if}
         </span>
     </Area>

src/lib/components/PostBody.svelte

@@ -0,0 +1,27 @@
+<style>
+    img {
+        max-width: 250px;
+        display: block;
+    }
+</style>
+
+<script>
+    import {formatPost} from '$lib/util.js';
+
+    export let content = '';
+
+    let contentSplit;
+    $: contentSplit = formatPost(content || '');
+
+    console.log(contentSplit);
+</script>
+
+<span>
+    {#each contentSplit as line}
+        {#if line && line.type == 'img'}
+            <img src={line.url} alt='Image preview'>
+        {:else}
+            <p>{line}</p>
+        {/if}
+    {/each}
+</span>

src/lib/components/PostButton.svelte

@@ -0,0 +1,31 @@
+<style>
+    .votes {
+        font-weight: bold;
+        font-size: 1.5rem;
+    }
+    .vote-area {
+        margin-right: 30px;
+    }
+
+    .button {
+        width: auto;
+        height: 35px;
+    }
+
+</style>
+
+<script>
+    export let clickFunc = () => {};
+    export let href = '#';
+    export let data = ' ';
+    export let icon = '/upvote.svg';
+</script>
+
+<span class='vote-area'>
+    <a on:click={clickFunc} href='{href}'>
+        <img src='{icon}' class='button' alt='Vote button'>
+    </a>
+    <span class='votes'>
+        {data}
+    </span>
+</span>