My Valentine's Page

\n ♥ Make Your Valentine ♥\n

\n setValentineName(e.target.value)}\n placeholder=\"✧ Valentine's Name ✧\"\n style={{\n display: \"block\",\n margin: \"10px 0\",\n padding: \"8px\",\n border: \"2px solid #000000\",\n width: \"90%\",\n background: \"#ffffff\",\n fontFamily: \"'Comic Sans MS', cursive\",\n fontSize: \"14px\",\n outline: \"none\",\n textAlign: \"center\",\n }}\n />\n setMessage(e.target.value)}\n placeholder=\"✧ Your Message ✧\"\n style={{\n display: \"block\",\n margin: \"10px 0\",\n padding: \"8px\",\n border: \"2px solid #000000\",\n width: \"90%\",\n background: \"#ffffff\",\n fontFamily: \"'Comic Sans MS', cursive\",\n fontSize: \"14px\",\n outline: \"none\",\n textAlign: \"center\",\n }}\n />\n e.currentTarget.style.transform = \"translate(2px, 2px)\"}\n onMouseUp={e => e.currentTarget.style.transform = \"translate(0px, 0px)\"}\n >\n ★ Add Text! ★\n \n generateStaticHTML()}\n style={{\n position: \"fixed\",\n bottom: \"20px\",\n right: \"20px\",\n background: \"#ff00ff\",\n color: \"white\",\n border: \"2px solid #000000\",\n padding: \"8px 16px\",\n cursor: \"pointer\",\n fontFamily: \"'Comic Sans MS', cursive\",\n fontSize: \"16px\",\n fontWeight: \"bold\",\n textShadow: \"1px 1px 0px #000000\",\n boxShadow: \"3px 3px 0px #000000\",\n }}\n>\n 💾 Generate Card\n\n \n

\n ♪ drag text & images! ♪\n

