feat: compress images with sharp

chore: switch to supabase
This commit is contained in:
log101 2024-02-21 09:42:29 +03:00
parent a137ee211b
commit 63a5b9970c
3 changed files with 38 additions and 10 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -19,6 +19,7 @@
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@supabase/supabase-js": "^2.39.7",
"@types/react": "^18.2.47", "@types/react": "^18.2.47",
"@types/react-dom": "^18.2.18", "@types/react-dom": "^18.2.18",
"@vercel/blob": "^0.19.0", "@vercel/blob": "^0.19.0",
@ -33,6 +34,7 @@
"nanoid": "^5.0.4", "nanoid": "^5.0.4",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"sharp": "^0.33.2",
"tailwind-merge": "^2.2.0", "tailwind-merge": "^2.2.0",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",

View File

@ -1,4 +1,6 @@
import { put } from "@vercel/blob" import { createClient } from "@supabase/supabase-js"
import sharp from "sharp"
import type { APIRoute } from "astro" import type { APIRoute } from "astro"
import { createKysely } from "@vercel/postgres-kysely" import { createKysely } from "@vercel/postgres-kysely"
import { customAlphabet } from "nanoid" import { customAlphabet } from "nanoid"
@ -6,12 +8,12 @@ import { customAlphabet } from "nanoid"
import type { Database } from "@/lib/db" import type { Database } from "@/lib/db"
export const POST: APIRoute = async ({ request }) => { export const POST: APIRoute = async ({ request }) => {
const data = await request.formData() const formData = await request.formData()
const image = data.get("selected-photo") as File const image = formData.get("selected-photo") as File
const author = data.get("author") const author = formData.get("author")
const description = data.get("description") const description = formData.get("description")
const geolocation = data.get("geolocation") const geolocation = formData.get("geolocation")
if (!image || !geolocation) { if (!image || !geolocation) {
return new Response(null, { return new Response(null, {
@ -29,19 +31,43 @@ export const POST: APIRoute = async ({ request }) => {
}) })
} }
const blob = await put(image.name, image, { access: "public", token: import.meta.env.BLOB_READ_WRITE_TOKEN }) const supabaseUrl = import.meta.env.SUPABASE_URL
const supabaseKey = import.meta.env.SUPABASE_KEY
const db = createKysely<Database>({ connectionString: import.meta.env.POSTGRES_URL }) const supabase = createClient(supabaseUrl, supabaseKey)
const nanoid = customAlphabet("abcdefghijklmnoprstuvyz", 10) const nanoid = customAlphabet("abcdefghijklmnoprstuvyz", 10)
const randomImageId = nanoid()
const imageName = `${image.name.replace(/\.[^/.]+$/, "")}${randomImageId}.jpg`
const imagebuf = await image.arrayBuffer()
const compressed = await sharp(imagebuf).toFormat("jpg", { quality: 75 }).toBuffer()
const { data, error } = await supabase.storage.from("images").upload(`public/${imageName}`, compressed, {
cacheControl: "3600",
upsert: false
})
if (error) {
console.error(error.message, imageName, error.cause)
return new Response(null, {
status: 400,
statusText: error.message
})
}
const imagePublicUrl = `https://sozfqjbdyppxfwhqktja.supabase.co/storage/v1/object/public/images/public/${imageName}`
const db = createKysely<Database>({ connectionString: import.meta.env.POSTGRES_URL })
const newUrl = nanoid() const newUrl = nanoid()
const res = await db const res = await db
.insertInto("contents") .insertInto("contents")
.values({ .values({
url: `${newUrl.slice(0, 3)}-${newUrl.slice(3, 7)}-${newUrl.slice(7)}`, url: `${newUrl.slice(0, 3)}-${newUrl.slice(3, 7)}-${newUrl.slice(7)}`,
blob_url: blob.url, blob_url: imagePublicUrl,
author: author?.toString() ?? "", author: author?.toString() ?? "",
description: description?.toString() ?? "", description: description?.toString() ?? "",
loc: `SRID=4326;POINT(${pos[0]} ${pos[1]})` loc: `SRID=4326;POINT(${pos[0]} ${pos[1]})`