CODEWITHSUNDEEP
javascriptgoogle-apps-script
abrezey
abrezey

Reputation: 135

Trouble generating thumbnail image in google drive add-on

I am working on an add-on for google drive using Google Apps Script.

I'd like to be able to show a thumbnail preview for a file in my sidebar. According to my understanding of the documentation, I must encode the thumbnail as a base64 url, then pass it to setImageUrl() to display properly.

Here is how I currently create my image data string:

var thumbnailBlob = file.getThumbnail()
var thumbnailBlobBytes = thumbnailBlob.getBytes()
var thumbnailBlobType = thumbnailBlob.getContentType()
var encodedThumbnailUrl = "data:" + thumbnailBlobType + ";base64" + Utilities.base64Encode(thumbnailBlobBytes)

I then pass encodedThumbnailUrl into a card widget like so:

  var fileCard = CardService.newCardBuilder()
     .setHeader(CardService.newCardHeader().setTitle(fileName))
     .addSection(CardService.newCardSection()
                 .setHeader("File Info")
                 .addWidget(CardService.newImage().setImageUrl(encodedThumbnailUrl).setAltText("No preview available")))
     .build()

Unfortunately, this does not seem to work correctly, and my add-on displays "No preview available" every time. I think I am following the documentation exactly.

Does anyone know what the issue is here? Any help would be greatly appreciated!

Upvotes: 1

Views: 123

Answers (1)

Tanaike
Tanaike

Reputation: 201643

In your script, I think that the line of var encodedThumbnailUrl = "data:" + thumbnailBlobType + ";base64" + Utilities.base64Encode(thumbnailBlobBytes) might be the reason of your issue. In this case, encodedThumbnailUrl returns data:{mimeType};base64{base64Data}. I think that , is required to be put after base64. Because Utilities.base64Encode(thumbnailBlobBytes) returns the base64 data without including , at the top letter. So how about the following modification?

From:

var encodedThumbnailUrl = "data:" + thumbnailBlobType + ";base64" + Utilities.base64Encode(thumbnailBlobBytes)

To:

var encodedThumbnailUrl = "data:" + thumbnailBlobType + ";base64," + Utilities.base64Encode(thumbnailBlobBytes)

-In this case, ;base64 is modified to ;base64, like this official document.

Upvotes: 1

Related Questions