Image Upload

{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`;","deleted","label",[98],"permalink","https://www.val.town/x/charmaine/valentines_day_card_generator/code/image_uploader","extension","actionData","errors"]