From 0866e2631ddeb297a2a8a45262bc1e396d9cba3e Mon Sep 17 00:00:00 2001 From: thiloho <123883702+thiloho@users.noreply.github.com> Date: Sat, 10 Aug 2024 17:09:12 +0200 Subject: [PATCH] Serve and create images from within postgresql --- .../migrations/20240719071602_main_tables.sql | 3 +- ...20240720132802_exposed_views_functions.sql | 36 --------- .../20240803163047_website_overview_view.sql | 2 - ...240810115846_image_upload_function.sql.sql | 77 ++++++++++++++++++ web-app/src/lib/server/utils.ts | 66 --------------- .../website/[websiteId]/+page.server.ts | 80 +++++++++++-------- .../website/[websiteId]/+page.svelte | 12 +-- .../articles/[articleId]/+page.server.ts | 47 ++++++----- .../articles/[articleId]/+page.svelte | 6 +- 9 files changed, 158 insertions(+), 171 deletions(-) create mode 100644 rest-api/db/migrations/20240810115846_image_upload_function.sql.sql delete mode 100644 web-app/src/lib/server/utils.ts diff --git a/rest-api/db/migrations/20240719071602_main_tables.sql b/rest-api/db/migrations/20240719071602_main_tables.sql index c510ac3..6ec5c94 100644 --- a/rest-api/db/migrations/20240719071602_main_tables.sql +++ b/rest-api/db/migrations/20240719071602_main_tables.sql @@ -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() ); diff --git a/rest-api/db/migrations/20240720132802_exposed_views_functions.sql b/rest-api/db/migrations/20240720132802_exposed_views_functions.sql index 9c39cc6..d273c65 100644 --- a/rest-api/db/migrations/20240720132802_exposed_views_functions.sql +++ b/rest-api/db/migrations/20240720132802_exposed_views_functions.sql @@ -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; diff --git a/rest-api/db/migrations/20240803163047_website_overview_view.sql b/rest-api/db/migrations/20240803163047_website_overview_view.sql index 11bd887..9978e88 100644 --- a/rest-api/db/migrations/20240803163047_website_overview_view.sql +++ b/rest-api/db/migrations/20240803163047_website_overview_view.sql @@ -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; diff --git a/rest-api/db/migrations/20240810115846_image_upload_function.sql.sql b/rest-api/db/migrations/20240810115846_image_upload_function.sql.sql new file mode 100644 index 0000000..e3674b9 --- /dev/null +++ b/rest-api/db/migrations/20240810115846_image_upload_function.sql.sql @@ -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 "*/*"; + diff --git a/web-app/src/lib/server/utils.ts b/web-app/src/lib/server/utils.ts deleted file mode 100644 index 9d89d4b..0000000 --- a/web-app/src/lib/server/utils.ts +++ /dev/null @@ -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 }; -}; diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts index baf3341..d92eaf0 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts @@ -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 }) }); diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte index 98f35fe..858e3eb 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte @@ -53,11 +53,11 @@ Favicon: - {#if data.globalSettings.media} + {#if data.globalSettings.favicon_image} {data.globalSettings.media.original_name} {/if} @@ -107,11 +107,11 @@ required={data.header.logo_type === "image"} /> - {#if data.header.media} + {#if data.header.logo_image} {data.header.media.original_name} {/if} diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts index b212d3e..9542669 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts @@ -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") }) diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte index e4f0a9d..4d2941e 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte @@ -66,11 +66,11 @@ Cover image: - {#if data.article.media} + {#if data.article.cover_image} {data.article.media.original_name} {/if}