Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

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

/
/
/
344 Views

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 add Custom Fonts in JSPDF | JSPDF Tutorial | Html to Pdf Tutorial

 

 

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  jsPDF Library & jsPDF AutoTable Library Crash Course in Javascript 2020

 

 

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 Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :