📂 Vue Google Picker

Illustration By: Udhaya Chandran

Last week we saw a general File Uploader with Vue.

Now let’s see how we can pick a file from Google Drive.

A Simple Deployed Example of Vue-Gdrive File Picker

Initial Setup with Google

Go to https://console.developers.google.com. Create a project.

After creating your project it will be listed, click on the project you created.

You would see this dialog box.

You will have to create two credentials:

  1. API Key
  2. OAuth Client Id

Creating an API Key :

Clicking on API key generates a unique key for the Project.

Creating an OAuth Client Id:

To create an OAuth client ID, you must first set a product name on the consent screen.

In here your OAuth consent screen (as seen in above pic), enter the Application details such as :

  • Application Name,
  • Application Logo, and
  • Authorized Domain.
Give in the name of your Application
An authorized domain which will send requests

After setting up the OAuth Consent screen.

Head on to create the OAuth Client Id.

Add your authorized Javascript Origins and redirect URIs
On successfully creating the OAuth client Id. You will get a unique Client ID and a secret key.

Now go to the Dashboard screen and follow the steps :

  • Click “Enable APIs and Services”.
  • Search for Google Picker API” and Enable the API.

Now you are all set to integrate the Google Picker with Vue Js Application.

Installing Vue and Creating a new Application.

(Skip to next section, if already done..)

Install vue-cli given Node v8.9 or above is installed.

Or

Creating a new Project.

Create a component GDriveSelector and include Google API script on mounted lifecycle hook of this component.

Declare the required data properties of the component.

Defining Functions for Connecting Google Drive

  • The function which handles Google Auth and Loads the Picker
  • The function which handles Google Auth Result
  • The function which creates the Picker
  • The callback function for Picker

The Picker callback gets a list of files, which was selected.

Once all is set, you are all ready to test your Google File Picker feature.

A simple working example can be found here.

This is Karthik representing Timeless.

If you find this blog post helpful, Share it with a friend.

If you find any difficulties please feel free to add your comments.

Coming up next week is Dropbox Chooser API with Vue.

Follow Practical Design and stay tuned.