mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
160 lines
3.5 KiB
Text
160 lines
3.5 KiB
Text
---
|
|
slug: /zoom
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
import UppyCdnExample from '/src/components/UppyCdnExample';
|
|
|
|
# Zoom
|
|
|
|
The `@uppy/zoom` plugin lets users import files from their
|
|
[Zoom](https://zoom.com) account.
|
|
|
|
:::tip
|
|
|
|
[Try out the live example](/examples) or take it for a spin in
|
|
[StackBlitz](https://stackblitz.com/edit/vitejs-vite-zaqyaf?file=main.js).
|
|
|
|
:::
|
|
|
|
## When should I use this?
|
|
|
|
When you want to let users import files from their [Zoom](https://zoom.com)
|
|
account.
|
|
|
|
A [Companion](/docs/companion) instance is required for the Zoom plugin to work.
|
|
Companion handles authentication with Zoom, downloads the files, 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/).
|
|
|
|
<Tabs>
|
|
<TabItem value="npm" label="NPM" default>
|
|
|
|
```shell
|
|
npm install @uppy/zoom
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="yarn" label="Yarn">
|
|
|
|
```shell
|
|
yarn add @uppy/zoom
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="cdn" label="CDN">
|
|
<UppyCdnExample>
|
|
{`
|
|
import { Uppy, Zoom } from "{{UPPY_JS_URL}}"
|
|
const uppy = new Uppy()
|
|
uppy.use(Zoom, {
|
|
// Options
|
|
})
|
|
`}
|
|
</UppyCdnExample>
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Use
|
|
|
|
Using Zoom 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 Zoom from '@uppy/zoom';
|
|
|
|
import '@uppy/core/dist/style.min.css';
|
|
import '@uppy/dashboard/dist/style.min.css';
|
|
|
|
new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Zoom, {
|
|
target: Dashboard,
|
|
companionUrl: 'https://your-companion.com',
|
|
});
|
|
```
|
|
|
|
### Use in Companion
|
|
|
|
Configure the Zoom key and secret. With the standalone Companion server, specify
|
|
environment variables:
|
|
|
|
```shell
|
|
export COMPANION_ZOOM_KEY="Zoom API key"
|
|
export COMPANION_ZOOM_SECRET="Zoom API secret"
|
|
```
|
|
|
|
When using the Companion Node.js API, configure these options:
|
|
|
|
```js
|
|
companion.app({
|
|
providerOptions: {
|
|
zoom: {
|
|
key: 'Zoom API key',
|
|
secret: 'Zoom API secret',
|
|
},
|
|
},
|
|
});
|
|
```
|
|
|
|
## API
|
|
|
|
### Options
|
|
|
|
#### `id`
|
|
|
|
A unique identifier for this plugin (`string`, default: `'Zoom'`).
|
|
|
|
#### `title`
|
|
|
|
Title / name shown in the UI, such as Dashboard tabs (`string`, default:
|
|
`'Zoom'`).
|
|
|
|
#### `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: {
|
|
pluginNameZoom: 'Zoom',
|
|
},
|
|
};
|
|
```
|