Draft: Google Picker

.env.example

@@ -89,3 +89,7 @@ VITE_TRANSLOADIT_TEMPLATE=***
 VITE_TRANSLOADIT_SERVICE_URL=https://api2.transloadit.com
 # Fill in if you want requests sent to Transloadit to be signed:
 # VITE_TRANSLOADIT_SECRET=***
+
+VITE_GOOGLE_PICKER_CLIENT_ID=***
+VITE_GOOGLE_PICKER_API_KEY=***
+VITE_GOOGLE_PICKER_APP_ID=***

docs/companion.md

@@ -22,7 +22,7 @@ OAuth.
 ## When should I use it?
 
 If you want to let users download files from [Box][], [Dropbox][], [Facebook][],
-[Google Drive][googledrive], [Google Photos][googlephotos], [Instagram][],
+[Google Drive][googledrive], [Google Photos][googlephotos], [Google Picker][googlepicker], [Instagram][],
 [OneDrive][], [Unsplash][], [Import from URL][url], or [Zoom][] — you need
 Companion.
 
@@ -476,6 +476,7 @@ the secret, nothing else.
 | Facebook      | `facebook`     | `COMPANION_FACEBOOK_KEY`, `COMPANION_FACEBOOK_SECRET`, `COMPANION_FACEBOOK_SECRET_FILE`                                                                                                                                                |
 | Google Drive  | `drive`        | `COMPANION_GOOGLE_KEY`, `COMPANION_GOOGLE_SECRET`, `COMPANION_GOOGLE_SECRET_FILE`                                                                                                                                                      |
 | Google Photos | `googlephotos` | `COMPANION_GOOGLE_KEY`, `COMPANION_GOOGLE_SECRET`, `COMPANION_GOOGLE_SECRET_FILE`                                                                                                                                                      |
+| Google Picker | `googlepicker` | `COMPANION_GOOGLE_PICKER_CLIENT_ID`, `COMPANION_GOOGLE_PICKER_API_KEY`, `COMPANION_GOOGLE_PICKER_APP_ID`                                                                                                                                                     |
 | Instagram     | `instagram`    | `COMPANION_INSTAGRAM_KEY`, `COMPANION_INSTAGRAM_SECRET`, `COMPANION_INSTAGRAM_SECRET_FILE`                                                                                                                                             |
 | OneDrive      | `onedrive`     | `COMPANION_ONEDRIVE_KEY`, `COMPANION_ONEDRIVE_SECRET`, `COMPANION_ONEDRIVE_SECRET_FILE`, `COMPANION_ONEDRIVE_DOMAIN_VALIDATION` (Settings this variable to `true` enables a route that can be used to validate your app with OneDrive) |
 | Zoom          | `zoom`         | `COMPANION_ZOOM_KEY`, `COMPANION_ZOOM_SECRET`, `COMPANION_ZOOM_SECRET_FILE`, `COMPANION_ZOOM_VERIFICATION_TOKEN`                                                                                                                       |
@@ -979,6 +980,7 @@ automatically restart when files are changed.
 [facebook]: /docs/facebook
 [googledrive]: /docs/google-drive
 [googlephotos]: /docs/google-photos
+[googlepicker]: /docs/google-picker
 [instagram]: /docs/instagram
 [onedrive]: /docs/onedrive
 [unsplash]: /docs/unsplash

docs/sources/companion-plugins/google-picker.mdx

@@ -0,0 +1,5 @@
+---
+slug: /google-picker
+---
+
+**TODO**

docs/user-interfaces/dashboard.mdx

