Vick's

Google Drive Picker is a powerful JavaScript library that allows users to easily select files from their Google Drive within your web application. To use it, you’ll need to configure credentials in Google Cloud Console:

• OAuth 2.0 Client ID (for authentication)

• API Key (for Google Drive and Picker APIs)

In this guide, we’ll walk through the process step by step and show you how to integrate Google Drive Picker in your app.

👉 Demo Project: drivepicker.pythonanywhere.com
👉 Source Code: GitHub – Google Drive File Picker

🛠️ Step 1: Create a Google Cloud Project

1. Go to Google Cloud Console.

2. Sign in with your Google account.

3. At the top left, click the project dropdown → New Project.

4. Give your project a name (e.g., Drive Picker Demo) → click Create.

📚 Step 2: Enable Required APIs

1. Inside your project, navigate to:
   APIs & Services > Library.

2. Enable the following APIs:

   • Google Drive API

   • Google Picker API

🔑 Step 3: Configure OAuth Consent Screen

Before creating OAuth credentials, configure your app’s consent screen:

1. In the left menu, go to APIs & Services > OAuth consent screen.

2. Select External if you’re not using Google Workspace.

3. Fill out required details:

   • App name (e.g., Drive Picker App)

   • User support email

   • Developer contact information

4. Add scopes:

   https://www.googleapis.com/auth/drive.readonly
   

5. Add your test users (at least your own Google account).

6. Save your configuration.

🧩 Step 4: Create OAuth 2.0 Client ID

1. Go to APIs & Services > Credentials.

2. Click Create Credentials → OAuth Client ID.

3. Choose Web application.

4. Enter a name (e.g., Drive Picker Client).

5. Under Authorized JavaScript origins, add your domain:

   • For development: http://localhost:5500

   • For production: your deployed domain

6. Leave Authorized redirect URIs blank (Picker doesn’t need it).

7. Click Create → copy your Client ID.

👉 Save this as GOOGLE_CLIENT_ID in your .env file.

🔐 Step 5: Create an API Key

1. Still in Credentials, click Create Credentials → API Key.

2. Copy the generated key → this is your GOOGLE_API_KEY.

3. (Highly recommended) Secure your API key:

   • API restrictions: Restrict to Google Drive API and Google Picker API.

   • Application restrictions: Restrict by HTTP referrers.

     • Example for dev: http://localhost:5500/*

     • Example for prod: https://yourdomain.com/*

👉 Save this as GOOGLE_API_KEY in your .env file.

⚙️ Step 6: Plug Into Your Project

Now that you have your Client ID and API Key, you can integrate Google Drive Picker.

🎯 Final Notes

✅ You now have a working Google Drive Picker integration with proper authentication.
✅ Store your API Key and Client ID securely (use environment variables in production).
✅ Always restrict your API keys to reduce security risks.

👉 Try it live here: drivepicker.pythonanywhere.com
👉 Fork the source: GitHub – Google Drive File Picker

✨ With this setup, you can let users pick files directly from their Google Drive inside your web app.