diff --git a/package.json b/package.json index d11898be8..59a380ee8 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,9 @@ "@uppy/dropbox": "latest", "@uppy/golden-retriever": "latest", "@uppy/google-drive": "latest", + "@uppy/google-drive-picker": "^0.2.1", "@uppy/google-photos": "latest", + "@uppy/google-photos-picker": "^0.2.1", "@uppy/image-editor": "latest", "@uppy/instagram": "latest", "@uppy/locales": "latest", diff --git a/src/pages/examples.tsx b/src/pages/examples.tsx index feccefe62..885db680f 100644 --- a/src/pages/examples.tsx +++ b/src/pages/examples.tsx @@ -8,7 +8,9 @@ import Dashboard from '@uppy/react/lib/Dashboard'; import UppyCore from '@uppy/core'; import Webcam from '@uppy/webcam'; import GoogleDrive from '@uppy/google-drive'; +import GoogleDrivePicker from '@uppy/google-drive-picker'; import GooglePhotos from '@uppy/google-photos'; +import GooglePhotosPicker from '@uppy/google-photos-picker'; import Instagram from '@uppy/instagram'; import Dropbox from '@uppy/dropbox'; import OneDrive from '@uppy/onedrive'; @@ -61,8 +63,8 @@ const initialState: State = { theme: 'light', plugins: [ 'Webcam', - // 'GoogleDrive', - // 'GooglePhotos', + 'GoogleDrivePicker', + 'GooglePhotosPicker', 'Dropbox', 'Url', 'OneDrive', @@ -118,6 +120,16 @@ const options = [ 'Temporarily disabled until our credentials are approved again. You can still use the plugin yourself.', disabled: true, }, + { + label: 'Google Drive Picker', + value: 'GoogleDrivePicker', + type: 'plugins', + }, + { + label: 'Google Photos Picker', + value: 'GooglePhotosPicker', + type: 'plugins', + }, { label: 'Dropbox', value: 'Dropbox', @@ -242,11 +254,31 @@ const Uppy = ({ state, locale }) => { }, }); } + if ( + state.plugins.includes('GoogleDrivePicker') && + !disabled('GoogleDrivePicker') + ) { + uppy.use(GoogleDrivePicker, { + companionUrl, + clientId: googlePickerClientId, + apiKey: googlePickerApiKey, + appId: googlePickerAppId, + }); + } if (state.plugins.includes('GooglePhotos') && !disabled('GooglePhotos')) { uppy.use(GooglePhotos, { companionUrl, }); } + if ( + state.plugins.includes('GooglePhotosPicker') && + !disabled('GooglePhotosPicker') + ) { + uppy.use(GooglePhotosPicker, { + companionUrl, + clientId: googlePickerClientId, + }); + } if (state.plugins.includes('Dropbox') && !disabled('Dropbox')) { uppy.use(Dropbox, { companionUrl }); } @@ -288,6 +320,10 @@ const Uppy = ({ state, locale }) => { const companionUrl = 'https://companion.uppy.io'; // const companionUrl = 'http://localhost:3020'; const endpoint = 'https://tusd.tusdemo.net/files/'; +const googlePickerClientId = + '1020900325465-7naospne1v7veupmu8rg3a6ipfogr9f0.apps.googleusercontent.com'; +const googlePickerApiKey = 'AIzaSyCItfp_WaGGgbNFoU08LMs21ks-MxIqudo'; +const googlePickerAppId = 'uppy-server-dev'; export default function Examples() { // Silly trick to please Docusaurus with client-side hooks such as useLocalStorage diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9bd6dddb0..5c944202e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,7 +5,8 @@ import Link from '@docusaurus/Link'; import Dashboard from '@uppy/react/lib/Dashboard'; import Uppy from '@uppy/core'; import Webcam from '@uppy/webcam'; -// import GoogleDrive from '@uppy/google-drive'; +import GoogleDrivePicker from '@uppy/google-drive-picker'; +import GooglePhotosPicker from '@uppy/google-photos-picker'; // import Instagram from '@uppy/instagram'; import Dropbox from '@uppy/dropbox'; import OneDrive from '@uppy/onedrive'; @@ -43,6 +44,10 @@ import styles from './index.module.css'; const companionUrl = 'https://companion.uppy.io'; const endpoint = 'https://tusd.tusdemo.net/files/'; +const googlePickerClientId = + '1020900325465-7naospne1v7veupmu8rg3a6ipfogr9f0.apps.googleusercontent.com'; +const googlePickerApiKey = 'AIzaSyCItfp_WaGGgbNFoU08LMs21ks-MxIqudo'; +const googlePickerAppId = 'uppy-server-dev'; const dashboardCode = `import Uppy from '@uppy/core' import Dashboard from '@uppy/dashboard' @@ -235,7 +240,17 @@ export default function Home(): JSX.Element { .use(Url, { companionUrl }) .use(OneDrive, { companionUrl }) .use(Unsplash, { companionUrl }) - .use(Box, { companionUrl }); + .use(Box, { companionUrl }) + .use(GoogleDrivePicker, { + companionUrl, + clientId: googlePickerClientId, + apiKey: googlePickerApiKey, + appId: googlePickerAppId, + }) + .use(GooglePhotosPicker, { + companionUrl, + clientId: googlePickerClientId, + }); // Expose for easier debugging globalThis.uppy = uppy; diff --git a/yarn.lock b/yarn.lock index c3c241088..b98cd0991 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3582,6 +3582,19 @@ __metadata: languageName: node linkType: hard +"@uppy/companion-client@npm:^4.3.0": + version: 4.3.0 + resolution: "@uppy/companion-client@npm:4.3.0" + dependencies: + "@uppy/utils": "npm:^6.0.6" + namespace-emitter: "npm:^2.0.1" + p-retry: "npm:^6.1.0" + peerDependencies: + "@uppy/core": ^4.3.1 + checksum: 10/b2a264bdb33579248fd96d68fc768be42ad64dba8a6c29ce71f899253c93f8d8db63760de5b4e6adf6475e65c2f3b76046f13796a4cc55a54c71eb32794260f7 + languageName: node + linkType: hard + "@uppy/compressor@npm:^2.1.1": version: 2.1.1 resolution: "@uppy/compressor@npm:2.1.1" @@ -3736,6 +3749,20 @@ __metadata: languageName: node linkType: hard +"@uppy/google-drive-picker@npm:^0.2.1": + version: 0.2.1 + resolution: "@uppy/google-drive-picker@npm:0.2.1" + dependencies: + "@uppy/companion-client": "npm:^4.3.0" + "@uppy/provider-views": "npm:^4.2.0" + "@uppy/utils": "npm:^6.0.6" + preact: "npm:^10.5.13" + peerDependencies: + "@uppy/core": ^4.3.1 + checksum: 10/c404147af6fb3d243c76acb3a44aef0ee80dae5570c475aa7ae8a560b7b08b885e1592d4a8aa02bcb7238b268fa53348da8a33454da8722cc70ddde3dfe8d452 + languageName: node + linkType: hard + "@uppy/google-drive@npm:^4.2.0, @uppy/google-drive@npm:latest": version: 4.2.0 resolution: "@uppy/google-drive@npm:4.2.0" @@ -3764,6 +3791,20 @@ __metadata: languageName: node linkType: hard +"@uppy/google-photos-picker@npm:^0.2.1": + version: 0.2.1 + resolution: "@uppy/google-photos-picker@npm:0.2.1" + dependencies: + "@uppy/companion-client": "npm:^4.3.0" + "@uppy/provider-views": "npm:^4.2.0" + "@uppy/utils": "npm:^6.0.6" + preact: "npm:^10.5.13" + peerDependencies: + "@uppy/core": ^4.3.1 + checksum: 10/de0e8741bdfd4e4ea54a988c400567468ccf160d4f6a8c23c61ea4a01d8e9e7033f1911f3bc8ff0e28eb74ed1cc94312614f4f7e0ca02ce0cc7f659e29c6240b + languageName: node + linkType: hard + "@uppy/google-photos@npm:^0.4.0, @uppy/google-photos@npm:latest": version: 0.4.0 resolution: "@uppy/google-photos@npm:0.4.0" @@ -3867,6 +3908,21 @@ __metadata: languageName: node linkType: hard +"@uppy/provider-views@npm:^4.2.0": + version: 4.2.0 + resolution: "@uppy/provider-views@npm:4.2.0" + dependencies: + "@uppy/utils": "npm:^6.0.6" + classnames: "npm:^2.2.6" + nanoid: "npm:^5.0.0" + p-queue: "npm:^8.0.0" + preact: "npm:^10.5.13" + peerDependencies: + "@uppy/core": ^4.3.1 + checksum: 10/fef3ac6ae7dcb4ccbe1c3bbd56523de21f18192bd0f0e3bc4f0d8b749509866e39c07900fa6158be9dd7e8452159f32a88bca262c82f1b670af60b2ad40da4b3 + languageName: node + linkType: hard + "@uppy/react@npm:latest": version: 4.0.4 resolution: "@uppy/react@npm:4.0.4" @@ -4046,6 +4102,16 @@ __metadata: languageName: node linkType: hard +"@uppy/utils@npm:^6.0.6": + version: 6.0.6 + resolution: "@uppy/utils@npm:6.0.6" + dependencies: + lodash: "npm:^4.17.21" + preact: "npm:^10.5.13" + checksum: 10/13e3b608b3551bfa34444ee90e6645687cb7457ca8c1a9c72bf6740dad5ad9b233e30b43d1de4af72f65a314ebd80908bccdf391d8d78d0a301317155d2192dd + languageName: node + linkType: hard + "@uppy/webcam@npm:^4.0.3, @uppy/webcam@npm:latest": version: 4.0.3 resolution: "@uppy/webcam@npm:4.0.3" @@ -16105,7 +16171,9 @@ __metadata: "@uppy/dropbox": "npm:latest" "@uppy/golden-retriever": "npm:latest" "@uppy/google-drive": "npm:latest" + "@uppy/google-drive-picker": "npm:^0.2.1" "@uppy/google-photos": "npm:latest" + "@uppy/google-photos-picker": "npm:^0.2.1" "@uppy/image-editor": "npm:latest" "@uppy/instagram": "npm:latest" "@uppy/locales": "npm:latest"