Added file uploads

src/lib/components/Post.svelte

@@ -1,11 +1,13 @@
 <script>
     import Area from '$lib/components/Area.svelte';
 
+    import {formatPost} from '$lib/util.js';
+
     export let success, username, content, upvotes, downvotes, id;
 
     let query = (id) ? `/post/${id}` : '';
     
-    let contentSplit = content.split('\n');
+    let contentSplit = formatPost(content || '');
 
     let fData;
 
@@ -38,6 +40,10 @@
     .vote-area {
         margin-right: 30px;
     }
+
+    img {
+        max-width: 250px;
+    }
 </style>
 
 {#if success}
@@ -61,7 +67,11 @@
         </span>
         <span slot="main">
             {#each contentSplit as line}
-                <p>{line}</p>
+                {#if line && line.type == 'img'}
+                    <img src={line.url} alt='Image preview'>
+                {:else}
+                    <p>{line}</p>
+                {/if}
             {/each}
         </span>
         <span slot="footer">

src/lib/db/db.js

@@ -2,14 +2,15 @@ const rowCount = 5;
 
 const AUTH_ACTIONS = [
     'postCreate',
+    'fileCreate',
     'vote'
 ];
 
 import sqlite3 from 'sqlite3'
 import { open } from 'sqlite'
 import { hash, compare } from 'bcrypt'
-import { randomBytes } from 'node:crypto';
-
+import { randomBytes, createHash } from 'node:crypto';
+import { readFile, writeFile } from 'node:fs/promises';
 import { calcVote, calcVoteUser, checkLength, checkRegex } from '../util.js';
 
 var db;
@@ -128,7 +129,7 @@ backend.login = async ({user, pass, cookies}) => {
     return { success: 'Successfully logged into account.', data: token, location: '/'};
 }
 
-backend.postCreate = async ({content}) => {
+backend.postCreate = async ({content, user}) => {
     var lengthCheck = checkLength(content,'Post content',1,10240);
 
     if (lengthCheck)
@@ -145,7 +146,7 @@ backend.postCreate = async ({content}) => {
         calcVote(0,0)
     ])
 
-    return {'success': 'Your post has been broadcasted!' };
+    return {'success': 'Your post has been broadcasted!', 'href': `/post/${id}` };
 }
 
 backend.postGet = async ({id}) => {
@@ -244,6 +245,24 @@ backend.token = async ({cookies}) => {
     return {data: existingAccounts[0].username};
 }
 
+backend.fileCreate = async({img, extension}) => {
+    const imgHash = createHash('md5').update(img).digest('hex');
+
+    let lengthCheck = checkLength(img,'Image',0,1024*1024*5);
+
+    if (lengthCheck)
+        return lengthCheck;
+
+    const extensionSafe = extension.replace(/(\s+)/g, '\\$1');
+
+    if (extensionSafe != 'png' && extensionSafe != 'jpg' && extensionSafe != 'svg' )
+        return { success: 'Illegal file extension.' };
+
+    writeFile(`${process.cwd()}/db/post-${imgHash}.${extensionSafe}`,img,{encoding: 'base64'});
+
+    return { success: 'Successfully uploaded file.', 'href': `/img/${imgHash}.${extensionSafe}`};
+}
+
 export {
     backendProxy,
     backend

src/lib/util.js

@@ -59,10 +59,33 @@ let handleSubmit = async e => {
     }).then(x => x.text());
 }
 
+let formatPost = function(post) {
+    post = post.split('\n');
+
+    post = post.map(subPost => {
+        var splitPost = subPost.split('||');
+
+        if (splitPost.length > 1) {
+            var cap1 = splitPost[0];
+
+            if (cap1 == 'img') {
+                var matchCleaned = splitPost[1].replace(/(\s+)/g, '\\$1');
+                splitPost = {'type': 'img', 'url': `/img/${matchCleaned}`};
+
+                return splitPost;
+            }
+        }
+        return subPost;
+    });
+
+    return post;
+}
+
 export {
     checkLength,
     checkRegex,
     calcVote,
     handleSubmit,
-    calcVoteUser
+    calcVoteUser,
+    formatPost
 };

src/routes/+layout.svelte

@@ -83,6 +83,9 @@
             <a href='/new_post'>
                 Create
             </a>
+            <a href='/new_file'>
+                Create file
+            </a>
         {:else}
             <a href='/account'>
                 Log in / Register

src/routes/api/[route]/+server.js

@@ -27,7 +27,7 @@ async function handleReq({ cookies, params, route }) {
     var backendParams = {cookies};
 
     for (const [key, value] of params) {
-        backendParams[key] = value;
+        backendParams[key] = value + '';
     }
 
     return await mainApi({backendParams, route: route});

src/routes/img/[img]/+server.js

@@ -0,0 +1,14 @@
+import { backend, backendProxy } from '../../../lib/db/db.js';
+
+import { readFile, writeFile } from 'node:fs/promises';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ url, cookies, params }) {
+    var imgName = params['img'];
+
+    imgName = imgName.replace(/(\s+)/g, '\\$1');
+
+    var res = await readFile(`${process.cwd()}/db/post-${imgName}`);
+
+    return new Response(res);
+}

src/routes/new_file/+page.svelte

@@ -0,0 +1,75 @@
+<script>
+    import Area from '$lib/components/Area.svelte';
+
+    /** @type {import('./$types').ActionData} */
+    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>
+    textarea {
+        width: 10rem;
+        height: 10rem;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    img {
+        max-width: 250px;
+    }
+</style>
+
+<Area>
+    <p slot="header">
+        Upload File
+    </p>
+    <form slot="main" 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> 
+            <a href='#' class="upload-btn" on:click={ () => fileInput.click() }>Upload</a>
+        </p>
+    </form>
+    <p slot="footer">
+        {#if form?.success}
+            {#if form?.href}
+                <a href='{form?.href}'>{form?.success}</a>
+            {:else}
+                {form?.success}
+            {/if}
+        {/if}
+        Create an image for the world to see.
+    </p>
+</Area>

src/routes/new_post/+page.server.js

@@ -1,19 +0,0 @@
-import { backend } from '../../lib/db/db.js';
-import { checkLength, checkRegex } from '../../lib/util.js';
-
-/** @type {import('./$types').Actions} */
-export const actions = {
-    create: async ({ request, cookies }) => {
-        const data = await request.formData();
-        const content = data.get('content') + '';
-
-        var lengthCheck = checkLength(content,'Post content',1,10240);
-
-        if (lengthCheck)
-            return lengthCheck;
-
-        await backend.postCreate({user, content});
-
-        return {'success': 'Successfully posted.'};
-    }
-};

src/routes/new_post/+page.svelte

@@ -26,10 +26,20 @@
             <input formaction="?/create" type='submit' value='Post'>
         </p>
     </form>
-    <p slot="footer">
-        {#if form?.success}
-            <p>{form?.success}</p>
-        {/if}
-        Create a post for the world to see.
-    </p>
+    <span slot="footer">
+        <p>
+            {#if form?.success}
+                {#if form?.href}
+                    <a href='{form?.href}'>{form?.success}</a>
+                {:else}
+                    {form?.success}
+                {/if}
+            {/if}
+        </p>
+        <p>Create a post for the world to see.</p>
+        <h2>Post syntax</h2>
+        <p>
+            <b>img||filename.blah</b> embeds a user-uploaded file in this site
+        </p>
+    </span>
 </Area>

src/routes/post/[post]/+page.js

@@ -7,13 +7,7 @@ export async function load({ fetch, params, url }) {
 
     await new Promise(resolve => setTimeout(resolve, 100));
 
-    var f = (new FormData());
-
-    f.append('id',id);
-    const res = await fetch(`/api/postGet`, {
-        method: 'POST',
-        body: f
-    });
+    const res = await fetch(`/api/postGet?id=${id}`);
     const postJson = (await res.json()).data;
 
     console.log(postJson);