Google File Picker API with Google Drive in Javascript – Working Example

Google File Picker API with Google Drive in Javascript – Working Example

Hi friends Welcome to this blog post. In this blog post I will be showing you a working example of Google File Picker API in Javascript in order to select Google Drive files. Let’s get started. In given figure I have given screenshots of this example.

 

First of all we have a simple button of show picker dialog. Once the user clicks the button then the user will be asked to select the google account to grant permission like this as shown below.

 

 

 

So you can see the permissions dialog is shown to the user where many google accounts are present. Once the user selects the google account then the file picker dialog will be shown to the user to select images,files etc like this as shown below.

READ  How to make a Simple Keylogger in Javascript - Coding Shiksha

 

 

So once the user selects any image or files from the picker dialog and click ok then the appropriate id of the file will be printed in the alert box something like this as shown below.

 

 

Steps to Make this Application:

 

  1. Get Client Id and Api Key

The very first step in making this app is to get credentials in the form of client id and api key from google developer console. Make a new project and click on create credentials like this

 

 

 

 

After filling out this basic information you will get the client id and client secret we only need the client id just copy it and store it somewhere.

 

READ  Build KeyLogger using Node.js & WebSockets to exploit XSS vulnerabilities in a Site

 

After this just open xammp localhost server and start apache at port 80 something like this as shown below.

 

 

Source Code

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>Google Picker Example</title>

    <script type="text/javascript">

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

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.
    var clientId = "//Your Client Id//"

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

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

    var pickerApiLoaded = false;
    var oauthToken;

    // 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.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("image/png,image/jpeg,image/jpg");
        var 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())
            .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);
      }
    }
    </script>
  </head>
  <body>
    <div id="result"></div>
    <button onclick="showPickerDialog()">Show Picker Dialog</button>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
    <script>
    function showPickerDialog(){
        loadPicker()
    }
    </script>
  </body>
</html>

 

Leave a Reply