Added file uploads

This commit is contained in:
Xodrium 2023-02-07 19:36:32 -05:00
parent 911d17637f
commit b2ce13eea1
10 changed files with 169 additions and 40 deletions

View file

@ -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">

View file

@ -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

View file

@ -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
};

View file

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

View file

@ -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});

View file

@ -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);
}

View file

@ -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>

View file

@ -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.'};
}
};

View file

@ -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>

View file

@ -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);