The goal of this Vue application is to use the Google Picker API to select a file from the users Google Drive. Then the file is downloaded, and its content is displayed on the web page.
Previous web resources for Google Picker on Vue exist. The Google Picker used on this project was developed with the assistance of an article found here
The main concern for this project was displaying the contents of a file once selected by the Google Picker. In order to do this, I utilized the Google Drive API documentation found here
After cloning this project, several steps are still needed to setup the application.
-
Ensure you have a project setup on the Google API Console. On this project, generate an API key and a OAuth 2.0 Client ID. Follow the article in the Development tab for help on this.
-
The following 2 APIs must be enabled on the project using the API console
- Google Picker API
- Google Drive API
-
In the Vue component found here, /src/components/GDriveSelector.vue make the following changes to the data(),
- set developerKey to your API Key
- set clientID to your Client ID
-
In a terminal, run the command below to install dependencies
npm install
- Now run the command below to serve the project
npm run serve
- Utilizing Google Cloud Platform
- Google Picker API
- Acquire content of file from user's Google Drive