thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 02:41:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Serve and create images from within postgresql

Browse Source
This commit is contained in:
thiloho
2024-08-10 17:09:12 +02:00
parent 77338f9cc2
commit 0866e2631d
9 changed files with 158 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
rest-api/db/migrations/20240719071602_main_tables.sql
View File

@@ -38,8 +38,9 @@ CREATE TABLE internal.media (
id UUID PRIMARY KEY DEFAULT gen_random_uuid (),
website_id UUID REFERENCES internal.website (id) ON DELETE CASCADE NOT NULL,
user_id UUID REFERENCES internal.user (id) ON DELETE CASCADE NOT NULL DEFAULT (CURRENT_SETTING('request.jwt.claims', TRUE)::JSON ->> 'user_id') ::UUID,
blob BYTEA NOT NULL,
mimetype TEXT NOT NULL,
original_name TEXT NOT NULL,
file_system_path TEXT NOT NULL,
created_at TIMESTAMPTZ NOT NULL DEFAULT CLOCK_TIMESTAMP()
);

36
rest-api/db/migrations/20240720132802_exposed_views_functions.sql
View File

@@ -33,18 +33,6 @@ SELECT
FROM
internal.website;
CREATE VIEW api.media WITH ( security_invoker = ON
) AS
SELECT
id,
website_id,
user_id,
original_name,
file_system_path,
created_at
FROM
internal.media;
CREATE VIEW api.settings WITH ( security_invoker = ON
) AS
SELECT
@@ -183,10 +171,6 @@ GRANT SELECT, UPDATE, DELETE ON internal.website TO authenticated_user;
GRANT SELECT, UPDATE, DELETE ON api.website TO authenticated_user;
GRANT SELECT, INSERT ON internal.media TO authenticated_user;
GRANT SELECT, INSERT ON api.media TO authenticated_user;
GRANT SELECT, UPDATE ON internal.settings TO authenticated_user;
GRANT SELECT, UPDATE ON api.settings TO authenticated_user;
@@ -216,24 +200,6 @@ GRANT SELECT ON internal.change_log TO authenticated_user;
GRANT SELECT ON api.change_log TO authenticated_user;
-- migrate:down
REVOKE SELECT ON internal.user FROM authenticated_user;
REVOKE SELECT, UPDATE, DELETE ON internal.website FROM authenticated_user;
REVOKE SELECT, INSERT ON internal.media FROM authenticated_user;
REVOKE SELECT, UPDATE ON internal.settings FROM authenticated_user;
REVOKE SELECT, UPDATE ON internal.header FROM authenticated_user;
REVOKE SELECT, INSERT, UPDATE, DELETE ON internal.article FROM authenticated_user;
REVOKE SELECT, UPDATE ON internal.footer FROM authenticated_user;
REVOKE SELECT, INSERT, UPDATE, DELETE ON internal.collab FROM authenticated_user;
REVOKE SELECT ON internal.change_log FROM authenticated_user;
DROP FUNCTION api.create_website (VARCHAR(10), VARCHAR(50));
DROP VIEW api.change_log;
@@ -250,8 +216,6 @@ DROP VIEW api.header;
DROP VIEW api.settings;
DROP VIEW api.media;
DROP VIEW api.website;
DROP VIEW api.user;

2
rest-api/db/migrations/20240803163047_website_overview_view.sql
View File

@@ -36,7 +36,5 @@ FROM
GRANT SELECT ON api.website_overview TO authenticated_user;
-- migrate:down
REVOKE SELECT ON api.website_overview FROM authenticated_user;
DROP VIEW api.website_overview;

77
rest-api/db/migrations/20240810115846_image_upload_function.sql.sql Normal file
View File

