Val Town Code SearchReturn to Val Town

1# getBlobAndRenderAsImage
2
3Shows how to get a Val Town blob and render it as an image in the DOM with React.
4
5## Setup
6
7Make 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).
8
9To easily upload an image to your blob storage, [fork this val](
10getBlobAndRenderAsImage), run it, and enter your API key in the password input.
11
12## How it works
141. Fetching the blob:
15
16  - The client-side React component makes a fetch request to "/image".
17  - This request is handled by our server function.
18
22  - The server function calls `blob.get("test.png")`.
23  - This `blob.get()` method makes an HTTP request to the Val Town API.
24  - The API returns a Response object containing the image data.
25
26
344. Sending the response to the client:
35
36  - We set the appropriate "Content-Type" header (e.g., "image/png").
37  - We return the Response object to the client.
38
48  - We create a FileReader object.
49  - We use FileReader to read the Blob as a data URL.
50  - This data URL is a base64-encoded string representing the image.
51
52
56
57
588. Rendering the image:
59
60  - We use the data URL as the src attribute of an `<img>` tag.
61  - The browser decodes the base64 data and renders the image.
62
63## Further reading on Val Town blobs

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

3Protect your vals behind a password. Use session cookies to persist authentication.
4
5![6ed0648ae8813e958dbe79468572cb52f578239c0fae55857a13660beebdc5fd.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36c1dc4f-4e19-457b-ad89-0bf139754e00/public)
6
7## Demo

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

141
142
143  // serves to be displayed in browser instead of download (eg for images, PDFs)
144  async serve(key: string, rangeHeader?: string): Promise<Response> {
145    const stored = await blob.get(this.getKey(key));
221    case "jpg":
222    case "jpeg":
223      return "image/jpeg";
224    case "png":
225      return "image/png";
226    case "mp3":
227      return "audio/mpeg";

25  | "json-schema"
26  | "ports-spec"
27  | "image"
28  | "code";
29

72  | "ports-spec"
73  /**
74   * Indicates that the input or output port represents an image. The image can
75   * be a URL or a base64 encoded image.
76   */
77  | "image"
78  /**
79   * Indicates that the input or output represents some sort of code

165. If the user is logged in, you now have a email you can work with. If not, it will be empty
17
18![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36674739-cd88-472c-df16-cd0b3a62bc00/public)
19
20[Live demo](https://stevekrouse-lastlogin_demo.web.val.run/)