Using Google Drive to host images – mixed results

I’ve been messing around with the google Drive API lately, and haven’t really found out how to use it to host images for web sites satisfactorily. That was one of the things that prompted this post, showing how to encode images and store them in scriptDB and serve them up using the Google Apps Script content service.

So, can we host then directly on Google Drive ? It seems to me (although hopefully someone will comment on this post and put me straight), that a link to an image hosted on Google Drive will kick off the Google Docs viewer – like this – https://docs.google.com/a/mcpher.com/file/d/0B92ExLh4POiZRXdyVk9ncmNEaVk/edit

.. and of course this will fail when used in a web page as an image source.
<img  src=‘https://docs.google.com/a/mcpher.com/file/d/0B92ExLh4POiZRXdyVk9ncmNEaVk/edit’/>


However, I did notice that the image itself, when displayed in the viewer (click on copy image URL), has a googlecontent.com  address – which looks something like this

https://lh3.googleusercontent.com/GRjMTjc2v2t41M5Ib6jq-SuIJ3lPfN8JW7G5ts5oDveZY48ZciHmwk1YrlMyS-2mqFHLX0c_jt4

This URL can then be used inside tags on a web page to host images for a site.

I haven’t found out how to access this url from Google Apps Script to automate the URL extraction (but would be happy to hear from anyone who knows how).

Writing an image to Google Drive
So now that we have a (convoluted) way to link images from google Drive, how about creating them. In this case, we’ll take an image stored in blob and see if we can write that as an image file. Nothing very complex about that.

function writeToDrive() {
  var blobOb = blobObGet(“googleLogoBlob”);
  if (!blobOb.error) {
      var imgBlob = Utilities.newBlob(Utilities.base64Decode(blobOb.blob),”image/png”,blobOb.name + “.png” );
      var file = DocsList.createFile(imgBlob);
  }
}

function blobObGet(blobName) {
    // imgs are in base64 format in scriptDB
  var stuffSilo = mcpher.scriptDbSilo(“blobs”,ScriptDb.getMyDb());
  var results = stuffSilo.query( {name : blobName});
  // find it?
  return results.hasNext() ? results.next() : { error: “no such blob ” + blobName};
}

It successfully writes an image file to Google Drive, but for some reason, Google Docs Viewer can’t display it – so of course we can’t find out its googlecontent.com url. Someone on stackoverflow pointed me to this Known Drive Issue, so I guess I’m stymied there too.

More on this later… perhaps

Author: bm082975

3 thoughts on “Using Google Drive to host images – mixed results

  1. Martin to the rescue. Spent an AGE trying to get previews to show in Google Drive for PNGs. Then did it with this Picasa library in minutes… function get_post(blog_id, post_id){ var url = \”https://www.googleapis.com/blogger/v3/blogs/\”+ blog_id +\”/posts/\” + post_id var scope = 'https://www.googleapis.com/auth/blogger&#039;; var name = 'Blogger'; var fetchArgs = googleOAuth_(name,scope); var blogText = UrlFetchApp.fetch(url, fetchArgs).getContentText() var blogObj = JSON.parse(blogText) return blogObj }function copy_posts_images_to_picasa(blog_id, post_id){ // This uses https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/picasa-services/picasaapp var blog_post = get_post( blog_id, post_id ) var blog_text = blog_post.content // Get the image URLs from the content var regex = //ig //var regex = /([^\\s]+(?=\\.(jpg|gif|png))\\.\\2)/gm; // ALL images including URLs in links var images = [] while ( m = regex.exec(blog_text)){ // this gets out the right regex group images.push( m[1] ) } try{ //Create an album var folder_name = \”Blogger: \” + blog_post.title var image_folder = PicasaApp.createAlbum( folder_name, {visibility: 'public',description: folder_name}) }catch(e){ Logger.log(e) } var image_urls = [] for(var i = 0; i < images.length; i++){ var image = images[i] var name = image.split(\”/\”).pop() // get the last part of the URL name = name.replace(/\\+/gi, \” \”) // Tidy up a bit var blob = UrlFetchApp.fetch(image).getBlob().setName(name).setContentTypeFromExtension() // get the data var photo = image_folder.addPhoto(blob) // create a \”photo\” image_urls.push( {'old_url': image, 'new_url': photo.getUrl() }) } return image_urls}function test_copy_posts_images_to_picasa(){ var blog_id = '6274613198416400788' // Collaborative Tools Project var post_id = '4565262488541964259' // this post has LOTS of images in it. Logger.log( copy_posts_images_to_picasa(blog_id,post_id) )}

Leave a Reply

Your email address will not be published. Required fields are marked *