Iterating Google Drive files using API for metadata

Question

I want to display drive file metadata

"iconLink", "thumbnailLink"

of each of the files in drive, but getting output for fields like kind, id, name, mimeType only. While other fields are not displayed.

function loadDriveApi() {
    gapi.client.load('drive', 'v3', listFiles);
}

function listFiles() {
    var request = gapi.client.drive.files.list({});

    request.execute(function(resp) {
        var files = resp.files;
        if (files && files.length > 0) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                appendPre(file.iconLink);
            }
        } else {
            appendPre('No files found.');
        }
    });
}

Answer 1

In the v3 you need to specify which fields you want included in the metadata response. See the fields= parameter

Answer 2

at least you will need the scope: https://www.googleapis.com/auth/drive.metadata.readonly + OAuth (API-Key & Client-ID)

you can test it at: https://developers.google.com/drive/v3/reference/files/list

in the "fields" input add: files(iconLink,thumbnailLink)

if you use https://apis.google.com/js/api.js, be sure to add your domain to API-Key -> HTTP-Referrer & Client-ID -> JavaScript-Source & Forwarding-URI (@ https://console.developers.google.com/apis/credentials)

you can find a basic gapi usage sample here: https://github.com/google/google-api-javascript-client/blob/51aa25bed4f6c36d8e76fd3b9f7e280ded945c98/samples/loadedDiscovery.html

I promisified the gapi client a bit some time ago, because I disliked the mix of callbacks and thenables in the methods.. this worked for me (assuming api.js was already loaded), but only hold 100 file entries in the response.

window.gapiPromisified = {
  apiKey: 'XXXXXXXXXXX',
  clientId: 'XXXXX-XXXXXX.apps.googleusercontent.com'
}

window.gapiPromisified.init = function init () {
  return new Promise(resolve => {
    gapi.load('client:auth2', () => {
      if (!document.getElementById('gapiAuthButton')) {
        let authButton = document.createElement('button')
        authButton.id = 'gapiAuthButton'
        authButton.style.display = 'none'
        authButton.style.marginLeft = 'auto'
        authButton.style.marginRight = 0
        document.body.insertBefore(authButton, document.body.firstChild)
        authButton.addEventListener('click', () => {
          let GoogleAuth = gapi.auth2.getAuthInstance()
          if (GoogleAuth.isSignedIn.get()) {
            GoogleAuth.signOut()
          } else {
            GoogleAuth.signIn()
          }
        })
      }
      gapi.client.setApiKey(this.apiKey)
      gapi.auth2.init({ client_id: this.clientId })
      .then(() => resolve())
    })
  })
}

window.gapiPromisified.signIn = function signIn () {
  return new Promise(resolve => {
    let GoogleAuth = gapi.auth2.getAuthInstance()
    // Listen for sign-in state changes
    GoogleAuth.isSignedIn.listen(isSignedIn => {
      let authButton = document.getElementById('gapiAuthButton')
      if (isSignedIn) {
        authButton.textContent = 'Sign-out'
        resolve()
      } else {
        authButton.textContent = 'Sign-in'
      }
    })
    // Handle the initial sign-in state
    let authButton = document.getElementById('gapiAuthButton')
    let isSignedIn = GoogleAuth.isSignedIn.get()
    authButton.textContent = (isSignedIn) ? 'Sign-out' : 'Sign-in'
    document.getElementById('gapiAuthButton').style.display = 'block'
    if (isSignedIn) {
      resolve()
    } else {
      GoogleAuth.signIn()
    }
  })
}

window.gapiPromisified.getReady = function getReady () {
  if (!gapi.hasOwnProperty('auth2')) {
    return this.init()
    .then(() => this.signIn())
  } else {
    if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
      return Promise.resolve()
    } else {
      return this.signIn()
    }
  }
}

window.gapiPromisified.getScopes = function getScopes (scopes) {
  return new Promise((resolve, reject) => {
    let GoogleUser = gapi.auth2.getAuthInstance().currentUser.get()
    if (GoogleUser.hasGrantedScopes(scopes)) {
      resolve()
    } else {
      // method returns goog.Thenable
      GoogleUser.grant({ 'scope': scopes })
      .then(onFulfilled => {
        resolve(onFulfilled)
      }, onRejected => {
        reject(onRejected)
      })
    }
  })
}

window.gapiPromisified.loadAPI = function loadAPI (urlOrObject) {
  return new Promise((resolve, reject) => {
    // method returns goog.Thenable
    gapi.client.load(urlOrObject)
    .then(onFulfilled => {
      resolve(onFulfilled)
    }, onRejected => {
      reject(onRejected)
    })
  })
}

window.gapiPromisified.metadata = function metadata () {
  return new Promise((resolve, reject) => {
    this.getReady()
    .then(() => this.getScopes('https://www.googleapis.com/auth/drive.metadata.readonly'))
    .then(() => this.loadAPI('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest'))
    .then(() => {
      gapi.client.drive.files.list({
        fields: 'files(iconLink,thumbnailLink)'
      })
      .then(onFulfilled => {
        resolve(onFulfilled)
      }, onRejected => {
        reject(onRejected)
      })
    })
  })
}

window.gapiPromisified.metadata()
.then(res => {
  res.result.files.forEach(file => {
    console.log(file.iconLink)
    console.log(file.thumbnailLink)
  })
})