Using Google Drive to host images – mixed results

October 24, 2012 Drive, Google API 3

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 <img> 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

 

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.
Twitter

3 Comments

  2. 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&#39;;
    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) )
    }

Comments are closed.