From 559e980c6730242586200aaf08ed9c4d1e61e79c Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Fri, 12 Apr 2024 22:55:08 +0200 Subject: [PATCH] document google photos see https://github.com/transloadit/uppy/pull/5061 --- docs/companion.md | 4 +- docs/guides/migration-guides.md | 1 + .../companion-plugins/google-drive.mdx | 14 +- .../companion-plugins/google-photos.mdx | 185 ++++++++++++++++++ docs/sources/companion-plugins/instagram.mdx | 2 +- docs/user-interfaces/dashboard.mdx | 2 + package.json | 1 + src/pages/examples.tsx | 14 +- src/pages/index.tsx | 3 +- 9 files changed, 212 insertions(+), 14 deletions(-) create mode 100644 docs/sources/companion-plugins/google-photos.mdx diff --git a/docs/companion.md b/docs/companion.md index 78780a0e9..c0e38e868 100644 --- a/docs/companion.md +++ b/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], [Instagram][], [OneDrive][], [Unsplash][], [Import +[Google Drive][googledrive], [Google Photos][googlephotos], [Instagram][], [OneDrive][], [Unsplash][], [Import from URL][url], or [Zoom][] — you need Companion. Companion supports the same [uploaders](/docs/guides/choosing-uploader) as Uppy: @@ -439,6 +439,7 @@ the secret, nothing else. | Dropbox | `dropbox` | `COMPANION_DROPBOX_KEY`, `COMPANION_DROPBOX_SECRET`, `COMPANION_DROPBOX_SECRET_FILE` | | 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` | | 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` | @@ -914,6 +915,7 @@ when files are changed. [dropbox]: /docs/dropbox [facebook]: /docs/facebook [googledrive]: /docs/google-drive +[googlephotos]: /docs/google-photos [instagram]: /docs/instagram [onedrive]: /docs/onedrive [unsplash]: /docs/unsplash diff --git a/docs/guides/migration-guides.md b/docs/guides/migration-guides.md index ca09b5f75..d96e7a378 100644 --- a/docs/guides/migration-guides.md +++ b/docs/guides/migration-guides.md @@ -632,6 +632,7 @@ to: | ------------ | ------------------------------------------------- | | Dropbox | `https://$COMPANION_HOST_NAME/dropbox/redirect` | | Google Drive | `https://$COMPANION_HOST_NAME/drive/redirect` | +| Google Photos | `https://$COMPANION_HOST_NAME/googlephotos/redirect` | | OneDrive | `https://$COMPANION_HOST_NAME/onedrive/redirect` | | Box | `https://$YOUR_COMPANION_HOST_NAME/box/redirect` | | Facebook | `https://$COMPANION_HOST_NAME/facebook/redirect` | diff --git a/docs/sources/companion-plugins/google-drive.mdx b/docs/sources/companion-plugins/google-drive.mdx index 78786c6f1..8c189c4fa 100644 --- a/docs/sources/companion-plugins/google-drive.mdx +++ b/docs/sources/companion-plugins/google-drive.mdx @@ -10,7 +10,7 @@ import UppyCdnExample from '/src/components/UppyCdnExample'; # Google Drive The `@uppy/google-drive` plugin lets users import files from their -[Google Drive](https://www.drive.google.com) account. +[Google Drive](https://drive.google.com) account. :::tip @@ -22,7 +22,7 @@ The `@uppy/google-drive` plugin lets users import files from their ## When should I use this? When you want to let users import files from their -[Google Drive](https://www.drive.google.com) account. +[Google Drive](https://drive.google.com) account. A [Companion](/docs/companion) instance is required for the Google Drive plugin to work. Companion handles authentication with Google Drive, downloads the @@ -109,12 +109,12 @@ https://api2.transloadit.com/companion/drive/redirect Google will give you an OAuth client ID and client secret. -Configure the Google Drive key and secret in Companion. With the standalone +Configure the Google key and secret in Companion. With the standalone Companion server, specify environment variables: ```shell -export COMPANION_GOOGLE_KEY="Google Drive OAuth client ID" -export COMPANION_GOOGLE_SECRET="Google Drive OAuth client secret" +export COMPANION_GOOGLE_KEY="Google OAuth client ID" +export COMPANION_GOOGLE_SECRET="Google OAuth client secret" ``` When using the Companion Node.js API, configure these options: @@ -123,8 +123,8 @@ When using the Companion Node.js API, configure these options: companion.app({ providerOptions: { drive: { - key: 'Google Drive OAuth client ID', - secret: 'Google Drive OAuth client secret', + key: 'Google OAuth client ID', + secret: 'Google OAuth client secret', }, }, }); diff --git a/docs/sources/companion-plugins/google-photos.mdx b/docs/sources/companion-plugins/google-photos.mdx new file mode 100644 index 000000000..32bba4185 --- /dev/null +++ b/docs/sources/companion-plugins/google-photos.mdx @@ -0,0 +1,185 @@ +--- +slug: /google-photos +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import UppyCdnExample from '/src/components/UppyCdnExample'; + +# Google Photos + +The `@uppy/google-photos` plugin lets users import files from their +[Google Photos](https://photos.google.com) account. + +:::tip + +[Try out the live example](/examples) or take it for a spin in +[CodeSandbox](https://codesandbox.io/s/uppy-dashboard-xpxuhd). + +::: + +## When should I use this? + +When you want to let users import files from their +[Google Photos](https://photos.google.com) account. + +A [Companion](/docs/companion) instance is required for the Google Photos plugin +to work. Companion handles authentication with Google Photos, downloads the +photos/videos, 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](https://transloadit.com/pricing/). + + + + +```shell +npm install @uppy/google-photos +``` + + + + + +```shell +yarn add @uppy/google-photos +``` + + + + + + {` + import { Uppy, GooglePhotos } from "{{UPPY_JS_URL}}" + const uppy = new Uppy() + uppy.use(GooglePhotos, { + // Options + }) + `} + + + + +## Use + +Using Google Photos requires setup in both Uppy and Companion. + +### Use in Uppy + +```js {10-13} showLineNumbers +import Uppy from '@uppy/core'; +import Dashboard from '@uppy/dashboard'; +import GooglePhotos from '@uppy/google-photos'; + +import '@uppy/core/dist/style.min.css'; +import '@uppy/dashboard/dist/style.min.css'; + +new Uppy() + .use(Dashboard, { inline: true, target: '#dashboard' }) + .use(GooglePhotos, { + target: Dashboard, + companionUrl: 'https://your-companion.com', + }); +``` + +### Use in Companion + +To sign up for API keys, go to the +[Google Developer Console](https://console.developers.google.com/). + +Create a project for your app if you don’t have one yet. + +- On the project’s dashboard, + [enable the Google Photos API](https://developers.google.com/photos). +- [Set up OAuth authorization](https://developers.google.com/photos/library/guides/authorization). + +The app page has a `"Redirect URIs"` field. Here, add: + +``` +https://$YOUR_COMPANION_HOST_NAME/googlephotos/redirect +``` + +If you are using Transloadit hosted Companion: + +``` +https://api2.transloadit.com/companion/googlephotos/redirect +``` + +Google will give you an OAuth client ID and client secret. + +Configure the Google key and secret in Companion. With the standalone +Companion server, specify environment variables: + +```shell +export COMPANION_GOOGLE_KEY="Google OAuth client ID" +export COMPANION_GOOGLE_SECRET="Google OAuth client secret" +``` + +When using the Companion Node.js API, configure these options: + +```js +companion.app({ + providerOptions: { + googlephotos: { + key: 'Google OAuth client ID', + secret: 'Google OAuth client secret', + }, + }, +}); +``` + +## API + +### Options + +#### `id` + +A unique identifier for this plugin (`string`, default: `'GooglePhotos'`). + +#### `title` + +Title / name shown in the UI, such as Dashboard tabs (`string`, default: +`'GooglePhotos'`). + +#### `target` + +DOM element, CSS selector, or plugin to place the drag and drop area into +(`string` or `Element`, default: `null`). + +#### `companionUrl` + +URL to a [Companion](/docs/companion) instance (`string`, default: `null`). + +#### `companionHeaders` + +Custom headers that should be sent along to [Companion](/docs/companion) on +every request (`Object`, default: `{}`). + +#### `companionAllowedHosts` + +The valid and authorised URL(s) from which OAuth responses should be accepted +(`string` or `RegExp` or `Array`, default: `companionUrl`). + +This value can be a `string`, a `RegExp` pattern, or an `Array` of both. This is +useful when you have your [Companion](/docs/companion) running on several hosts. +Otherwise, the default value should do fine. + +#### `companionCookiesRule` + +This option correlates to the +[RequestCredentials value](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) +(`string`, default: `'same-origin'`). + +This tells the plugin whether to send cookies to [Companion](/docs/companion). + +#### `locale` + +```js +export default { + strings: { + pluginNameGooglePhotos: 'GooglePhotos', + }, +}; +``` diff --git a/docs/sources/companion-plugins/instagram.mdx b/docs/sources/companion-plugins/instagram.mdx index d26867038..85cee06dd 100644 --- a/docs/sources/companion-plugins/instagram.mdx +++ b/docs/sources/companion-plugins/instagram.mdx @@ -118,7 +118,7 @@ When using the Companion Node.js API, configure these options: ```js companion.app({ providerOptions: { - drive: { + instagram: { key: 'Instagram OAuth client ID', secret: 'Instagram OAuth client secret', }, diff --git a/docs/user-interfaces/dashboard.mdx b/docs/user-interfaces/dashboard.mdx index 8de5900cf..d4a3a4823 100644 --- a/docs/user-interfaces/dashboard.mdx +++ b/docs/user-interfaces/dashboard.mdx @@ -714,6 +714,8 @@ all Uppy plugins. [Facebook](https://facebook.com). - [`@uppy/google-drive`](/docs/google-drive) — import from [Google Drive](https://drive.google.com). +- [`@uppy/google-photos`](/docs/google-photos) — import from + [Google Photos](https://photos.google.com). - [`@uppy/instagram`](/docs/instagram) — import from [Instagram](https://instagram.com). - [`@uppy/onedrive`](/docs/onedrive) — import from diff --git a/package.json b/package.json index c42d5814e..ae244f6bd 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@uppy/dropbox": "latest", "@uppy/golden-retriever": "^3.0.2", "@uppy/google-drive": "latest", + "@uppy/google-photos": "latest", "@uppy/image-editor": "latest", "@uppy/instagram": "latest", "@uppy/locales": "latest", diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx index bcba86b58..2d013cefe 100644 --- a/src/pages/examples.tsx +++ b/src/pages/examples.tsx @@ -8,6 +8,7 @@ import Dashboard from '@uppy/react/lib/Dashboard'; import UppyCore from '@uppy/core'; import Webcam from '@uppy/webcam'; import GoogleDrive from '@uppy/google-drive'; +import GooglePhotos from '@uppy/google-photos'; import Instagram from '@uppy/instagram'; import Dropbox from '@uppy/dropbox'; import OneDrive from '@uppy/onedrive'; @@ -105,6 +106,11 @@ const options = [ value: 'GoogleDrive', type: 'plugins', }, + { + label: 'Google Photos', + value: 'GooglePhotos', + type: 'plugins', + }, { label: 'Dropbox', value: 'Dropbox', @@ -249,7 +255,7 @@ const Uppy = ({ state, locale }) => { note={ state.restrictions ? 'Images and video only, 2–3 files, up to 1 MB' - : null + : null } /> @@ -323,9 +329,9 @@ function Page() { // Forgive me for this logic Array.isArray(state[type]) ? state[type].includes(value) - : type === 'theme' ? - state.theme === 'dark' - : state[type] + : type === 'theme' ? + state.theme === 'dark' + : state[type] } disabled={disabled} onChange={(event) => diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f2c6181c1..a2d933981 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,6 +6,7 @@ import Dashboard from '@uppy/react/lib/Dashboard'; import Uppy from '@uppy/core'; import Webcam from '@uppy/webcam'; import GoogleDrive from '@uppy/google-drive'; +import GooglePhotos from '@uppy/google-photos'; import Instagram from '@uppy/instagram'; import Dropbox from '@uppy/dropbox'; import OneDrive from '@uppy/onedrive'; @@ -40,7 +41,7 @@ const endpoint = 'https://tusd.tusdemo.net/files/'; const dashboardCode = `import Uppy from '@uppy/core' import Dashboard from '@uppy/dashboard' -import RemoteSources from '@uppy/google-drive' +import RemoteSources from '@uppy/remote-sources' import ImageEditor from '@uppy/image-editor' import Webcam from '@uppy/webcam' import Tus from '@uppy/tus'