CODEWITHSUNDEEP
javascriptgoogle-drive-api
Sam Fen
Sam Fen

Reputation: 5264

Trying to set file thumbnail to Google Drive using javascript

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);
};

Upvotes: 0

Views: 1526

Answers (1)

some1
some1

Reputation: 877

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"

Upvotes: 1

Related Questions