📂 Vue Google Picker
Last week we saw a general File Uploader with Vue.
Now let’s see how we can pick a file from Google Drive.
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:
- API Key
- OAuth Client Id
Creating an API Key :
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.
After setting up the OAuth Consent screen.
Head on to create the OAuth Client Id.
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.
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.