Serve and create images from within postgresql

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

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;

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;
 

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 "*/*";
+

web-app/src/lib/server/utils.ts

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

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(
+  const headerData = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
-    `http://localhost:3000/header?website_id=eq.${params.websiteId}&select=*,media(*)`,
+    method: "GET",
-    {
+    headers: {
-      method: "GET",
+      "Content-Type": "application/json",
-      headers: {
+      Authorization: `Bearer ${cookies.get("session_token")}`,
-        "Content-Type": "application/json",
+      Accept: "application/vnd.pgrst.object+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) {
+    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
-      return favicon;
+      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 uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
-    const logo = await handleFileUpload(
+      method: "POST",
-      logoFile,
+      headers: {
-      params.websiteId,
+        "Content-Type": "application/octet-stream",
-      locals.user.id,
+        Authorization: `Bearer ${cookies.get("session_token")}`,
-      cookies.get("session_token"),
+        Accept: "application/vnd.pgrst.object+json",
-      fetch
+        "X-Website-Id": params.websiteId,
-    );
+        "X-Mimetype": logoImage.type,
+        "X-Original-Filename": logoImage.name
+      },
+      body: await logoImage.arrayBuffer()
+    });
 
-    if (logo?.success === false) {
+    const uploadedImage = await uploadedImageData.json();
-      return logo;
+
+    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
       })
     });
 

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

@@ -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}`}
+              src={`http://localhost:3000/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
-              alt={data.globalSettings.media.original_name}
+              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}`}
+              src={`http://localhost:3000/rpc/retrieve_file?id=${data.header.logo_image}`}
-              alt={data.header.media.original_name}
+              alt=""
             />
           </Modal>
         {/if}

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(
+  const articleData = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
-    `http://localhost:3000/article?id=eq.${params.articleId}&select=*,media(*)`,
+    method: "GET",
-    {
+    headers: {
-      method: "GET",
+      "Content-Type": "application/json",
-      headers: {
+      Authorization: `Bearer ${cookies.get("session_token")}`,
-        "Content-Type": "application/json",
+      Accept: "application/vnd.pgrst.object+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) {
+    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
-      return cover;
+      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")
       })

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

@@ -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}`}
+              src={`http://localhost:3000/rpc/retrieve_file?id=${data.article.cover_image}`}
-              alt={data.article.media.original_name}
+              alt=""
             />
           </Modal>
         {/if}