feat: implement file upload and fetching

Signed-off-by: Sphericalkat <me@kat.bio>
This commit is contained in:
Amogh Lele 2024-06-17 18:40:45 +05:30
parent 40ca26d07d
commit 0e4eeb5f19
Signed by: sphericalkat
GPG Key ID: 1C022B9CED2425B4
5 changed files with 95 additions and 3 deletions

View File

@ -1,5 +1,6 @@
{
"useTabs": true,
"useTabs": false,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,

5
src/lib/pocketbase.ts Normal file
View File

@ -0,0 +1,5 @@
import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
const client = new Pocketbase(PUBLIC_POCKETBASE_URL)
export default client;

View File

@ -0,0 +1,6 @@
export const actions = {
default: async (event) => {
// upload file
console.log(event);
}
};

View File

@ -1,2 +1,61 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<script lang="ts">
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
let file;
let form;
let percent = 0;
let completeMessage: string | undefined
const handleFileChange = (event: Event & { currentTarget: HTMLInputElement }) => {
const target = event.target as unknown as { files: File[] }
const file = target.files[0]
const formData = new FormData();
formData.append('file', file)
let xhr = new XMLHttpRequest()
xhr.upload.onprogress = function(event) {
percent = Math.round(100 * event.loaded / event.total);
// do something with the percentage
}
xhr.onreadystatechange = (event) => {
if (xhr.readyState === 4 && xhr.status < 400) {
const response = JSON.parse(xhr.responseText)
completeMessage = `Upload complete! Access your file at http://localhost:5173/${response.id}`
}
}
xhr.open('POST', `${PUBLIC_POCKETBASE_URL}/api/collections/uploads/records`)
xhr.send(formData)
}
</script>
<main class="flex flex-col items-center">
<h1 class="text-4xl font-bold mt-4">KatStash</h1>
<h2 class="text-2xl font-semibold mt-2">
Uploads up to 200 MB are allowed. Contact SphericalKat for more details
</h2>
{#if completeMessage}
<h2 class="text-2xl font-semibold mt-2">Upload complete1</h2>
{/if}
<form bind:this={form} method="POST">
<label class="block">
<span class="sr-only"></span>
<input
bind:this={file}
on:change={handleFileChange}
type="file"
id="file"
class="file:hidden file:px-4 block w-full h-full text-sm text-slate-500"
/>
{#if percent > 0}
<div>{percent}%</div>
{/if}
</label>
</form>
</main>

View File

@ -0,0 +1,21 @@
import { json, redirect } from '@sveltejs/kit';
import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
export async function GET({ params: { slug } }) {
let fileUrl = null;
try {
const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);
const record = await pocketbase.collection('uploads').getOne(slug);
fileUrl = new URL(
`${PUBLIC_POCKETBASE_URL}/api/files/${record.collectionId}/${record.id}/${record.file}`
);
} catch (error) {
console.error(error);
return redirect(307, '/404');
}
if (fileUrl) {
redirect(301, fileUrl);
}
}