Trying to set file thumbnail to Google Drive using javascript

Question

I am trying to add a thumbnail to my files that I am uploading to Drive using Javascript. I am trying to follow the directions at https://developers.google.com/drive/v3/web/file#uploading_thumbnails

To create my web-safe base64 image, I converted a simple red-square image to base64 using an online converter, which produced

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH/VscvDQAAAABJRU5ErkJggg==

then I took everything following data:image/png; and replaced / with _ and removed the ='s:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH_VscvDQAAAABJRU5ErkJggg

I then added the following to my original header in my request:

contentHints: {
    thumbnail: {
      image: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH_VscvDQAAAABJRU5ErkJggg",
      mimeType: "image/png"
    }
  }

However, I am failing to see any thumbnails for my files, in either the list or grid view in Google Drive.

Any thoughts as to what's going on?

Here's my entire file-saving code:

function saveFile(content) {
  var boundary = '-------314159265358979323846';
  var header = JSON.stringify({
    title: "My file",
    mimeType: "application/myFile",
    parents: ['root'],
    contentHints: {
      thumbnail: {
        image: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP4z8DwHwAFAAH_VscvDQAAAABJRU5ErkJggg",
        mimeType: "image/png"
      }
    }
  });
  var method = 'POST';
  var path = "/upload/drive/v2/files";

  var body = [
    "\r\n--" + boundary + "\r\nContent-Type: application/json\r\n\r\n" + header,
    "\r\n--" + boundary + "\r\nContent-Type: " + this.mimeType + "\r\n\r\n" + (content.getContentAsJSON()),
    "\r\n--" + boundary + "--"].join('');

  var request = gapi.client.request({
    path: path,
    method: method,
    params: {
      uploadType: 'multipart'
    },
    headers: {
      'Content-Type': 'multipart/related; boundary="' + boundary + '"'
    },
    body: body
  });

  request.execute(file);
};

From the Drive [documentation](https://developers.google.com/drive/v3/web/file), just always take note that: `Thumbnails are invalidated each time the content of the file changes. When supplying thumbnails, it is important to upload new thumbnails each time the content is modified. Metadata changes do not invalidate thumbnails.` You can try the solution in this [SO question](http://stackoverflow.com/questions/25648388/permanent-links-to-thumbnails-in-google-drive-api) if it works on you. — KENdi, Aug 12 '16 at 09:19

some1 · Accepted Answer · 2016-08-12T04:53:28.917

As you are using v3, the end-point URL path should be

var path = "/upload/drive/v3/files";

For v2, the reference is at https://developers.google.com/drive/v2/web/file#uploading_thumbnails It has a different structure/syntax

By the way, please take note that "If Drive can generate a thumbnail from the file, then it will use the generated one and ignore any you may have uploaded."

I have also found that your thumbnail image does not meet this requirement: "The minimum width for thumbnails is 220px."

You may try with the below instead, which is 220x20 px

"iVBORw0KGgoAAAANSUhEUgAAANwAAAAUCAYAAADm4VNYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABaSURBVHhe7dMxAcAgEMDALzo61r-zaoAFDZnulijI87_fHiCxboGA4SBkOAgZDkKGg5DhIGQ4CBkOQoaDkOEgZDgIGQ5ChoOQ4SBkOAgZDkKGg5DhIGQ4yMwcJVwCVCif97cAAAAASUVORK5CYII"

Thank you! The issue was v2 vs v3. (The thumbnail was a canard -- I had found a small image to use for the SO question, so someone could comment whether that was the correct way to convert to base64url, but in my actual app I was using a bigger image.) — Sam Fen, Aug 12 '16 at 16:00

Trying to set file thumbnail to Google Drive using javascript

1 Answers1