title: embed google drive picker as a part of page
body: <p>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.</p>
  
  <p>Here is the javascript code that I am using</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 &amp; Admin" &gt; "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 &amp;&amp; !authResult.error) {
      oauthToken = authResult.access_token;
      createPicker();
    }
  }
  
  // Create and render a Picker object for searching images.
  function createPicker() {
  
    if (pickerApiLoaded &amp;&amp; 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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="loadPicker(); return false;"&gt;Pick From Google Drive&lt;/button&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  
  &lt;!-- The Google API Loader script. --&gt;
  &lt;script type="text/javascript" src="https://apis.google.com/js/api.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>