Storing and serving up images from scriptDB with Google Content Service, jSonP and jQuery

Continuing the theme of using Google Apps Script Content service and scriptDB for lots of things, today’s post cover a few tricky topics.

  • How to convert an image to a blob so it can be stored in scriptDB.
  • How to use the content service as a server so that we can serve up that image to some request
  • How to respond to a jSonP request from Google Content service to get over cross domain request problems
  • How to convert that back into an image in jQuery
Why might we want to do this?
Google apps script gives you the opportunity to serve up content without actually needing a web server. Let’s say  you wanted to create some dynamic image content throug some scheduled event, but had nowhere to serve it up from? ScriptDB could be a good repository for such data, and Google Apps Script could serve it up
Loading image into scriptDB
Firstly, let’s take a look at loading an image into scriptDB. I’m going to use the silo functions to minimize development for this. These can be included in your project from the mcpher script library.
function blob() {
 var googleLogoBlob = UrlFetchApp.fetch

 var silo = mcpher.scriptDbSilo("blobs",ScriptDb.getMyDb()); ( {name: googleLogoBlob.getName(), 
                   blob: Utilities.base64Encode(googleLogoBlob.getBytes()) } );

Here we fetch some image, name it ‘googleLogoBlob’, convert it to base64 and save as a blob in a scriptDB silo called ‘blobs’.

Publishing as a web application
Next we need to publish a doGet(e) function that will be able to publish a jSon encoded version of that blob.
function doGet(e) {
    return ContentService

The result of that is shared here, and the function that does the work , takes the name parameter, and callback parameter to handle jSonP requests.

function blobGet(e) {
  // imgs are in base64 format in scriptDB
  var stuffSilo = mcpher.scriptDbSilo("blobs",ScriptDb.getMyDb());
  var results = stuffSilo.query( {name :});
  // find it?
  var result= results.hasNext() ? : { error: "no such blob " +};
  var j = Utilities.jsonStringify(result);
  // using jsonP?
  if (e.parameter.callback) {
      j = e.parameter.callback + "(" + j + ")"
  return j;

Note that if callback is specified (and it should be), the jSon response is wrapped up in a call to the given callback function.

Putting it together with jQuery
Finally, here is a jQuery snippet of making that call and showing the image. You’ll can test the whole thing  with this jsfiddle, reproduced below.
<div id='blobs'><img id='blobsimage' src=''/></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​



About brucemcp 225 Articles
I am a Google Developer Expert and decided to investigate Google Apps Script in my spare time. The more I investigated the more content I created so this site is extremely rich. Now, in 2019, a lot of things have disappeared or don’t work anymore due to Google having retired some stuff. I am however leaving things as is and where I came across some deprecated stuff, I have indicated it. I decided to write a book about it and to also create videos to teach developers who want to learn Google Apps Script. If you find the material contained in this site useful, you can support me by buying my books and or videos.