\n \n\n {urls.map((url, index) => (\n \n ))}\n \n {textElements.map((text, index) => (\n \n ))}\n \n );\n}\n}\n\ncreateRoot(document.getElementById(\"root\")).render();",[],[159],{"_103":167,"_95":168,"_139":169,"_141":-5,"_142":130,"_143":170,"_145":146,"_105":171,"_100":172,"_149":150,"_151":173,"_153":26,"_154":174,"_98":175},"d60e342a-e766-11ef-9b23-e6cdfca9ef9f","generate_static_html","7d769e66-e765-11ef-9e98-e6cdfca9ef9f",172,["D",1739161433565],5,"export const generateStaticHTML = () => {\n console.log(\"generatestatichtml\");\n // Get the main container\n const container = document.querySelector(\"div[style*=\\\"backgroundImage\\\"]\");\n if (!container) return;\n\n // Start building the HTML\n let html = `\n\n\n\n \n My Valentine's Page\n \n\n\n

\n`;\n\n // Get all images and text elements\n const elements = container.querySelectorAll(\"div[style*=\\\"position: absolute\\\"]\");\n\n elements.forEach((el, index) => {\n const computedStyle = window.getComputedStyle(el);\n const img = el.querySelector(\"img\");\n\n if (img) {\n // It's an image element\n html += `

\n $\"Valentine$ \n

\\n`;\n } else {\n // It's a text element\n html += `

${el.textContent}

\\n`;\n }\n });\n\n html += `

\\n\\n`;\n\n console.log(html);\n};",[],[168],{"_103":177,"_95":178,"_139":179,"_141":-5,"_142":130,"_143":180,"_145":146,"_105":181,"_100":162,"_149":150,"_151":182,"_153":26,"_154":183,"_98":184},"e1456d4a-e75c-11ef-9280-e6cdfca9ef9f","get_images","0b8c1ee6-e56e-11ef-b8df-e6cdfca9ef9f",123,["D",1739157157411],"import { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\n// export async function getImages(type: string, count: number): Promise {\n// // Query to select random rows of the specified type\n// const result = await sqlite.execute(\n// `\n// SELECT path\n// FROM ${DATABASE_TABLENAME}\n// WHERE type = ?\n// ORDER BY RANDOM()\n// LIMIT ?\n// `,\n// [type, count],\n// );\n\n// let images: string[] = [];\n// for (const row of result.rows) {\n// // console.log(\"row\", row);\n// // const blobUrl = await blob.get(row[\"path\"] as string);\n// images.push(row[\"path\"] as string);\n// }\n\n// return images;\n// }\n\nexport async function getImages(typeCountMap: Record): Promise> {\n const params: (string | number)[] = [];\n\n const results = [];\n\n for (const [type, count] of Object.entries(typeCountMap)) {\n const query = `SELECT '${type}' as type, path FROM ${DATABASE_TABLENAME} WHERE type = ? ORDER BY RANDOM() LIMIT ?`;\n const result = await sqlite.execute(query, [type, count]);\n results.push(...result.rows);\n }\n\n return results.map(row => row[\"path\"] as string);\n}\n\nconsole.log(\n await getImages({\n \"image\": 10,\n \"gif\": 5,\n }),\n);",[],[178],{"_103":186,"_95":99,"_139":187,"_141":-5,"_142":130,"_143":188,"_145":146,"_105":189,"_100":190,"_149":191,"_151":192,"_153":26,"_154":193,"_98":194},"d0c31878-e75c-11ef-8abf-e6cdfca9ef9f","686d255c-e56d-11ef-8457-e6cdfca9ef9f",122,["D",1739157129713],15,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(`__public/${filename}`, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://shouser-blob_admin.web.val.run/api/public/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, publicUrl],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}",[],[197],{"_103":205,"_95":206,"_139":207,"_141":-5,"_142":130,"_143":208,"_145":146,"_105":209,"_100":172,"_149":150,"_151":210,"_153":26,"_154":211,"_98":212},"a39ac25a-e762-11ef-b105-e6cdfca9ef9f","random_position_image","3da0a51e-e762-11ef-89b2-e6cdfca9ef9f",150,["D",1739159630936],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function RandomPositionImage({\n imageUrl = \"https://maxm-imggenurl.web.val.run/random-colorful-abstract-shape\",\n existingPositions = [],\n}) {\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const [size, setSize] = useState({ width: 250, height: 250 });\n const [imageLoaded, setImageLoaded] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });\n const imgRef = useRef(null);\n\n useEffect(() => {\n const baseSize = 20 + Math.random() * 10;\n setSize({\n width: `${baseSize}%`,\n height: \"auto\",\n });\n }, []);\n\n useEffect(() => {\n const findValidPosition = () => {\n const maxAttempts = 50;\n let bestPosition = null;\n let leastOverlap = Infinity;\n\n for (let i = 0; i < maxAttempts; i++) {\n const maxWidth = window.innerWidth - size.width;\n const maxHeight = window.innerHeight - size.height;\n\n const testPosition = {\n top: Math.random() * maxHeight,\n left: Math.random() * maxWidth,\n };\n\n let totalOverlap = 0;\n for (const existing of existingPositions) {\n const horizontalOverlap = Math.max(\n 0,\n Math.min(\n testPosition.left + size.width,\n existing.left + existing.width,\n ) - Math.max(testPosition.left, existing.left),\n );\n\n const verticalOverlap = Math.max(\n 0,\n Math.min(\n testPosition.top + size.height,\n existing.top + existing.height,\n ) - Math.max(testPosition.top, existing.top),\n );\n\n totalOverlap += horizontalOverlap * verticalOverlap;\n }\n\n if (totalOverlap < leastOverlap) {\n leastOverlap = totalOverlap;\n bestPosition = testPosition;\n }\n\n if (totalOverlap === 0) break;\n }\n\n setPosition(bestPosition);\n };\n\n findValidPosition();\n }, [size, existingPositions]);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n const rect = e.currentTarget.getBoundingClientRect();\n setDragOffset({\n x: e.clientX - rect.left,\n y: e.clientY - rect.top,\n });\n };\n\n const handleMouseMove = (e) => {\n if (!isDragging) return;\n\n setPosition({\n left: e.clientX - dragOffset.x,\n top: e.clientY - dragOffset.y,\n });\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n }\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [isDragging, dragOffset]);\n\n return (\n \n setImageLoaded(true)}\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n borderRadius: \"10px\",\n pointerEvents: \"none\",\n }}\n />\n \n );\n}",[],[206],{"_103":214,"_95":215,"_139":216,"_141":-5,"_142":130,"_143":217,"_145":146,"_105":218,"_100":219,"_149":150,"_151":220,"_153":26,"_154":221,"_98":222},"2a194a1c-e764-11ef-ba1a-e6cdfca9ef9f","text_art","c0298406-e762-11ef-836c-e6cdfca9ef9f",161,["D",1739160286073],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function TextArt({ text, existingPositions = [] }) {\n const [position, setPosition] = useState({ top: 0, left: 0 });\n const [isDragging, setIsDragging] = useState(false);\n const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });\n const [fontSize] = useState(30 + Math.random() * 40); // Bigger font size range\n const [rotation] = useState(Math.random() * 30 - 15);\n\n // Generate random 90s style colors\n const [style] = useState(() => {\n const styles = [\n // Chrome/Metal\n {\n background: \"linear-gradient(to bottom, #f0f0f0, #666666)\",\n textShadow: \"2px 2px 0 #000, -2px -2px 0 #fff, 4px 4px 0 rgba(0,0,0,0.5)\",\n fontFamily: \"'Arial Black', sans-serif\",\n fontWeight: \"900\",\n letterSpacing: \"2px\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n },\n // Blue Chrome\n {\n background: \"linear-gradient(to bottom, #00ffff, #0066ff)\",\n textShadow: \"2px 2px 0 #000, -1px -1px 0 #fff, 4px 4px 0 rgba(0,0,0,0.3)\",\n fontFamily: \"'Impact', sans-serif\",\n fontWeight: \"bold\",\n letterSpacing: \"1px\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n },\n // Rainbow\n {\n background: \"linear-gradient(to right, #ff0000, #ff8800, #ffff00, #00ff00, #0099ff)\",\n textShadow: \"2px 2px 0 #000, -1px -1px 0 #fff, 3px 3px 0 rgba(0,0,0,0.4)\",\n fontFamily: \"'Arial Black', sans-serif\",\n fontWeight: \"900\",\n letterSpacing: \"2px\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n },\n // Neon Pink\n {\n color: \"#ff00ff\",\n textShadow: \"0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff, 2px 2px 0 #000\",\n fontFamily: \"'Impact', sans-serif\",\n fontWeight: \"bold\",\n letterSpacing: \"2px\",\n },\n // Gold\n {\n background: \"linear-gradient(to bottom, #ffd700, #ffa500)\",\n textShadow: \"2px 2px 0 #000, -1px -1px 0 #fff, 4px 4px 0 rgba(0,0,0,0.3)\",\n fontFamily: \"'Arial Black', sans-serif\",\n fontWeight: \"900\",\n letterSpacing: \"1px\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n },\n ];\n return styles[Math.floor(Math.random() * styles.length)];\n });\n\n useEffect(() => {\n const maxWidth = window.innerWidth - 300;\n const maxHeight = window.innerHeight - 200;\n setPosition({\n top: Math.random() * maxHeight,\n left: Math.random() * maxWidth,\n });\n }, []);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n const rect = e.currentTarget.getBoundingClientRect();\n setDragOffset({\n x: e.clientX - rect.left,\n y: e.clientY - rect.top,\n });\n };\n\n const handleMouseMove = (e) => {\n if (!isDragging) return;\n setPosition({\n left: e.clientX - dragOffset.x,\n top: e.clientY - dragOffset.y,\n });\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener(\"mousemove\", handleMouseMove);\n document.addEventListener(\"mouseup\", handleMouseUp);\n }\n return () => {\n document.removeEventListener(\"mousemove\", handleMouseMove);\n document.removeEventListener(\"mouseup\", handleMouseUp);\n };\n }, [isDragging, dragOffset]);\n\n return (\n \n {text}\n \n );\n}",[],[215],"counts",{"_225":226,"_227":226,"_228":226,"_229":31},"pulls",1,"branches","forks","envVars","contents",[],"file",{"_103":186,"_95":99,"_139":187,"_141":-5,"_142":130,"_143":188,"_145":146,"_105":234,"_100":190,"_149":191,"_151":192,"_153":26,"_98":235},["D",1739157129713],[99],"upstream","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":41,"_98":99,"_101":239,"_232":243,"_246":247,"_321":322},{"_103":104,"_95":96,"_105":240,"_107":-5,"_108":109,"_110":-5,"_111":-5,"_11":112,"_113":-5,"_114":26,"_115":116,"_117":116,"_118":119,"_120":119,"_121":119,"_122":116,"_123":26,"_20":241,"_127":242},["D",1738944347583],{"_93":94,"_125":126},{"_100":129,"_95":41,"_103":130,"_131":104,"_132":-5,"_133":-5},{"_103":186,"_95":99,"_139":187,"_141":-5,"_142":130,"_143":188,"_145":146,"_105":244,"_100":190,"_149":191,"_151":192,"_153":26,"_98":245},["D",1739157129713],[99],"history",[248,250,254,260,265,269,274,279,285,290,296,300,304,309,313,317],{"_103":186,"_139":187,"_95":99,"_149":191,"_151":192,"_141":-5,"_142":130,"_100":190,"_143":188,"_153":26,"_105":249,"_145":146},["D",1739157129713],{"_103":251,"_139":187,"_95":99,"_149":191,"_151":192,"_141":-5,"_142":130,"_100":252,"_143":199,"_153":26,"_105":253,"_145":26},"2b1d32e6-e75c-11ef-9a7b-e6cdfca9ef9f",14,["D",1739156851800],{"_103":255,"_139":187,"_95":99,"_149":191,"_151":256,"_141":-5,"_142":130,"_100":257,"_143":258,"_153":26,"_105":259,"_145":26},"5aa5c734-e681-11ef-84bb-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `__public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://shouser-blob_admin.web.val.run/api/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, publicUrl],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",13,107,["D",1739062871770],{"_103":261,"_139":187,"_95":99,"_149":191,"_151":192,"_141":-5,"_142":130,"_100":262,"_143":263,"_153":26,"_105":264,"_145":26},"f8c28fbc-e67f-11ef-9d46-e6cdfca9ef9f",12,100,["D",1739062278031],{"_103":266,"_139":187,"_95":99,"_149":191,"_151":256,"_141":-5,"_142":130,"_100":144,"_143":267,"_153":26,"_105":268,"_145":26},"85f69ece-e67f-11ef-a123-e6cdfca9ef9f",99,["D",1739062085449],{"_103":270,"_139":187,"_95":99,"_149":191,"_151":192,"_141":-5,"_142":130,"_100":271,"_143":272,"_153":26,"_105":273,"_145":26},"ff8baf46-e67e-11ef-95c4-e6cdfca9ef9f",10,98,["D",1739061859929],{"_103":275,"_139":187,"_95":99,"_149":191,"_151":256,"_141":-5,"_142":130,"_100":276,"_143":277,"_153":26,"_105":278,"_145":26},"360b2e6c-e67e-11ef-862e-e6cdfca9ef9f",9,93,["D",1739061521869],{"_103":280,"_139":187,"_95":99,"_149":191,"_151":281,"_141":-5,"_142":130,"_100":282,"_143":283,"_153":26,"_105":284,"_145":26},"f48dfe42-e67d-11ef-89ee-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `__public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://shouser-blob_admin.web.val.run/api/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",8,92,["D",1739061411994],{"_103":286,"_139":187,"_95":99,"_149":191,"_151":287,"_141":-5,"_142":130,"_100":219,"_143":288,"_153":26,"_105":289,"_145":26},"a85c34bc-e67d-11ef-9292-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `__public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://shouser-blob_admin.web.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",91,["D",1739061284158],{"_103":291,"_139":187,"_95":99,"_149":191,"_151":292,"_141":-5,"_142":130,"_100":293,"_143":294,"_153":26,"_105":295,"_145":26},"520e2660-e67d-11ef-9292-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `__public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",6,90,["D",1739061139367],{"_103":297,"_139":187,"_95":99,"_149":191,"_151":298,"_141":-5,"_142":130,"_100":172,"_143":252,"_153":26,"_105":299,"_145":26},"d0e7c5aa-e56e-11ef-949a-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",["D",1738944958574],{"_103":301,"_139":187,"_95":99,"_149":191,"_151":302,"_141":-5,"_142":130,"_100":148,"_143":257,"_153":26,"_105":303,"_145":26},"a5a4a6c4-e56e-11ef-813b-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATABASE_TABLENAME } from \"./constants\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME}_images (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME}_images (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",["D",1738944885988],{"_103":305,"_139":187,"_95":99,"_149":191,"_151":306,"_141":-5,"_142":130,"_100":307,"_143":276,"_153":26,"_105":308,"_145":26},"8c8c7b12-e56e-11ef-954d-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n // const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${DATABASE_TABLENAME}_images (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${DATABASE_TABLENAME}_images (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\n`;",3,["D",1738944843887],{"_103":310,"_139":187,"_95":99,"_149":191,"_151":311,"_141":-5,"_142":130,"_100":90,"_143":293,"_153":26,"_105":312,"_145":26},"27730110-e56e-11ef-9be0-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction App() {\n const [uploadStatus, setUploadStatus] = useState(\"Drag and drop files here\");\n const [fileUrl, setFileUrl] = useState(null);\n const [imageType, setImageType] = useState(\"image\");\n const urlInputRef = useRef(null);\n\n const handleCopyUrl = useCallback(() => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n navigator.clipboard.writeText(urlInputRef.current.value).then(() => {\n setUploadStatus(\"URL copied to clipboard!\");\n setTimeout(() => setUploadStatus(\"Drag and drop files here\"), 2000);\n });\n }\n }, []);\n\n const handleDrop = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const files = event.dataTransfer.files;\n if (files.length > 0) {\n const file = files[0];\n\n // Validate file type\n if (![\"image/jpeg\", \"image/gif\", \"image/png\"].includes(file.type)) {\n setUploadStatus(\"Only JPG, GIF, and PNG files are allowed\");\n return;\n }\n\n const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"type\", imageType);\n\n fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n })\n .then(response => response.json())\n .then(data => {\n setUploadStatus(\"Upload successful!\");\n setFileUrl(data.url);\n })\n .catch(error => {\n console.error(\"Upload failed:\", error);\n setUploadStatus(\"Upload failed\");\n });\n }\n }, [imageType]);\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n \n

{uploadStatus}

\n setImageType(e.target.value)}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n }}\n >\n \n \n \n \n \n Drag and drop an image here\n \n {fileUrl && (\n \n \n

\n \n Copy URL\n \n \n View Image\n \n

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload\") {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n const formData = await request.formData();\n const file = formData.get(\"file\") as File;\n const imageType = formData.get(\"type\") as string;\n\n if (!file) {\n return new Response(JSON.stringify({ error: \"No file uploaded\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Ensure SQLite table exists\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n type TEXT NOT NULL,\n path TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const arrayBuffer = await file.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n\n // Generate a unique filename with timestamp and original filename\n const filename = `public/${Date.now()}_${file.name}`;\n\n // Upload to blob storage\n await blob.set(filename, uint8Array, {\n contentType: file.type,\n });\n\n // Construct a public URL\n const publicUrl = `https://blob.val.run/${filename}`;\n\n // Save metadata to SQLite\n await sqlite.execute(\n `INSERT INTO ${KEY}_images (type, path) VALUES (?, ?)`,\n [imageType, filename],\n );\n\n return new Response(\n JSON.stringify({\n url: publicUrl,\n filename: filename,\n type: imageType,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n return new Response(\n `\n \n \n Image Upload\n \n \n \n

History for image_uploader