Image Upload

\n \n
\n

\n \n Manage your blobs in Val Town settings\n \n

\n \n ,\n ));\n\napp.post(\"/\", async (c) => {\n try {\n const formData = await c.req.formData();\n const file = formData.get(\"file\");\n\n if (!file || !(file instanceof File)) {\n return c.text(\"No file uploaded\", 400);\n }\n\n const timestamp = Date.now();\n const key = `img_${timestamp}_${file.name}`;\n\n await blob.set(key, file);\n\n const baseUrl = new URL(c.req.url).origin;\n const imageUrl = `${baseUrl}/image/${encodeURIComponent(key)}`;\n\n return c.html(\n \n \n

Upload successful!

\n Image URL:\n

\n            {imageUrl}\n

\n
\n
\n \n
\n
\n Upload another |{\" \"}\n \n Manage blobs\n \n \n ,\n );\n } catch (error) {\n return c.text(`Error: ${error.message}`, 500);\n }\n});\n\napp.get(\"/image/:key\", async (c) => {\n try {\n const key = decodeURIComponent(c.req.param(\"key\"));\n const imageResponse = await blob.get(key);\n\n if (!imageResponse) {\n return c.text(\"Image not found\", 404);\n }\n\n const imageBlob = await imageResponse.blob();\n\n let contentType = \"image/jpeg\";\n if (key.includes(\".png\")) contentType = \"image/png\";\n else if (key.includes(\".gif\")) contentType = \"image/gif\";\n else if (key.includes(\".webp\")) contentType = \"image/webp\";\n\n return new Response(imageBlob, {\n headers: {\n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=31536000\",\n },\n });\n } catch (error) {\n return c.text(`Error: ${error.message}`, 500);\n }\n});\n\nexport default app.fetch;",[],[176],"files",[153,174],"counts",{"_189":32,"_190":191,"_192":32,"_193":194},"pulls","branches",1,"forks","envVars",{"_195":32,"_196":32},"count","emptyCount","contents",[199,202],{"_102":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":136,"_161":162,"_104":200,"_99":164,"_165":166,"_167":168,"_169":22,"_170":-5,"_98":201},["D",1764128955848],[155],{"_102":175,"_95":176,"_156":177,"_158":-5,"_159":137,"_160":178,"_161":162,"_104":203,"_99":180,"_165":181,"_167":182,"_169":22,"_170":-5,"_98":204},["D",1764128793323],[176],"upstreamProject",{"_102":145,"_95":207,"_110":-5,"_112":-5,"_108":109,"_23":208},"fileInputUploadExample",{"_93":209,"_129":210},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_102":140,"_104":213,"_214":215,"_95":43,"_138":145,"_99":142,"_139":-5,"_141":-5,"_216":217,"_106":-5,"_150":22,"_108":109,"_149":209,"_16":147,"_148":207},["D",1746037923618],"updatedAt",["D",1713115502707],"lockfileKey","1746074489357-esm.town_v_stevekrouse_fileInputUploadExample@20-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":224,"_192":229,"_230":231},{"_102":103,"_95":96,"_104":225,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":226,"_131":227,"_134":228,"_150":22},["D",1764125528489],{"_93":94,"_129":130},{"_93":94,"_133":130,"_14":113},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":140,"_141":142,"_143":109,"_144":145,"_146":147,"_148":96,"_149":94},[],"upstream",{"_102":145,"_95":207,"_110":-5,"_112":-5,"_108":109,"_23":232},{"_93":209,"_129":210},"actionData","errors"]

omarieclaire

Image_uploader