@@ -0,0 +1,77 @@
-- migrate:up
CREATE DOMAIN "*/*" AS bytea;
CREATE FUNCTION api.upload_file (BYTEA, OUT file_id UUID)
AS $$
DECLARE
_headers JSON := CURRENT_SETTING('request.headers', TRUE)::JSON;
_website_id UUID := (_headers ->> 'x-website-id')::UUID;
_mimetype TEXT := _headers ->> 'x-mimetype';
_original_filename TEXT := _headers ->> 'x-original-filename';
_allowed_mimetypes TEXT[] := ARRAY['image/png', 'image/svg+xml', 'image/jpeg', 'image/webp'];
_max_file_size INT := 5 * 1024 * 1024;
BEGIN
IF _mimetype IS NULL OR _mimetype NOT IN (
SELECT
UNNEST(_allowed_mimetypes)) THEN
RAISE invalid_parameter_value
USING message = 'Invalid MIME type. Allowed types are: png, svg, jpg, webp';
END IF;
IF OCTET_LENGTH($1) > _max_file_size THEN
RAISE program_limit_exceeded
USING message = FORMAT('File size exceeds the maximum limit of %s MB', _max_file_size / (1024 * 1024));
END IF;
INSERT INTO internal.media (website_id, blob, mimetype, original_name)
VALUES (_website_id, $1, _mimetype, _original_filename)
RETURNING
id INTO file_id;
END;
$$
LANGUAGE plpgsql
SECURITY DEFINER;
CREATE FUNCTION api.retrieve_file (id UUID)
RETURNS "*/*"
AS $$
DECLARE
_headers TEXT;
_blob BYTEA;
BEGIN
SELECT
FORMAT('[{ "Content-Type": "%s" },'
'{ "Content-Disposition": "inline; filename=\"%s\"" },'
'{ "Cache-Control": "max-age=259200" }]', m.mimetype, m.original_name)
FROM
internal.media m
WHERE
m.id = retrieve_file.id INTO _headers;
PERFORM
SET_CONFIG('response.headers', _headers, TRUE);
SELECT
m.blob
FROM
internal.media m
WHERE
m.id = retrieve_file.id INTO _blob;
IF FOUND THEN
RETURN _blob;
ELSE
RAISE invalid_parameter_value
USING message = 'Invalid file id';
END IF;
END;
$$
LANGUAGE plpgsql
SECURITY DEFINER;
GRANT EXECUTE ON FUNCTION api.upload_file (BYTEA) TO authenticated_user;
GRANT EXECUTE ON FUNCTION api.retrieve_file (UUID) TO authenticated_user;
-- migrate:down
DROP FUNCTION api.upload_file (BYTEA);
DROP FUNCTION api.retrieve_file (UUID);
DROP DOMAIN "*/*";

66
web-app/src/lib/server/utils.ts
View File

