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"

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

// Scope to use to access user's Drive items.
var scope = [''];

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=".js"></script>

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."

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

// Scope to use to access user's Drive items.
var scope = ['https://www.googleapis./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./js/api.js"></script>

• javascript
• google-api
• google-drive-api
• drive
• google-drive-realtime-api

Share Improve this question Follow edited Jun 14, 2017 at 5:29 Sagar V 12.5k88 gold badges4545 silver badges7070 bronze badges asked May 10, 2017 at 10:51 Ishan MalikIshan Malik 13911 gold badge44 silver badges1212 bronze badges 1

• 1 Have you got an answer for above question? If yes, please post your answer. – Mohin Mathakia Commented Jun 13, 2017 at 6:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

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

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.',
    scope : scope ,
});

and it will return a Promise

gapi.auth2.GoogleAuth

A full reference can be seen in the Google Developer Page

It sounds like you want to use the Google Drive API rather than the picker API.

This allows you to query drive for files without using the GUI.

https://developers.google./drive/v3/web/quickstart/js

The example in this quickstart prints out a list of files from the authorized account onto the page.