Image from Blob Storage

\n {imageData\n ? (\n \n )\n : error\n ?

Error: {error}

\n :

Loading image...

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.url.endsWith(\"/image\")) {\n try {\n const response = await blob.get(\"test.png\");\n\n return new Response(response.body, {\n headers: { \"Content-Type\": \"image/png\" },\n });\n } catch (error) {\n console.error(\"Error fetching blob:\", error);\n return new Response(JSON.stringify({ error: \"Server error\", details: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Serve index.html, aka \"/\"\n return new Response(\n `\n \n \n Image from Blob Storage\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f0f0f0;\n}\n#root {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\nh1 {\n color: #333;\n}\n`;","createdAt",["D",1727801615583],"version",28,"currentUserHasLiked","likeCount","forkCount",1,"referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","ashryanio","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaG5kR0hRRTM0S1BSeXlIR2hCdjFqb1dTS3AifQ","forkedVal","interval","slug","ashryanio/getBlobAndRenderAsImage","description","getBlobAndRenderAsImage Shows how to get a Val Town blob and render it as an image in the DOM with React. Setup Make sure you have an image named test.png in your Val Town blob storage (alternatively, you can change the key name in the blob getter in the script). To easily upload an image to your blob storage, fork this val , run it, and enter your API key in the password input. How it works Fetching the blob: The client-side React component makes a fetch request to \"/image\". This request is handled by our server function. Server-side handling: The server function calls blob.get(\"test.png\") . This blob.get() method makes an HTTP request to the Val Town API. The API returns a Response object containing the image data. Processing the blob on the server: We receive this Response object from blob.get() . We don't need to extract the data on the server side. We can directly return this Response object to the client. Sending the response to the client: We set the appropriate \"Content-Type\" header (e.g., \"image/png\"). We return the Response object to the client. Client-side handling: The fetch request in the React component receives the Response. We call response.blob() to get a Blob object from the Response. Creating a data URL: We create a FileReader object. We use FileReader to read the Blob as a data URL. This data URL is a base64-encoded string representing the image. Updating the React state: We set the data URL as the state of our component. Rendering the image: We use the data URL as the src attribute of an tag. The browser decodes the base64 data and renders the image. Further reading on Val Town blobs Blob storage overview in Val Town docs Val Town REST API references for blobs Val Town blob std lib source code","versions",[142,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,248,251],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1727801615583],{"_118":146,"_143":-5,"_116":147,"_113":148},27,["D",1727801274132],"e760cdd2-8014-11ef-8cdb-de64eea55b61",{"_118":150,"_143":-5,"_116":151,"_113":152},26,["D",1727801269025],"e4552764-8014-11ef-8cdb-de64eea55b61",{"_118":154,"_143":-5,"_116":155,"_113":156},25,["D",1727801230787],"cd8a9a14-8014-11ef-accc-de64eea55b61",{"_118":158,"_143":-5,"_116":159,"_113":160},24,["D",1727801181588],"b0378bfc-8014-11ef-b5b1-de64eea55b61",{"_118":162,"_143":-5,"_116":163,"_113":164},23,["D",1727801156998],"a18f6d7c-8014-11ef-98cf-de64eea55b61",{"_118":166,"_143":-5,"_116":167,"_113":168},22,["D",1727801060322],"67efe952-8014-11ef-a96d-de64eea55b61",{"_118":170,"_143":-5,"_116":171,"_113":172},21,["D",1727800993094],"3fddb0d4-8014-11ef-b42e-de64eea55b61",{"_118":174,"_143":-5,"_116":175,"_113":176},20,["D",1727719845239],"4ff99bb2-7f57-11ef-8dd9-de64eea55b61",{"_118":178,"_143":-5,"_116":179,"_113":180},19,["D",1727719663879],"e3e036f2-7f56-11ef-8319-de64eea55b61",{"_118":182,"_143":-5,"_116":183,"_113":184},18,["D",1727717497430],"d8926414-7f51-11ef-9ea0-de64eea55b61",{"_118":186,"_143":-5,"_116":187,"_113":188},17,["D",1727717462670],"c3dab5d0-7f51-11ef-bb07-de64eea55b61",{"_118":190,"_143":-5,"_116":191,"_113":192},16,["D",1727713511310],"90a8cf16-7f48-11ef-aee6-de64eea55b61",{"_118":194,"_143":-5,"_116":195,"_113":196},15,["D",1727712849241],"06091060-7f47-11ef-91cb-de64eea55b61",{"_118":198,"_143":-5,"_116":199,"_113":200},14,["D",1727712655199],"92609fac-7f46-11ef-9224-de64eea55b61",{"_118":202,"_143":-5,"_116":203,"_113":204},13,["D",1727712540142],"4dcc4a26-7f46-11ef-bed3-de64eea55b61",{"_118":206,"_143":-5,"_116":207,"_113":208},12,["D",1727712323429],"cca0b48c-7f45-11ef-beb9-de64eea55b61",{"_118":210,"_143":-5,"_116":211,"_113":212},11,["D",1727712283885],"b50e85c4-7f45-11ef-925c-de64eea55b61",{"_118":214,"_143":-5,"_116":215,"_113":216},10,["D",1727712240196],"9b044a9c-7f45-11ef-976b-de64eea55b61",{"_118":218,"_143":-5,"_116":219,"_113":220},9,["D",1727712146686],"6347cf3e-7f45-11ef-8d46-de64eea55b61",{"_118":222,"_143":-5,"_116":223,"_113":224},8,["D",1727711926197],"dfdbe7b6-7f44-11ef-b5ae-de64eea55b61",{"_118":226,"_143":-5,"_116":227,"_113":228},7,["D",1727711840996],"ad1312e6-7f44-11ef-a86d-de64eea55b61",{"_118":230,"_143":-5,"_116":231,"_113":232},6,["D",1727711741622],"71d7d1a8-7f44-11ef-a3c9-de64eea55b61",{"_118":234,"_143":-5,"_116":235,"_113":236},5,["D",1727711602850],"1f20d1f8-7f44-11ef-b6ee-de64eea55b61",{"_118":238,"_143":-5,"_116":239,"_113":240},4,["D",1727711592234],"18cd21d0-7f44-11ef-b6ee-de64eea55b61",{"_118":242,"_143":-5,"_116":243,"_113":244},3,["D",1727711545227],"fcc883a8-7f43-11ef-93a2-de64eea55b61",{"_118":90,"_143":-5,"_116":246,"_113":247},["D",1727710134345],"b3d4c4ca-7f40-11ef-abb0-de64eea55b61",{"_118":123,"_143":-5,"_116":249,"_113":250},["D",1727710027007],"73da4976-7f40-11ef-b165-de64eea55b61",{"_118":31,"_143":-5,"_116":252,"_113":253},["D",1727709954507],"48a38222-7f40-11ef-b58e-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":261,"_262":263,"_94":264},"single","redirect","/v/ashryanio/getBlobAndRenderAsImage/versions",{"_113":111,"_114":115,"_118":119,"_116":265,"_266":99,"_100":101,"_108":109,"_130":131,"_11":96,"_267":-5,"_268":-5,"_269":-5,"_258":26,"_136":137},["D",1727801615583],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

getBlobAndRenderAsImage

Version 28