@@ -1,66 +0,0 @@
import { randomUUID } from "node:crypto";
import { mkdir, writeFile } from "node:fs/promises";
import { extname, join, relative } from "node:path";
import { ALLOWED_MIME_TYPES } from "../utils";
export const handleFileUpload = async (
file: File,
websiteId: string,
userId: string,
session_token: string | undefined,
customFetch: typeof fetch
) => {
if (file.size === 0) return undefined;
const MAX_FILE_SIZE = 1024 * 1024;
if (file.size > MAX_FILE_SIZE) {
return {
success: false,
message: `File size exceeds the maximum limit of ${MAX_FILE_SIZE / 1024 / 1024} MB.`
};
}
if (!ALLOWED_MIME_TYPES.includes(file.type)) {
return {
success: false,
message: "Invalid file type. JPEG, PNG, SVG and WEBP are allowed."
};
}
const buffer = Buffer.from(await file.arrayBuffer());
const uploadDir = join(process.cwd(), "static", "user-uploads", userId);
await mkdir(uploadDir, { recursive: true });
const fileId = randomUUID();
const fileExtension = extname(file.name);
const filepath = join(uploadDir, `${fileId}${fileExtension}`);
await writeFile(filepath, buffer);
const relativePath = relative(join(process.cwd(), "static"), filepath);
const res = await customFetch("http://localhost:3000/media", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session_token}`,
Prefer: "return=representation",
Accept: "application/vnd.pgrst.object+json"
},
body: JSON.stringify({
website_id: websiteId,
user_id: userId,
original_name: file.name,
file_system_path: relativePath
})
});
const response = await res.json();
if (!res.ok) {
return { success: false, message: response.message };
}
return { success: true, content: response.id };
};

80
web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts
View File

@@ -1,9 +1,8 @@
import { handleFileUpload } from "$lib/server/utils.js";
import type { Actions, PageServerLoad } from "./$types";
export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
const globalSettingsData = await fetch(
`http://localhost:3000/settings?website_id=eq.${params.websiteId}&select=*,media(*)`,
`http://localhost:3000/settings?website_id=eq.${params.websiteId}`,
{
method: "GET",
headers: {
@@ -14,17 +13,14 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
}
);
const headerData = await fetch(
`http://localhost:3000/header?website_id=eq.${params.websiteId}&select=*,media(*)`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json"
}
const headerData = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json"
}
);
});
const footerData = await fetch(`http://localhost:3000/footer?website_id=eq.${params.websiteId}`, {
method: "GET",
@@ -49,18 +45,25 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
export const actions: Actions = {
updateGlobal: async ({ request, fetch, cookies, params, locals }) => {
const data = await request.formData();
const faviconFile = data.get("favicon") as File;
const favicon = await handleFileUpload(
faviconFile,
params.websiteId,
locals.user.id,
cookies.get("session_token"),
fetch
);
if (favicon?.success === false) {
return favicon;
const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json",
"X-Website-Id": params.websiteId,
"X-Mimetype": faviconFile.type,
"X-Original-Filename": faviconFile.name
},
body: await faviconFile.arrayBuffer()
});
const uploadedImage = await uploadedImageData.json();
if (!uploadedImageData.ok) {
return { success: false, message: uploadedImage.message };
}
const res = await fetch(`http://localhost:3000/settings?website_id=eq.${params.websiteId}`, {
@@ -72,7 +75,7 @@ export const actions: Actions = {
body: JSON.stringify({
accent_color_light_theme: data.get("accent-color-light"),
accent_color_dark_theme: data.get("accent-color-dark"),
favicon_image: favicon?.content
favicon_image: uploadedImage.file_id
})
});
@@ -86,20 +89,27 @@ export const actions: Actions = {
message: "Successfully updated global settings"
};
},
updateHeader: async ({ request, fetch, cookies, locals, params }) => {
updateHeader: async ({ request, fetch, cookies, params }) => {
const data = await request.formData();
const logoImage = data.get("logo-image") as File;
const logoFile = data.get("logo-image") as File;
const logo = await handleFileUpload(
logoFile,
params.websiteId,
locals.user.id,
cookies.get("session_token"),
fetch
);
const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json",
"X-Website-Id": params.websiteId,
"X-Mimetype": logoImage.type,
"X-Original-Filename": logoImage.name
},
body: await logoImage.arrayBuffer()
});
if (logo?.success === false) {
return logo;
const uploadedImage = await uploadedImageData.json();
if (!uploadedImageData.ok) {
return { success: false, message: uploadedImage.message };
}
const res = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
@@ -111,7 +121,7 @@ export const actions: Actions = {
body: JSON.stringify({
logo_type: data.get("logo-type"),
logo_text: data.get("logo-text"),
logo_image: logo?.content
logo_image: uploadedImage.file_id
})
});

12
web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
View File

@@ -53,11 +53,11 @@
Favicon:
<input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
</label>
{#if data.globalSettings.media}
{#if data.globalSettings.favicon_image}
<Modal id="preview-favicon-global-{data.globalSettings.website_id}" text="Preview">
<img
src={`http://localhost:5173/${data.globalSettings.media.file_system_path}`}
alt={data.globalSettings.media.original_name}
src={`http://localhost:3000/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
alt=""
/>
</Modal>
{/if}
@@ -107,11 +107,11 @@
required={data.header.logo_type === "image"}
/>
</label>
{#if data.header.media}
{#if data.header.logo_image}
<Modal id="preview-logo-header-{data.header.website_id}" text="Preview">
<img
src={`http://localhost:5173/${data.header.media.file_system_path}`}
alt={data.header.media.original_name}
src={`http://localhost:3000/rpc/retrieve_file?id=${data.header.logo_image}`}
alt=""
/>
</Modal>
{/if}

47
web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
View File

@@ -1,18 +1,14 @@
import { handleFileUpload } from "$lib/server/utils.js";
import type { Actions, PageServerLoad } from "./$types";
export const load: PageServerLoad = async ({ parent, params, cookies, fetch }) => {
const articleData = await fetch(
`http://localhost:3000/article?id=eq.${params.articleId}&select=*,media(*)`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json"
}
const articleData = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json"
}
);
});
const article = await articleData.json();
const { website } = await parent();
@@ -23,18 +19,25 @@ export const load: PageServerLoad = async ({ parent, params, cookies, fetch }) =
export const actions: Actions = {
default: async ({ fetch, cookies, request, params, locals }) => {
const data = await request.formData();
const coverFile = data.get("cover-image") as File;
const cover = await handleFileUpload(
coverFile,
params.websiteId,
locals.user.id,
cookies.get("session_token"),
fetch
);
if (cover?.success === false) {
return cover;
const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
method: "POST",
headers: {
"Content-Type": "application/octet-stream",
Authorization: `Bearer ${cookies.get("session_token")}`,
Accept: "application/vnd.pgrst.object+json",
"X-Website-Id": params.websiteId,
"X-Mimetype": coverFile.type,
"X-Original-Filename": coverFile.name
},
body: await coverFile.arrayBuffer()
});
const uploadedImage = await uploadedImageData.json();
if (!uploadedImageData.ok) {
return { success: false, message: uploadedImage.message };
}
const res = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
@@ -47,7 +50,7 @@ export const actions: Actions = {
title: data.get("title"),
meta_description: data.get("description"),
meta_author: data.get("author"),
cover_image: cover?.content,
cover_image: uploadedImage.file_id,
publication_date: data.get("publication-date"),
main_content: data.get("main-content")
})

6
web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
View File

@@ -66,11 +66,11 @@
Cover image:
<input type="file" name="cover-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
</label>
{#if data.article.media}
{#if data.article.cover_image}
<Modal id="preview-cover-article-{data.article.id}" text="Preview">
<img
src={`http://localhost:5173/${data.article.media.file_system_path}`}
alt={data.article.media.original_name}
src={`http://localhost:3000/rpc/retrieve_file?id=${data.article.cover_image}`}
alt=""
/>
</Modal>
{/if}