embed google drive picker as a part of page

Question

I want to embed/implement Google Drive as a part of my page; like a normal grid or a table instead of having as a popup. I have took a reference from GoogleAPI page. Also, researched many things for my requirements but nothing would worked for me.

Here is the javascript code that I am using

// The Browser API key obtained from the Google API Console.
// Replace with your own Browser API key, or your own key.
var developerKey = 'xxxxxxxxxxxxxx';

// The Client ID obtained from the Google API Console. Replace with your own Client ID.
var clientId = "xxxxxxxxxxxx.apps.googleusercontent.com"

// Replace with your own project number from console.developers.google.com.
// See "Project number" under "IAM & Admin" > "Settings"
var appId = "xxxxxxxxxxxx";

// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis.com/auth/drive'];

var pickerApiLoaded = false;
var oauthToken;
var picker;

// Use the Google API Loader script to load the google.picker script.
function loadPicker() {

  gapi.load('auth', {
    'callback': onAuthApiLoad
  });
  gapi.load('picker', {
    'callback': onPickerApiLoad
  });
}

function onAuthApiLoad() {

  window.gapi.auth.authorize({
      'client_id': clientId,
      'scope': scope,
      'immediate': false
    },
    handleAuthResult);
}

function onPickerApiLoad() {

  pickerApiLoaded = true;
  createPicker();
}

function handleAuthResult(authResult) {

  if (authResult && !authResult.error) {
    oauthToken = authResult.access_token;
    createPicker();
  }
}

// Create and render a Picker object for searching images.
function createPicker() {

  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.DocsView()
      .setIncludeFolders(true)
      .setOwnedByMe(true);
    picker = new google.picker.PickerBuilder()
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
      .setAppId(appId)
      .setOAuthToken(oauthToken)
      .addView(view)
      .addView(new google.picker.DocsUploadView().setIncludeFolders(true))
      .setDeveloperKey(developerKey)
      .setCallback(pickerCallback)
      .build();
    picker.setVisible(true);
  }
}

// A simple callback implementation.
function pickerCallback(data) {

  if (data.action == google.picker.Action.PICKED) {
    var fileId = data.docs[0].id;
    alert('The user selected: ' + fileId);
  }
}

<button onclick="loadPicker(); return false;">Pick From Google Drive</button>
<div id="result"></div>

<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>

Answer 1

Use PickerBuilder.toUri() instead of PickerBuilder.build(). It will return picker url and set this to iframe.

Answer 2

According to the issue reported here, gapi.auth is deprecated. You should use gapi.auth2 instead.

From Google Developers

Use,

gapi.auth2.init({
    client_id: 'CLIENT_ID.apps.googleusercontent.com',
    scope : scope ,
});

and it will return a Promise

gapi.auth2.GoogleAuth

A full reference can be seen in the Google Developer Page