How do I handle BLOBs from API responses?

[lanedsmu]

When handling APIs that return BLOB data (such as images), the data returned by Lowcoder isn't a BLOB--it's a text string. To all appearances, this is a Base64-encoded string, but an initial pass at decoding this string doesn't result in a usable image or other binary data--the result remains a string.

To test this, we'll create a query using cat images from an unauthenticated API endpoint:

This screen is taken using the URL: https://cdn2.thecatapi.com/images/86v.jpg
We can see the response is a long string that looks to be a Base64-encoded string, but when we try to decode that or use is as an image source in lowcoder, we get an error:

It turns out that the results of the query are in fact doubly-encoded. To make use of this as an image or other BLOB, simply decode the string again using atob():

{{atob(qryBlobResponse.data)}}

The app that demonstrates this can be found in the Lowcoder app marketplace.