Permanent links to thumbnails in Google Drive API

Question

I'm using Google Drive API (PHP) to upload some photos to my Drive. When a file is uploaded, a Google_DriveFile object is returned in the response to confirm the successful transfer. It includes a field called thumbnailLink, accessible through the getThumbnailLink getter. Its content may look like this:

https://lh4.googleusercontent.com/dqVdU195R4_0ZtWxsJlhW1Fr2K30xa2hH3V1KV4UrTBl9QkhOSR0ZqN9HoB-TjEQv8SIJw=s220

Until today, I was sure that the link doesn't change by itself over time. However, when I tried to display a thumbnail of a photo I have on my Drive, using a cached address I keep in my local database, I got a 403 error - you can see it under the mentioned link. I asked the API for the current link to the thumbnail and it's now completely different.

It happened to me only once but for multiple files, i.e. all the files I had on my Drive suddenly got new thumbnail links.

Is there a way to quickly retrieve a thumbnail of a document (preferably, a photo) by some constant value or to be sure that it won't change? The perfect solution would be to access the thumbnail under a link that includes the document's id instead of some hash that may change.

Answer 1

Try this:

https://drive.google.com/thumbnail?authuser=0&sz=w320&id=[fileid]

Where:

• sz is a size, where you may use as w (width), as h (height)
• fileid is a file id. You may find it in "share" menu by right click in Google Drive UI.

Answer 2

I have gone through the API Documentation as they have provided:

Important: 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.

According to the information it means that a new Thumbnail is only generated only when the contents of the file are modifided. But in your case it is really weired thing and the contents are not changed but the thumbnail are Changed. As from documentation there is no batch process thing avaiable but another way around is available i.e. Web Hook

According to the Documentation there is web hook available i.e. Files:Watch process through which one can track the changes are made to file. Thus, it means every time contents are changed then hook would run and you can change the cache of the image thumbnail.

HTTP request can be sent to request the watching the files changing

POST https://www.googleapis.com/drive/v2/files/fileId/watch

Here fileID means the ID provided after loading the file.

In the request body, supply data with the following structure:

id     ==>  string  (A UUID or similar unique string that identifies 
            this channel.)

token# ==>  string  (An arbitrary string delivered to the target address with 
                    each notification delivered over this channel).

expiration# => long (Date and time of notification channel expiration, 
                     expressed as a Unix timestamp, in milliseconds.)

 type  ==> string  (The type of delivery mechanism used for this channel. 
                   The only option is web_hook.)

 address => string  (The address where notifications are delivered 
                     for this channel.)

 # Optional.

If the contents get changed then new Thumbnail is generated and hook will notify you address and through your address you can fetch new information.

Answer 3

Here is another solution. Let's say we store only GDrive ID of the images or PDFs (google generate thumbs for many file types).

we can send request to gDrive to get valid thumbnail since looks like thumbs will expire even if there is no changes to the file.

In this case each thumbnail inside Angular component. If you use something else you can create array of links and iterate through it to create proper thumb links.

Here is the code:

const thumb = () => {
            if (this.item.DriveId) {
            this.getThumb(this.item.DriveId, this.authToken)
                .then(response => {
                    console.log(`response from service ${response}`);
                    // Set thumbnail width size to 300px or any other width if needed
                    this.item.externalThumbnailId = response.slice(0, -3) + 300;
                })
                //here we can handle cases when API limit exceeded 10 req in a sec
                .catch(e => {
                    if(e.data.error.message == 'User Rate Limit Exceeded'){
                        console.log('Failed to load thumb. trying one more time');
                        setTimeout(thumb, 1000);
                    } else {
                        console.log(e);                        
                    }                       
                });
            }
            };

//call this function on component load. 
thumb();

Another solution will be to write some backend script that updates thumbs in DB records.