CODEWITHSUNDEEP
htmlimagegoogle-apps-script
Giannis Spiliopoulos
Giannis Spiliopoulos

Reputation: 2698

AppsScript- Using an image from Google Drive in HtmlService

The Images section of the following document

https://developers.google.com/apps-script/html_service

says that only images hosted on a public url can be displayed (due to the use of the image proxy).

Does that apply to images stored in the user's google drive? Is there any way to use such images as HtmlService elements?

Upvotes: 3

Views: 5016

Answers (4)

user15435275
user15435275

Reputation: 1

When you access a file using the Advanced Drive Service, the metadata has an attribute called "thumbnailLink", which works well for displaying images in the Html Service, particularly if it is a file you do not want to share publicly. It is also much quicker than the base64 method. The link expires within hours, so you'll need to do a fresh request each time.

For a single image, the following will do the trick:

Drive.Files.get(id).thumbnailLink

For several images, you can use the list method in the Advanced Drive Service. For example, the following will access all images in a folder at the given id.

  var query =  "'"+id+"' in parents and mimeType contains 'image/'"
  var files;
  var pageToken;
    do {
      files = Drive.Files.list({
        q: query,
        maxResults: 300,
        pageToken: pageToken
      });
      if (files.items && files.items.length > 0) {
        for (var i = 0; i < files.items.length; i++) {
          var file = files.items[i];
          var title = file.title
          var src = file.thumbnailLink
        }
        
      }
      pageToken = files.nextPageToken;
    } while (pageToken);

You can also adjust the size of the image by replacing the "s220" string with a larger number, e.g., src = src.replace("s220","s1000").

Upvotes: 0

user9224
user9224

Reputation: 77

You can embed your images using base 64 encoding.

function getFileBase64s(fileName) {
  var output = [];
  if (typeof fileName === 'string'){
    var fileIterator = DriveApp.getFilesByName(fileName);
    while (fileIterator.hasNext()) output.push(Utilities.base64Encode(fileIterator.next().getBlob().getBytes()));
  } else {
    SpreadsheetApp.getUi().alert('File name: '+fileName+' is not an string')
  };
  return output;
};

In your HTML template: 

<? getFileBase64s('fileName').forEach(function(fileBase64){ ?>
    <img src="data:image/png;base64,<?=fileBase64?>" >
<? }) ?>

Upvotes: 0

Corey G
Corey G

Reputation: 7858

There is not yet a way to do what you are asking.

Upvotes: 4

Zoot
Zoot

Reputation: 2235

It sounds like you're trying to offer some sort of permalink from Google Drive that is publicly accessible.

  • Open the File.

  • Under the File Menu, Click Sharing.

  • Under "Who has access", click Change. private

  • Select "Public on the web". sharing options

  • Click done, and copy the link listed. That is your publicly available link which should work for you. public link

Upvotes: 1

Related Questions