@@ -716,6 +716,8 @@ all Uppy plugins.
   [Google Drive](https://drive.google.com).
 - [`@uppy/google-photos`](/docs/google-photos) — import from
   [Google Photos](https://photos.google.com).
+- [`@uppy/google-picker`](/docs/google-picker) — import from
+  [Google Drive](https://drive.google.com).
 - [`@uppy/instagram`](/docs/instagram) — import from
   [Instagram](https://instagram.com).
 - [`@uppy/onedrive`](/docs/onedrive) — import from

e2e/package.json

@@ -26,6 +26,7 @@
     "@uppy/golden-retriever": "workspace:^",
     "@uppy/google-drive": "workspace:^",
     "@uppy/google-photos": "workspace:^",
+    "@uppy/google-picker": "workspace:^",
     "@uppy/image-editor": "workspace:^",
     "@uppy/informer": "workspace:^",
     "@uppy/instagram": "workspace:^",

packages/@uppy/google-picker/.npmignore

@@ -0,0 +1 @@
+tsconfig.*

packages/@uppy/google-picker/CHANGELOG.md

@@ -0,0 +1 @@
+# @uppy/google-picker

packages/@uppy/google-picker/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Transloadit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/@uppy/google-picker/README.md

@@ -0,0 +1,51 @@
+# @uppy/google-picker
+
+<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
+
+[![npm version](https://img.shields.io/npm/v/@uppy/google-photos.svg?style=flat-square)](https://www.npmjs.com/package/@uppy/google-photos)
+![CI status for Uppy tests](https://github.com/transloadit/uppy/workflows/Tests/badge.svg)
+![CI status for Companion tests](https://github.com/transloadit/uppy/workflows/Companion/badge.svg)
+![CI status for browser tests](https://github.com/transloadit/uppy/workflows/End-to-end%20tests/badge.svg)
+
+The Google Photos plugin for Uppy lets users import photos from their Google
+Photos account.
+
+A Companion instance is required for the GooglePhotos plugin to work. Companion
+handles authentication with Google, downloads photos from Google Photos and
+uploads them to the destination. This saves the user bandwidth, especially
+helpful if they are on a mobile connection.
+
+Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
+a versatile file encoding service.
+
+## Example
+
+```js
+import Uppy from '@uppy/core'
+import GooglePhotos from '@uppy/google-photos'
+
+const uppy = new Uppy()
+uppy.use(GooglePhotos, {
+  // Options
+})
+```
+
+## Installation
+
+```bash
+$ npm install @uppy/google-photos
+```
+
+Alternatively, you can also use this plugin in a pre-built bundle from
+Transloadit’s CDN: Edgly. In that case `Uppy` will attach itself to the global
+`window.Uppy` object. See the
+[main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
+
+## Documentation
+
+Documentation for this plugin can be found on the
+[Uppy website](https://uppy.io/docs/google-photos).
+
+## License
+
+The [MIT License](./LICENSE).

packages/@uppy/google-picker/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@uppy/google-picker",
+  "description": "The Google Picker plugin for Uppy lets users import files from their Google Drive account",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "type": "module",
+  "keywords": [
+    "file uploader",
+    "google drive",
+    "google picker",
+    "cloud storage",
+    "uppy",
+    "uppy-plugin"
+  ],
+  "homepage": "https://uppy.io",
+  "bugs": {
+    "url": "https://github.com/transloadit/uppy/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/transloadit/uppy.git"
+  },
+  "dependencies": {
+    "@uppy/companion-client": "workspace:^",
+    "@uppy/provider-views": "workspace:^",
+    "@uppy/utils": "workspace:^",
+    "preact": "^10.5.13"
+  },
+  "peerDependencies": {
+    "@uppy/core": "workspace:^"
+  }
+}

packages/@uppy/google-picker/src/GooglePicker.tsx

@@ -0,0 +1,98 @@
+import { UIPlugin, Uppy } from '@uppy/core'
+import { GooglePickerView } from '@uppy/provider-views'
+import {
+  Provider,
+  getAllowedHosts,
+  type CompanionPluginOptions,
+} from '@uppy/companion-client'
+import { h, type ComponentChild } from 'preact'
+
+import type { UppyFile, Body, Meta } from '@uppy/utils/lib/UppyFile'
+import type { UnknownProviderPluginState } from '@uppy/core/lib/Uppy.js'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
+import packageJson from '../package.json'
+import locale from './locale.ts'
+
+export type GooglePickerOptions = CompanionPluginOptions & {
+  clientId: string,
+  apiKey: string,
+  appId: string,
+}
+
+export default class GooglePicker<
+  M extends Meta,
+  B extends Body,
+> extends UIPlugin<GooglePickerOptions, M, B, UnknownProviderPluginState> {
+  static VERSION = packageJson.version
+
+  icon: () => h.JSX.Element
+
+  provider: Provider<M, B>
+
+  files: UppyFile<M, B>[]
+
+  constructor(uppy: Uppy<M, B>, opts: GooglePickerOptions) {
+    super(uppy, opts)
+    this.type = 'acquirer'
+    this.files = []
+    this.id = this.opts.id || 'GooglePicker'
+    this.icon = () => (
+      <svg
+        viewBox="-6 -6 36 36"
+        aria-hidden="true"
+        focusable="false"
+        width="32"
+        height="32"
+      >
+        <path fill="#4285F4" d="m22.6 12.3-.2-2.3H12v4.3h6a5 5 0 0 1-2.3 3.3v2.7h3.6c2-1.9 3.3-4.7 3.3-8z"/>
+        <path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.7c-1 .6-2.2 1-3.7 1-2.9 0-5.3-1.9-6.2-4.5H2.2v2.8A11 11 0 0 0 12 23z"/>
+        <path fill="#FBBC05" d="M5.8 14a6.6 6.6 0 0 1 0-4V7H2.2a10.9 10.9 0 0 0 0 10L5 14.6l.8-.6z"/>
+        <path fill="#EA4335" d="M12 5.4A6 6 0 0 1 16.2 7L19.4 4A11 11 0 0 0 2.2 7l3.6 2.8A6.6 6.6 0 0 1 12 5.4z"/>
+        <path fill="none" d="M1 1h22v22H1z"/>
+      </svg>
+    )
+
+    this.opts.companionAllowedHosts = getAllowedHosts(
+      this.opts.companionAllowedHosts,
+      this.opts.companionUrl,
+    )
+    this.provider = new Provider(uppy, {
+      companionUrl: this.opts.companionUrl,
+      companionHeaders: this.opts.companionHeaders,
+      companionKeysParams: this.opts.companionKeysParams,
+      companionCookiesRule: this.opts.companionCookiesRule,
+
+      provider: 'googlepicker',
+      pluginId: this.id,
+    })
+
+    this.defaultLocale = locale
+
+    this.i18nInit()
+    this.title = this.i18n('pluginNameGooglePicker')
+
+    this.render = this.render.bind(this)
+  }
+
+  install(): void {
+    const { target } = this.opts
+    if (target) {
+      this.mount(target, this)
+    }
+  }
+
+  uninstall(): void {
+    this.unmount()
+  }
+
+  render(): ComponentChild {
+    return GooglePickerView({
+      provider: this.provider, uppy: this.uppy,
+      clientId: this.opts.clientId,
+      apiKey: this.opts.apiKey,
+      appId: this.opts.appId,
+    })
+  }
+}

packages/@uppy/google-picker/src/index.ts

@@ -0,0 +1 @@
+export { default } from './GooglePicker.tsx'

packages/@uppy/google-picker/src/locale.ts

@@ -0,0 +1,5 @@
+export default {
+  strings: {
+    pluginNameGooglePicker: 'Google Picker',
+  },
+}

packages/@uppy/google-picker/tsconfig.build.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "outDir": "./lib",
+    "paths": {
+      "@uppy/companion-client": ["../companion-client/src/index.js"],
+      "@uppy/companion-client/lib/*": ["../companion-client/src/*"],
+      "@uppy/provider-views": ["../provider-views/src/index.js"],
+      "@uppy/provider-views/lib/*": ["../provider-views/src/*"],
+      "@uppy/utils/lib/*": ["../utils/src/*"],
+      "@uppy/core": ["../core/src/index.js"],
+      "@uppy/core/lib/*": ["../core/src/*"]
+    },
+    "resolveJsonModule": false,
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*.*"],
+  "exclude": ["./src/**/*.test.ts"],
+  "references": [
+    {
+      "path": "../companion-client/tsconfig.build.json"
+    },
+    {
+      "path": "../provider-views/tsconfig.build.json"
+    },
+    {
+      "path": "../utils/tsconfig.build.json"
+    },
+    {
+      "path": "../core/tsconfig.build.json"
+    }
+  ]
+}

packages/@uppy/google-picker/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../../tsconfig.shared",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": true,
+    "paths": {
+      "@uppy/companion-client": ["../companion-client/src/index.js"],
+      "@uppy/companion-client/lib/*": ["../companion-client/src/*"],
+      "@uppy/provider-views": ["../provider-views/src/index.js"],
+      "@uppy/provider-views/lib/*": ["../provider-views/src/*"],
+      "@uppy/utils/lib/*": ["../utils/src/*"],
+      "@uppy/core": ["../core/src/index.js"],
+      "@uppy/core/lib/*": ["../core/src/*"],
+    },
+  },
+  "include": ["./package.json", "./src/**/*.*"],
+  "references": [
+    {
+      "path": "../companion-client/tsconfig.build.json",
+    },
+    {
+      "path": "../provider-views/tsconfig.build.json",
+    },
+    {
+      "path": "../utils/tsconfig.build.json",
+    },
+    {
+      "path": "../core/tsconfig.build.json",
+    },
+  ],
+}

packages/@uppy/provider-views/package.json

@@ -26,6 +26,9 @@
     "preact": "^10.5.13"
   },
   "devDependencies": {
+    "@types/gapi": "^0.0.47",
+    "@types/google.accounts": "^0.0.14",
+    "@types/google.picker": "^0.0.42",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {

packages/@uppy/provider-views/src/GooglePicker/index.css

@@ -0,0 +1,7 @@
+/* https://stackoverflow.com/a/33082658/6519037 */
+.picker-dialog-bg {
+  z-index: 20000 !important;
+}
+.picker-dialog {
+  z-index: 20001 !important;
+}