Draft: Google Picker

[mifi]

Initial POC of Google Picker.

closes #5382

How to test:

Google Developer console setup

Instructions for enabling the Picker API in the Google Developer console for the first time:

• Enable Google Picker API in Google Developer console https://console.cloud.google.com/apis/library/picker.googleapis.com
• Goto https://console.cloud.google.com/apis/credentials for the correct project
• Create API key and use as apiKey
• Create a OAuth2.0 Client ID with type "Web application" (or reuse existing). Use Client ID from as clientId
• Click Project name dropdown (top of google console) and find the ID column for the project and use it as appId
• Maybe restrict the API key?
• Must setup Origin also

Now set VITE_GOOGLE_PICKER_CLIENT_ID, VITE_GOOGLE_PICKER_API_KEY, VITE_GOOGLE_PICKER_APP_ID in your .env file and run yarn dev:with-companion

Problems/discussion

• redirect_uri needs to be frontend URI, and wilcard is not allowed. Update: I've made appId, clientId and apiKey as Uppy options (not Companion) so this should be OK because people can then use their own credentials.
• UI is not very good, wraps weirdly etc
• No deep/multi select inside folders like we have now with Uppy
• Cannot seem to be able to select drives shared with me
• Cannot seem to get google photos to work (only Google Drive)
• In the end I decided not to put it in RemoteSources because it has different options

TODO

• tsconfig.json (I have just copy-pasted from google photos)
• tsconfig.build.json (I have just copy-pasted from google photos)
• google-picker.mdx (I have just copy-pasted from google photos)
• google-picker/README.md (I have just copy-pasted from google photos)
• in onPicked add the files along with any metadata needed by companion to download the files, like accessToken, clientId etc.
• Create a new endpoint in companion to allow downloading files and pass the files along with parameters like clientId, scope, accessToken. The endpoint will call gapi.client.drive.files.get, and stream (download/upload) the file to the destination (e.g. tus/s3 etc). Need to make sure the endpoint is secure somehow in a way that it cannot be abused/exploited.
• maybe this.provider is not needed in GooglePicker.ts
• Need to save the auth token somewhere? (local storage?)

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher

🚮 Removed packages: npm/[email protected]), npm/[email protected]), npm/[email protected])

View full report↗︎

[github-actions]

Diff output files

diff --git a/packages/@uppy/provider-views/lib/index.js b/packages/@uppy/provider-views/lib/index.js
index 3e5b730..319f9c4 100644
--- a/packages/@uppy/provider-views/lib/index.js
+++ b/packages/@uppy/provider-views/lib/index.js
@@ -1,2 +1,3 @@
+export { default as GooglePickerView } from "./GooglePicker/index.js";
 export { default as ProviderViews, defaultPickerIcon } from "./ProviderView/index.js";
 export { default as SearchProviderViews } from "./SearchProviderView/index.js";
diff --git a/packages/@uppy/transloadit/lib/index.js b/packages/@uppy/transloadit/lib/index.js
index 5d77af0..6e48521 100644
--- a/packages/@uppy/transloadit/lib/index.js
+++ b/packages/@uppy/transloadit/lib/index.js
@@ -458,6 +458,7 @@ function _getClientVersion2() {
   addPluginVersion("Facebook", "uppy-facebook");
   addPluginVersion("GoogleDrive", "uppy-google-drive");
   addPluginVersion("GooglePhotos", "uppy-google-photos");
+  addPluginVersion("GooglePicker", "uppy-google-picker");
   addPluginVersion("Instagram", "uppy-instagram");
   addPluginVersion("OneDrive", "uppy-onedrive");
   addPluginVersion("Zoom", "uppy-zoom");