google-drive-picker.mdx

slug
/google-drive-picker

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

import UppyCdnExample from '/src/components/UppyCdnExample'; import CompanionOptions from './_companion-options.mdx';

Google Drive Picker

The @uppy/google-drive-picker plugin lets users import files from their Google Drive account using the new Picker API.

A Companion instance is required for the Google Drive Picker plugin to work. Companion downloads the files from Google Drive, and uploads them to the destination. This saves the user bandwidth, especially helpful if they are on a mobile connection.

You can self-host Companion or get a hosted version with any Transloadit plan.

See also Google Photos Picker.

When should I use this?

When you want to let users import files from their Google Drive account.

You should use this plugin over our other Google Drive plugin if you want to avoid using a restricted API scope, which requires CASA Tier 2 compliance.

The downside of using the Picker UI made by Google is less controls, inability to select folders, downloading an additional bundle, and a less consistent user experience.

npm install @uppy/google-drive-picker

yarn add @uppy/google-drive-picker

{` import { Uppy, GoogleDrivePicker } from "{{UPPY_JS_URL}}" const uppy = new Uppy() uppy.use(GoogleDrivePicker, { // Options }) `}

Use

Using Google Drive Picker requires setup in both Uppy and Companion.

Prerequisites

Make sure your web app is hosted on a server that either does not set Cross-Origin-Opener-Policy at all or sets it to same-origin-allow-popups.

Initial setup

To sign up for API keys, go to the Google Developer Console.

Create a project for your app if you don’t have one yet.

• On the project’s dashboard, enable the Google Picker API (for Google Drive).
• Create an API key:
  • Application restrictions: Websites
  • Website restrictions: Add the base URL of the domain name you’re hosting the frontend web app on, example: https://example.com. Note that if you’re testing locally you need to add http://localhost:LOCAL_PORT or similar
  • API restrictions: Restrict key: Tick Google Picker API
  • Click Show key and use it as the apiKey argument to Uppy.
• Create an OAuth 2.0 Client ID of type Web application:
  • Authorized JavaScript origins: Add the base URL of the domain name you’re hosting the frontend web app on, example: https://example.com. Note that if you’re testing locally you need to add http://localhost:LOCAL_PORT or similar. This will be your clientId in Uppy.
• For how to find appId, see options below.
• Some users reported that the Google Drive API must be enabled as well, so if you’re having problems, please try that.

Use in Uppy

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import GoogleDrivePicker from '@uppy/google-drive-picker';

import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';

new Uppy()
	.use(Dashboard, { inline: true, target: '#dashboard' })
	.use(GoogleDrivePicker, {
		companionUrl: 'https://your-companion.com',
		clientId: 'From Google Developer Console',
		apiKey: 'From Google Developer Console',
		appId: 'From Google Developer Console',
	});

Use with Transloadit

import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit';
import GoogleDrivePicker from '@uppy/google-drive-picker';

uppy.use(GoogleDrivePicker, {
	companionUrl: COMPANION_URL,
	companionAllowedHosts: COMPANION_ALLOWED_HOSTS,
	clientId: 'From Google Developer Console',
	apiKey: 'From Google Developer Console',
	appId: 'From Google Developer Console',
});

Use in Companion

Companion is used to download/upload the picked files. Companion supports this plugin out-of-the-box, however it must be enabled in Companion with the enableGooglePickerEndpoint / COMPANION_ENABLE_GOOGLE_PICKER_ENDPOINT option. For this plugin, all credentials are public (non-secret) and provided in the frontend.

API

Options

clientId

The client ID from the Initial setup (string).

apiKey

The API key from the Initial setup (string).

appId

The App ID can be found in the Google Developer Console: Project number under IAM & Admin > Settings.

:::note

Make sure you use the project number (not project ID or project name), and make sure you’re in the correct project. Note that if this is set to the wrong value it will be ignored by Google when your project is in testing mode, but once in production users will get 404 errors when trying to download.

:::