Restore #6136: Add useGooglePicker#6342
Conversation
they are not being used and make a reusable mapPickerFile method
it's no being used anywhere
The React `useGooglePicker` hook needed corresponding implementations in
Vue and Svelte to enable headless Google Picker integration across all
supported frameworks.
## Changes
- **Vue hook** (`@uppy/vue/src/useGooglePicker.ts`): Returns a computed
`ShallowRef` with reactive `loading` and `accessToken` state, plus
`show()` and `logout()` methods. Cleanup via `onUnmounted`.
- **Svelte hook** (`@uppy/svelte/src/lib/useGooglePicker.svelte.ts`):
Uses Svelte 5 `$state` runes with getters for reactivity, matching the
pattern established in other Svelte hooks (e.g., `useWebcam`,
`useScreenCapture`).
- **Exports**: Added to respective framework index files.
## Usage
```typescript
// Vue
const picker = useGooglePicker({
pickerType: 'drive',
companionUrl: 'https://companion.uppy.io',
clientId: 'YOUR_CLIENT_ID',
apiKey: 'YOUR_API_KEY',
appId: 'YOUR_APP_ID',
})
// Access state: picker.value.loading, picker.value.accessToken
// Call methods: picker.value.show(), picker.value.logout()
```
```typescript
// Svelte
const picker = useGooglePicker({
pickerType: 'photos',
companionUrl: 'https://companion.uppy.io',
clientId: 'YOUR_CLIENT_ID',
})
// Access state: picker.loading, picker.accessToken
// Call methods: picker.show(), picker.logout()
```
All three frameworks now expose identical APIs, accepting the full
`GooglePickerOptions` interface.
<!-- START COPILOT CODING AGENT TIPS -->
---
💬 We'd love your input! Share your thoughts on Copilot coding agent in
our [2 minute survey](https://gh.io/copilot-coding-agent-survey).
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mifi <402547+mifi@users.noreply.github.com>
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Add `useGooglePicker` hook and clean up options.
🦋 Changeset detectedLatest commit: 2601272 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 26012722d1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| async function logout() { | ||
| const { accessToken } = store.getSnapshot() | ||
| if (accessToken) { | ||
| await doLogout(accessToken) |
There was a problem hiding this comment.
When a headless hook restores an accessToken from storage, init() never injects the Google Identity script; only showPicker() calls ensureScriptsInjected(). If the app renders a logout button from the returned controller and the user clicks it before opening the picker in this page load, doLogout() dereferences google.accounts while google is undefined, so logout fails and the stored token is left in place. Ensure the script is loaded, or revoke via a request, before calling doLogout().
Useful? React with 👍 / 👎.
| "typescript": "^5.8.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "@uppy/companion-client": "workspace:^", |
There was a problem hiding this comment.
This package now has top-level runtime imports/re-exports from @uppy/companion-client, but declaring it only as a peer means existing consumers of @uppy/components and packages that depend on it, such as @uppy/react, do not get it installed unless they add it themselves. Under peer-strict or PnP installs, simply importing the package can fail with an unresolved @uppy/companion-client even when using only existing components like Dropzone. Please make it a dependency or remove the top-level runtime import.
Useful? React with 👍 / 👎.
restore #6136 to 2601272