diff --git a/docs/companion.md b/docs/companion.md deleted file mode 100644 index da36f41877..0000000000 --- a/docs/companion.md +++ /dev/null @@ -1,999 +0,0 @@ ---- -sidebar_position: 4 ---- - -# Companion - -Companion is an open source server application which **takes away the complexity -of authentication and the cost of downloading files from remote sources**, such -as Instagram, Google Drive, and others. Companion is a server-to-server -orchestrator that streams files from a source to a destination, and files are -never stored in Companion. Companion can run either as a standalone -(self-hosted) application, [Transloadit-hosted](#hosted), or plugged in as an -Express middleware into an existing application. The Uppy client requests remote -files from Companion, which it will download and simultaneously upload to your -[Tus server](/docs/tus), [AWS bucket](/docs/aws-s3), or any server that supports -[PUT, POST or Multipart uploads](/docs/xhr-upload). - -This means a user uploading a 5GB video from Google Drive from their phone isn’t -eating into their data plans and you don’t have to worry about implementing -OAuth. - -## When should I use it? - -If you want to let users download files from [Box][], [Dropbox][], [Facebook][], -[Google Drive][googledrive], [Google Photos][googlephotos], [Google Drive -Picker][googledrivepicker], [Google Photos Picker][googlephotospicker], -[Instagram][], [OneDrive][], [Unsplash][], [Import from URL][url], or [Zoom][] — -you need Companion. - -Companion supports the same [uploaders](/docs/guides/choosing-uploader) as Uppy: -[Tus](/docs/tus), [AWS S3](/docs/aws-s3), and [regular multipart](/docs/tus). -But instead of manually setting a plugin, Uppy sends along a header with the -uploader and Companion will use the same on the server. This means if you are -using [Tus](/docs/tus) for your local uploads, you can send your remote uploads -to the same Tus server (and likewise for your AWS S3 bucket). - -:::note - -Companion only deals with _remote_ files, _local_ files are still uploaded from -the client with your upload plugin. - -::: - -## Hosted - -Using [Transloadit][] services comes with a hosted version of Companion so you -don’t have to worry about hosting your own server. Whether you are on a free or -paid Transloadit [plan](https://transloadit.com/pricing/), you can use -Companion. It’s not possible to rent a Companion server without a Transloadit -plan. - -[**Sign-up for a (free) plan**](https://transloadit.com/pricing/). - -:::tip - -Choosing Transloadit for your file services also comes with credentials for all -remote providers. This means you don’t have to waste time going through the -approval process of every app. You can still add your own credentials in the -Transloadit admin page if you want. - -::: - -:::info - -Downloading and uploading files through Companion doesn’t count towards your -[monthly quota](https://transloadit.com/docs/faq/1gb-worth/), it’s a way for -files to arrive at Transloadit servers, much like Uppy. - -::: - -To do so each provider plugin must be configured with Transloadit’s Companion -URLs: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Dropbox from '@uppy/dropbox'; - -uppy.use(Dropbox, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Dropbox from '@uppy/dropbox'; - -uppy.use(Dropbox, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -## Installation & use - -Companion is installed from npm. Depending on how you want to run Companion, the -install process is slightly different. Companion can be integrated as middleware -into your [Express](https://expressjs.com/) app or as a standalone server. Most -people probably want to run it as a standalone server, while the middleware -could be used to further customise Companion or integrate it into your own HTTP -server code. - -:::note - -Since v2, you need to be running `node.js >= v10.20.1` to use Companion. More -information in the -[migrating to 2.0](/docs/guides/migration-guides/#migrate-from-uppy-1x-to-2x) -guide. - -Windows is not a supported platform right now. It may work, and we’re happy to -accept improvements in this area, but we can’t provide support. - -::: - -### Standalone mode - -You can use the standalone version if you want to run Companion as it’s own -Node.js process. It’s a configured Express server with sessions, logging, and -security best practices. First you’ll typically want to install it globally: - -```bash -npm install -g @uppy/companion -``` - -Standalone Companion will always serve HTTP (not HTTPS) and expects a reverse -proxy with SSL termination in front of it when running in production. See -[`COMPANION_PROTOCOL`](#server) for more information. - -Companion ships with an executable file (`bin/companion`) which is the -standalone server. Unlike the middleware version, options are set via -environment variables. - -:::info - -Checkout [options](#options) for the available options in JS and environment -variable formats. - -::: - -You need at least these three to get started: - -```bash -export COMPANION_SECRET="shh!Issa Secret!" -export COMPANION_DOMAIN="YOUR SERVER DOMAIN" -export COMPANION_DATADIR="PATH/TO/DOWNLOAD/DIRECTORY" -``` - -Then run: - -```bash -companion -``` - -You can also pass in the path to your JSON config file, like so: - -```bash -companion --config /path/to/companion.json -``` - -You may also want to run Companion in a process manager like -[PM2](https://pm2.keymetrics.io/) to make sure it gets restarted on upon -crashing as well as allowing scaling to many instances. - -### Express middleware mode - -First install it into your Node.js project with your favorite package manager: - -```bash -npm install @uppy/companion -``` - -To plug Companion into an existing server, call its `.app` method, passing in an -[options](#options) object as a parameter. This returns a server instance that -you can mount on a route in your Express app. Note: do **not** use the `cors` -module in your project, because Companion already includes it. Use the -`corsOrigins` Companion option to customise CORS behavior. - -```js -import express from 'express'; -import bodyParser from 'body-parser'; -import session from 'express-session'; -import companion from '@uppy/companion'; - -const app = express(); - -// Companion requires body-parser and express-session middleware. -// You can add it like this if you use those throughout your app. -// -// If you are using something else in your app, you can add these -// middlewares in the same subpath as Companion instead. -app.use(bodyParser.json()); -app.use(session({ secret: 'some secrety secret' })); - -const companionOptions = { - providerOptions: { - drive: { - key: 'GOOGLE_DRIVE_KEY', - secret: 'GOOGLE_DRIVE_SECRET', - }, - }, - server: { - host: 'localhost:3020', - protocol: 'http', - // Default installations normally don't need a path. - // However if you specify a `path`, you MUST specify - // the same path in `app.use()` below, - // e.g. app.use('/companion', companionApp) - // path: '/companion', - }, - filePath: '/path/to/folder/', -}; - -const { app: companionApp } = companion.app(companionOptions); -app.use(companionApp); -``` - -Companion uses WebSockets to communicate progress, errors, and successes to the -client. This is what Uppy listens to to update it’s internal state and UI. - -Add the Companion WebSocket server using the `companion.socket` function: - -```js -const server = app.listen(PORT); - -companion.socket(server); -``` - -If WebSockets fail for some reason Uppy and Companion will fallback to HTTP -polling. - -### Running many instances - -We recommend running at least two instances in production, so that if the -Node.js event loop gets blocked by one or more requests (due to a bug or spike -in traffic), it doesn’t also block or slow down all other requests as well (as -Node.js is single threaded). - -As an example for scale, one enterprise customer of Transloadit, who self-hosts -Companion to power an education service that is used by many universities -globally, deploys 7 Companion instances. Their earlier solution ran on 35 -instances. In our general experience Companion will saturate network interface -cards before other resources on commodity virtual servers (`c5d.2xlarge` for -instance). - -Your mileage may vary, so we recommend to add observability. You can let -Prometheus crawl the `/metrics` endpoint and graph that with Grafana for -instance. - -#### Using unique endpoints - -One option is to run many instances with each instance having its own unique -endpoint. This could be on separate ports, (sub)domain names, or IPs. With this -setup, you can either: - -1. Implement your own logic that will direct each upload to a specific Companion - endpoint by setting the `companionUrl` option -2. Setting the Companion option `COMPANION_SELF_ENDPOINT`. This option will - cause Companion to respond with a `i-am` HTTP header containing the value - from `COMPANION_SELF_ENDPOINT`. When Uppy’s sees this header, it will pin all - requests for the upload to this endpoint. - -In either case, you would then also typically configure a single Companion -instance (one endpoint) to handle all OAuth authentication requests, so that you -only need to specify a single OAuth callback URL. See also `oauthDomain` and -`validHosts`. - -#### Using a load balancer - -The other option is to set up a load balancer in front of many Companion -instances. Then Uppy will only see a single endpoint and send all requests to -the associated load balancer, which will then distribute them between Companion -instances. The companion instances coordinate their messages and events over -Redis so that any instance can serve the client’s requests. Note that sticky -sessions are **not** needed with this setup. Here are the requirements for this -setup: - -- The instances need to be connected to the same Redis server. -- You need to set `COMPANION_SECRET` to the same value on both servers. -- if you use the `companionKeysParams` feature (Transloadit), you also need - `COMPANION_PREAUTH_SECRET` to be the same on each instance. -- All other configuration needs to be the same, except if you’re running many - instances on the same machine, then `COMPANION_PORT` should be different for - each instance. - -## API - -### Options - -:::tip - -The headings display the JS and environment variable options (`option` -`ENV_OPTION`). When integrating Companion into your own server, you pass the -options to `companion.app()`. If you are using the standalone version, you -configure Companion using environment variables. Some options only exist as -environment variables or only as a JS option. - -::: - -
- Default configuration - -```javascript -const options = { - server: { - protocol: 'http', - path: '', - }, - providerOptions: {}, - s3: { - endpoint: 'https://{service}.{region}.amazonaws.com', - conditions: [], - useAccelerateEndpoint: false, - getKey: ({ filename }) => `${crypto.randomUUID()}-${filename}`, - expires: 800, // seconds - }, - allowLocalUrls: false, - logClientVersion: true, - periodicPingUrls: [], - streamingUpload: true, - clientSocketConnectTimeout: 60000, - metrics: true, -}; -``` - -
- -#### `filePath` `COMPANION_DATADIR` - -Full path to the directory to which provider files will be downloaded -temporarily. - -#### `secret` `COMPANION_SECRET` `COMPANION_SECRET_FILE` - -A secret string which Companion uses to generate authorization tokens. You -should generate a long random string for this. For example: - -```js -const crypto = require('node:crypto'); - -const secret = crypto.randomBytes(64).toString('hex'); -``` - -:::caution - -Omitting the `secret` in the standalone version will generate a secret for you, -using the above `crypto` string. But when integrating with Express you must -provide it yourself. This is an essential security measure. - -::: - -:::note - -Using a secret file means passing an absolute path to a file with any extension, -which has only the secret, nothing else. - -::: - -#### `preAuthSecret` `COMPANION_PREAUTH_SECRET` `COMPANION_PREAUTH_SECRET_FILE` - -If you are using the [Transloadit](/docs/transloadit) `companionKeysParams` -feature (Transloadit-hosted Companion using your own custom OAuth credentials), -set this variable to a strong randomly generated secret. See also -`COMPANION_SECRET` (but do not use the same secret!) - -:::note - -Using a secret file means passing an absolute path to a file with any extension, -which has only the secret, nothing else. - -::: - -#### `uploadUrls` `COMPANION_UPLOAD_URLS` - -An allowlist (array) of strings (exact URLs) or regular expressions. Companion -will only accept uploads to these URLs. This ensures that your Companion -instance is only allowed to upload to your trusted servers and prevents -[SSRF](https://en.wikipedia.org/wiki/Server-side_request_forgery) attacks. - -#### `COMPANION_PORT` - -The port on which to start the standalone server, defaults to 3020. This is a -standalone-only option. - -#### `COMPANION_COOKIE_DOMAIN` - -Allows you to customize the domain of the cookies created for Express sessions. -This is a standalone-only option. - -#### `COMPANION_HIDE_WELCOME` - -Setting this to `true` disables the welcome message shown at `/`. This is a -standalone-only option. - -#### `redisUrl` `COMPANION_REDIS_URL` - -URL to running Redis server. This can be used to scale Companion horizontally -using many instances. See [How to scale Companion](#how-to-scale-companion). - -#### `COMPANION_REDIS_EXPRESS_SESSION_PREFIX` - -Set a custom prefix for redis keys created by -[connect-redis](https://github.com/tj/connect-redis). Defaults to -`companion-session:`. Sessions are used for storing authentication state and for -allowing thumbnails to be loaded by the browser via Companion and for OAuth2. -See also `COMPANION_REDIS_PUBSUB_SCOPE`. - -#### `redisOptions` `COMPANION_REDIS_OPTIONS` - -An object of -[options supported by the `ioredis` client](https://github.com/redis/ioredis). -See also -[`RedisOptions`](https://github.com/redis/ioredis/blob/af832752040e616daf51621681bcb40cab965a9b/lib/redis/RedisOptions.ts#L8). - -#### `redisPubSubScope` `COMPANION_REDIS_PUBSUB_SCOPE` - -Use a scope for the companion events at the Redis server. Setting this option -will prefix all events with the name provided and a colon. See also -`COMPANION_REDIS_EXPRESS_SESSION_PREFIX`. - -#### `server` - -Configuration options for the underlying server. - -| Key / Environment variable | Value | Description | -| ---------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `protocol` `COMPANION_PROTOCOL` | `http` or `https` | Used to build a URL to reference the Companion instance itself, which is used for headers and cookies. Companion itself always runs as a HTTP server, so locally you should use `http`. You must to set this to `https` once you enabled SSL/HTTPS for your domain in production by running a reverse https-proxy in front of Companion, or with a built-in HTTPS feature of your hosting service. | -| `host` `COMPANION_DOMAIN` | `String` | Your server’s publicly facing hostname (for example `example.com`). | -| `oauthDomain` `COMPANION_OAUTH_DOMAIN` | `String` | If you have several instances of Companion with different (and perhaps dynamic) subdomains, you can set a single fixed subdomain and server (such as `sub1.example.com`) to handle your OAuth authentication for you. This would then redirect back to the correct instance with the required credentials on completion. This way you only need to configure a single callback URL for OAuth providers. | -| `path` `COMPANION_PATH` | `String` | The server path to where the Companion app is sitting. For instance, if Companion is at `example.com/companion`, then the path would be `/companion`). | -| `implicitPath` `COMPANION_IMPLICIT_PATH` | `String` | If the URL’s path in your reverse proxy is different from your Companion path in your express app, then you need to set this path as `implicitPath`. For instance, if your Companion URL is `example.com/mypath/companion`. Where the path `/mypath` is defined in your NGINX server, while `/companion` is set in your express app. Then you need to set the option `implicitPath` to `/mypath`, and set the `path` option to `/companion`. | -| `validHosts` `COMPANION_DOMAINS` | `Array` | If you are setting an `oauthDomain`, you need to set a list of valid hosts, so the oauth handler can validate the host of the Uppy instance requesting the authentication. This is essentially a list of valid domains running your Companion instances. The list may also contain regex patterns. e.g `['sub2.example.com', 'sub3.example.com', '(\\w+).example.com']` | - -#### `sendSelfEndpoint` `COMPANION_SELF_ENDPOINT` - -This is essentially the same as the `server.host + server.path` attributes. The -major reason for this attribute is that, when set, it adds the value as the -`i-am` header of every request response. - -#### `providerOptions` - -Object to enable providers with their keys and secrets. For example: - -```json -{ - "drive": { - "key": "***", - "secret": "***" - } -} -``` - -When using the standalone version you use the corresponding environment -variables or point to a secret file (such as `COMPANION_GOOGLE_SECRET_FILE`). - -:::note - -Secret files need an absolute path to a file with any extension which only has -the secret, nothing else. - -::: - -| Service | Key | Environment variables | -| ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Box | `box` | `COMPANION_BOX_KEY`, `COMPANION_BOX_SECRET`, `COMPANION_BOX_SECRET_FILE` | -| 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` | - -#### `s3` - -Companion comes with signature endpoints for AWS S3. These can be used by the -Uppy client to sign requests to upload files directly to S3, without exposing -secret S3 keys in the browser. Companion also supports uploading files from -providers like Dropbox and Instagram directly into S3. - -##### `s3.key` `COMPANION_AWS_KEY` - -The S3 access key ID. - -##### `s3.secret` `COMPANION_AWS_SECRET` `COMPANION_AWS_SECRET_FILE` - -The S3 secret access key. - -:::note - -Using a secret file means passing an absolute path to a file with any extension, -which has only the secret, nothing else. - -::: - -##### `s3.endpoint` `COMPANION_AWS_ENDPOINT` - -Optional URL to a custom S3 (compatible) service. Otherwise uses the default -from the AWS SDK. - -##### `s3.bucket` `COMPANION_AWS_BUCKET` - -The name of the bucket to store uploaded files in. - -A `string` or function that returns the name of the bucket as a `string` and -takes one argument which is an object with the following properties: - -- `filename`, the original name of the uploaded file; -- `metadata` provided by the user for the file (will only be provided during the - initial calls for each uploaded files, otherwise it will be `undefined`). -- `req`, Express.js `Request` object. Do not use any Companion internals from - the req object, as these might change in any minor version of Companion. - -#### `s3.forcePathStyle` `COMPANION_AWS_FORCE_PATH_STYLE` - -This adds support for setting the S3 client’s `forcePathStyle` option. That is -necessary to use Uppy/Companion alongside localstack in development -environments. **Default**: `false`. - -##### `s3.region` `COMPANION_AWS_REGION` - -The datacenter region where the target bucket is located. - -##### `COMPANION_AWS_PREFIX` - -An optional prefix for all uploaded keys. This is a standalone-only option. The -same can be achieved by the `getKey` option when using the express middleware. - -##### `s3.awsClientOptions` - -You can supply any -[S3 option supported by the AWS SDK](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#constructor-property) -in the `providerOptions.s3.awsClientOptions` object, _except for_ the below: - -- `accessKeyId`. Instead, use the `providerOptions.s3.key` property. This is to - make configuration names consistent between different Companion features. -- `secretAccessKey`. Instead, use the `providerOptions.s3.secret` property. This - is to make configuration names consistent between different Companion - features. - -Be aware that some options may cause wrong behaviour if they conflict with -Companion’s assumptions. If you find that a particular option does not work as -expected, please -[open an issue on the Uppy repository](https://github.com/transloadit/uppy/issues/new) -so we can document it here. - -##### `s3.getKey({ filename, metadata, req })` - -Get the key name for a file. The key is the file path to which the file will be -uploaded in your bucket. This option should be a function receiving three -arguments: - -- `filename`, the original name of the uploaded file; -- `metadata`, user-provided metadata for the file. -- `req`, Express.js `Request` object. Do not use any Companion internals from - the req object, as these might change in any minor version of Companion. - -This function should return a string `key`. The `req` parameter can be used to -upload to a user-specific folder in your bucket, for example: - -```js -app.use(authenticationMiddleware); -app.use( - uppy.app({ - providerOptions: { - s3: { - getKey: ({ req, filename, metadata }) => `${req.user.id}/${filename}`, - /* auth options */ - }, - }, - }), -); -``` - -The default implementation returns the `filename`, so all files will be uploaded -to the root of the bucket as their original file name. - -```js -app.use( - uppy.app({ - providerOptions: { - s3: { - getKey: ({ filename, metadata }) => filename, - }, - }, - }), -); -``` - -When signing on the client, this function will only be called for multipart -uploads. - -#### `COMPANION_AWS_USE_ACCELERATE_ENDPOINT` - -Enable S3 -[Transfer Acceleration](https://docs.aws.amazon.com/AmazonS3/latest/userguide/transfer-acceleration.html). -This is a standalone-only option. - -#### `COMPANION_AWS_EXPIRES` - -Set `X-Amz-Expires` query parameter in the presigned urls (in seconds, default: -300\). This is a standalone-only option. - -#### `COMPANION_AWS_ACL` - -Set a -[Canned ACL](https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl) -for uploaded objects. This is a standalone-only option. - -#### `customProviders` - -This option enables you to add custom providers along with the already supported -providers. See [adding custom providers](#how-to-add-custom-providers) for more -information. - -#### `logClientVersion` - -A boolean flag to tell Companion whether to log its version upon startup. - -#### `metrics` `COMPANION_HIDE_METRICS` - -A boolean flag to tell Companion whether to provide an endpoint `/metrics` with -Prometheus metrics (by default metrics are enabled.) - -#### `streamingUpload` `COMPANION_STREAMING_UPLOAD` - -A boolean flag to tell Companion whether to enable streaming uploads. If -enabled, it will lead to _faster uploads_ because companion will start uploading -at the same time as downloading using `stream.pipe`. If `false`, files will be -fully downloaded first, then uploaded. Defaults to `true`. - -#### `maxFileSize` `COMPANION_MAX_FILE_SIZE` - -If this value is set, companion will limit the maximum file size to process. If -unset, it will process files without any size limit (this is the default). - -#### `periodicPingUrls` `COMPANION_PERIODIC_PING_URLS` - -If this value is set, companion will periodically send POST requests to the -specified URLs. Useful for keeping track of companion instances as a keep-alive. - -#### `periodicPingInterval` `COMPANION_PERIODIC_PING_INTERVAL` - -Interval for periodic ping requests (in ms). - -#### `periodicPingStaticPayload` `COMPANION_PERIODIC_PING_STATIC_JSON_PAYLOAD` - -A `JSON.stringify`-able JavaScript Object that will be sent as part of the JSON -body in the period ping requests. - -#### `allowLocalUrls` `COMPANION_ALLOW_LOCAL_URLS` - -A boolean flag to tell Companion whether to allow requesting local URLs -(non-internet IPs). - -:::caution - -Only enable this in development. **Enabling it in production is a security -risk.** - -::: - -#### `corsOrigins` (required) - -Allowed CORS Origins. Passed as the `origin` option in -[cors](https://github.com/expressjs/cors#configuration-options). - -Note this is used for both CORS’ `Access-Control-Allow-Origin` header, and for -the -[`targetOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#targetorigin) -for `postMessage` calls in the context of OAuth. - -Setting it to `true` treats any origin as a trusted one, making it easier to -impersonate your brand. Setting it to `false` disables cross-origin support, use -this if you’re serving Companion and Uppy from the same domain name. - -##### `COMPANION_CLIENT_ORIGINS` - -Stand-alone alternative to the `corsOrigins` option. A comma-separated string of -origins, or `'true'` (which will be interpreted as the boolean value `true`), or -`'false'` (which will be interpreted as the boolean value `false`). -`COMPANION_CLIENT_ORIGINS_REGEX` will be ignored if this option is used. - -##### `COMPANION_CLIENT_ORIGINS_REGEX` - -:::note - -In most cases, you should not be using a regex, and instead provide the list of -accepted origins to `COMPANION_CLIENT_ORIGINS`. If you have to use this option, -have in mind that this regex will be used to parse unfiltered user input, so -make sure you’re validating the entirety of the string. - -::: - -Stand-alone alternative to the `corsOrigins` option. Like -`COMPANION_CLIENT_ORIGINS`, but allows a single regex instead. - -#### `chunkSize` `COMPANION_CHUNK_SIZE` - -Controls how big the uploaded chunks are for AWS S3 Multipart and Tus. Smaller -values lead to more overhead, but larger values lead to slower retries in case -of bad network connections. Passed to tus-js-client -[`chunkSize`](https://github.com/tus/tus-js-client/blob/master/docs/api.md#chunksize) -as well as -[AWS S3 Multipart](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html) -`partSize`. - -#### `enableUrlEndpoint` `COMPANION_ENABLE_URL_ENDPOINT` - -Set this to `true` to enable the [URL functionalily](https://uppy.io/docs/url/). -Default: `false`. - -#### `enableGooglePickerEndpoint` `COMPANION_ENABLE_GOOGLE_PICKER_ENDPOINT` - -Set this to `true` to enable the Google Picker (Photos / Drive) functionality. -Default: `false`. - -### Events - -The object returned by `companion.app()` also has a property `companionEmitter` -which is an `EventEmitter` that emits the following events: - -- `upload-start` - When an upload starts, this event is emitted with an object - containing the property `token`, which is a unique ID for the upload. -- **token** - The event name is the token from `upload-start`. The event has an - object with the following properties: - - `action` - One of the following strings: - - `success` - When the upload succeeds. - - `error` - When the upload fails with an error. - - `payload` - the error or success payload. - -Example code for using the `EventEmitter` to handle a finished file upload: - -```js -const companionApp = companion.app(options); -const { companionEmitter: emitter } = companionApp; - -emitter.on('upload-start', ({ token }) => { - console.log('Upload started', token); - - function onUploadEvent({ action, payload }) { - if (action === 'success') { - emitter.off(token, onUploadEvent); // avoid listener leak - console.log('Upload finished', token, payload.url); - } else if (action === 'error') { - emitter.off(token, onUploadEvent); // avoid listener leak - console.error('Upload failed', payload); - } - } - emitter.on(token, onUploadEvent); -}); -``` - - - -## Frequently asked questions - -### Do you have a live example? - -An example server is running at . - -### How does the Authentication and Token mechanism work? - -This section describes how Authentication works between Companion and Providers. -While this behaviour is the same for all Providers (Dropbox, Instagram, Google -Drive, etc.), we are going to be referring to Dropbox in place of any Provider -throughout this section. - -The following steps describe the actions that take place when a user -Authenticates and Uploads from Dropbox through Companion: - -- The visitor to a website with Uppy clicks `Connect to Dropbox`. -- Uppy sends a request to Companion, which in turn sends an OAuth request to - Dropbox (Requires that OAuth credentials from Dropbox have been added to - Companion). -- Dropbox asks the visitor to log in, and whether the Website should be allowed - to access your files -- If the visitor agrees, Companion will receive a token from Dropbox, with which - we can temporarily download files. -- Companion encrypts the token with a secret key and sends the encrypted token - to Uppy (client) -- Every time the visitor clicks on a folder in Uppy, it asks Companion for the - new list of files, with this question, the token (still encrypted by - Companion) is sent along. -- Companion decrypts the token, requests the list of files from Dropbox and - sends it to Uppy. -- When a file is selected for upload, Companion receives the token again - according to this procedure, decrypts it again, and thereby downloads the file - from Dropbox. -- As the bytes arrive, Companion uploads the bytes to the final destination - (depending on the configuration: Apache, a Tus server, S3 bucket, etc). -- Companion reports progress to Uppy, as if it were a local upload. -- Completed! - -### How to use provider redirect URIs? - -When generating your provider API keys on their corresponding developer -platforms (e.g -[Google Developer Console](https://console.developers.google.com/)), you’d need -to provide a `redirect URI` for the OAuth authorization process. In general the -redirect URI for each provider takes the format: - -`http(s)://$YOUR_COMPANION_HOST_NAME/$PROVIDER_NAME/redirect` - -For example, if your Companion server is hosted on -`https://my.companion.server.com`, then the redirect URI you would supply for -your OneDrive provider would be: - -`https://my.companion.server.com/onedrive/redirect` - -Please see -[Supported Providers](https://uppy.io/docs/companion/#Supported-providers) for a -list of all Providers and their corresponding names. - -### How to use Companion with Kubernetes? - -We have a detailed -[guide](https://github.com/transloadit/uppy/blob/main/packages/%40uppy/companion/KUBERNETES.md) -on running Companion in Kubernetes. - -### How to add custom providers? - -As of now, Companion supports the -[providers listed here](https://uppy.io/docs/companion/#Supported-providers) out -of the box, but you may also choose to add your own custom providers. You can do -this by passing the `customProviders` option when calling the Uppy `app` method. -The custom provider is expected to support Oauth 1 or 2 for -authentication/authorization. - -```javascript -import providerModule from './path/to/provider/module'; - -const options = { - customProviders: { - myprovidername: { - config: { - authorize_url: 'https://mywebsite.com/authorize', - access_url: 'https://mywebsite.com/token', - oauth: 2, - key: '***', - secret: '***', - scope: ['read', 'write'], - }, - module: providerModule, - }, - }, -}; - -uppy.app(options); -``` - -The `customProviders` option should be an object containing each custom -provider. Each custom provider would, in turn, be an object with two keys, -`config` and `module`. The `config` option would contain Oauth API settings, -while the `module` would point to the provider module. - -To work well with Companion, the **module** must be a class with the following -methods. Note that the methods must be `async`, return a `Promise` or reject -with an `Error`): - -1. `async list ({ token, directory, query })` - Returns a object containing a - list of user files (such as a list of all the files in a particular - directory). See [example returned list data structure](#list-data). `token` - - authorization token (retrieved from oauth process) to send along with your - request - - `directory` - the id/name of the directory from which data is to be - retrieved. This may be ignored if it doesn’t apply to your provider - - `query` - expressjs query params object received by the server (in case - some data you need in there). -2. `async download ({ token, id, query })` - Downloads a particular file from - the provider. Returns an object with a single property `{ stream }` - a - [`stream.Readable`](https://nodejs.org/api/stream.html#stream_class_stream_readable), - which will be read from and uploaded to the destination. To prevent memory - leaks, make sure you release your stream if you reject this method with an - error. - - `token` - authorization token (retrieved from oauth process) to send along - with your request. - - `id` - ID of the file being downloaded. - - `query` - expressjs query params object received by the server (in case - some data you need in there). -3. `async size ({ token, id, query })` - Returns the byte size of the file that - needs to be downloaded as a `Number`. If the size of the object is not known, - `null` may be returned. - - `token` - authorization token (retrieved from oauth process) to send along - with your request. - - `id` - ID of the file being downloaded. - - `query` - expressjs query params object received by the server (in case - some data you need in there). - -The class must also have: - -- A unique `static authProvider` string property - a lowercased value which - indicates name of the [`grant`](https://github.com/simov/grant) OAuth2 - provider to use (e.g `google` for Google). If your provider doesn’t use - OAuth2, you can omit this property. -- A `static` property `static version = 2`, which is the current version of the - Companion Provider API. - -See also -[example code with a custom provider](https://github.com/transloadit/uppy/blob/main/examples/custom-provider/server). - -#### list data - -```json -{ - // username or email of the user whose provider account is being accessed - "username": "johndoe", - // list of files and folders in the directory. An item is considered a folder - // if it mainly exists as a collection to contain sub-items - "items": [ - { - // boolean value of whether or NOT it's a folder - "isFolder": false, - // icon image URL - "icon": "https://random-api.url.com/fileicon.jpg", - // name of the item - "name": "myfile.jpg", - // the mime type of the item. Only relevant if the item is NOT a folder - "mimeType": "image/jpg", - // the id (in string) of the item - "id": "uniqueitemid", - // thumbnail image URL. Only relevant if the item is NOT a folder - "thumbnail": "https://random-api.url.com/filethumbnail.jpg", - // for folders this is typically the value that will be passed as "directory" in the list(...) method. - // For files, this is the value that will be passed as id in the download(...) method. - "requestPath": "file-or-folder-requestpath", - // datetime string (in ISO 8601 format) of when this item was last modified - "modifiedDate": "2020-06-29T19:59:58Z", - // the size in bytes of the item. Only relevant if the item is NOT a folder - "size": 278940, - "custom": { - // an object that may contain some more custom fields that you may need to send to the client. Only add this object if you have a need for it. - "customData1": "the value", - "customData2": "the value" - } - // more items here - } - ], - // if the "items" list is paginated, this is the request path needed to fetch the next page. - "nextPagePath": "directory-name?cursor=cursor-to-next-page" -} -``` - -### How to run Companion locally? - -1. To set up Companion for local development, please clone the Uppy repo and - install, like so: - - ```bash - git clone https://github.com/transloadit/uppy - cd uppy - yarn install - ``` - -2. Configure your environment variables by copying the `env.example.sh` file to - `env.sh` and edit it to its correct values. - - ```bash - cp .env.example .env - $EDITOR .env - ``` - -3. To start the server, run: - - ```bash - yarn run start:companion - ``` - -This would get the Companion instance running on `http://localhost:3020`. It -uses [`node --watch`](https://nodejs.org/api/cli.html#--watch) so it will -automatically restart when files are changed. - -[box]: /docs/box -[dropbox]: /docs/dropbox -[facebook]: /docs/facebook -[googledrive]: /docs/google-drive -[googlephotos]: /docs/google-photos -[googledrivepicker]: /docs/google-drive-picker -[googlephotospicker]: /docs/google-photos-picker -[instagram]: /docs/instagram -[onedrive]: /docs/onedrive -[unsplash]: /docs/unsplash -[url]: /docs/url -[zoom]: /docs/zoom -[transloadit]: https://transloadit.com -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/box.mdx b/docs/sources/companion-plugins/box.mdx deleted file mode 100644 index 71e1407afd..0000000000 --- a/docs/sources/companion-plugins/box.mdx +++ /dev/null @@ -1,177 +0,0 @@ ---- -slug: /box ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Box - -The `@uppy/box` plugin lets users import files from their -[Box](https://www.box.com/en-nl/home) 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 -[Box](https://www.box.com/en-nl/home) account. - -A [Companion](/docs/companion) instance is required for the Box plugin to work. -Companion handles authentication with Box, 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/). - - - - -```shell -npm install @uppy/box -``` - - - - - -```shell -yarn add @uppy/box -``` - - - - - - {` - import { Uppy, Box } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Box, { - // Options - }) - `} - - - - -## Use - -Using Box 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 Box from '@uppy/box'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Box, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Box from '@uppy/box'; - -uppy.use(Box, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Box from '@uppy/box'; - -uppy.use(Box, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -You can create a Box App on the -[Box Developers site](https://app.box.com/developers/console). - -Things to note: - -- Choose `Custom App` and select the `User Authentication (OAuth 2.0)` app type. -- You must enable full write access, or you will get - [403 when downloading files](https://support.box.com/hc/en-us/community/posts/360049195613-403-error-while-file-download-API-Call) - -You’ll be redirected to the app page. This page lists the client ID (app key) -and client secret (app secret), which you should use to configure Companion. - -The app page has a `"Redirect URIs"` field. Here, add: - -``` -https://$YOUR_COMPANION_HOST_NAME/box/redirect -``` - -If you are using Transloadit hosted Companion: - -``` -https://api2.transloadit.com/companion/box/redirect -``` - -You can only use the integration with your own account initially. Make sure to -apply for production status on the app page before you publish your app, or your -users will not be able to sign in! - -Configure the Box key and secret. With the standalone Companion server, specify -environment variables: - -```shell -export COMPANION_BOX_KEY="Box API key" -export COMPANION_BOX_SECRET="Box API secret" -``` - -When using the Companion Node.js API, configure these options: - -```js -companion.app({ - providerOptions: { - box: { - key: 'Box API key', - secret: 'Box API secret', - }, - }, -}); -``` - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/companion-options.mdx b/docs/sources/companion-plugins/companion-options.mdx deleted file mode 100644 index a1cc4e0af0..0000000000 --- a/docs/sources/companion-plugins/companion-options.mdx +++ /dev/null @@ -1,69 +0,0 @@ ---- -slug: /companion-options ---- - -# Common Companion options - -These are the options common to all Uppy plugins that use Companion. - -## `id` - -A unique identifier for this plugin (`string`, default is a unique ID for each -plugin). - -## `title` - -Title / name shown in the UI, such as Dashboard tabs (`string`, default is the -name of the plugin). - -## `target` - -DOM element, CSS selector, or plugin to place the drag and drop area into -(`string`, `Element`, `Function`, or `UIPlugin`, default: -[`Dashboard`](/docs/dashboard)). - -## `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` - -An object with `strings` property containing additional i18n strings. The key is -the i18n key and the value is the English string. - -Example: - -```js -{ - strings: { - someKey: 'Some English string', - }, -} -``` - -## `storage` - -A custom storage to be used for the plugin’s persistent data. Type `AsyncStore`, -default is `LocalStorage`. diff --git a/docs/sources/companion-plugins/dropbox.mdx b/docs/sources/companion-plugins/dropbox.mdx deleted file mode 100644 index e7a8efc207..0000000000 --- a/docs/sources/companion-plugins/dropbox.mdx +++ /dev/null @@ -1,177 +0,0 @@ ---- -slug: /dropbox ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Dropbox - -The `@uppy/dropbox` plugin lets users import files from their -[Dropbox](https://www.dropbox.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 -[Dropbox](https://www.dropbox.com) account. - -A [Companion](/docs/companion) instance is required for the Dropbox plugin to -work. Companion handles authentication with Dropbox, 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/). - - - - -```shell -npm install @uppy/dropbox -``` - - - - - -```shell -yarn add @uppy/dropbox -``` - - - - - - {` - import { Uppy, Dropbox } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Dropbox, { - // Options - }) - `} - - - - -## Use - -Using Dropbox 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 Dropbox from '@uppy/dropbox'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Dropbox, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Dropbox from '@uppy/dropbox'; - -uppy.use(Dropbox, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Dropbox from '@uppy/dropbox'; - -uppy.use(Dropbox, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -You can create a Dropbox App on the -[Dropbox Developers site](https://www.dropbox.com/developers/apps/create). - -Things to note: - -- Choose the “Dropbox API”, not the business variant. -- Typically you’ll want “Full Dropbox” access, unless you are absolutely certain - that you need the other one. - -You’ll be redirected to the app page. This page lists the app key and app -secret, which you should use to configure Companion as shown above. - -The app page has a “Redirect URIs” field. Here, add: - -``` -https://$YOUR_COMPANION_HOST_NAME/dropbox/redirect -``` - -If you are using Transloadit hosted Companion: - -``` -https://api2.transloadit.com/companion/dropbox/redirect -``` - -You can only use the integration with your own account initially. Make sure to -apply for production status on the app page before you publish your app, or your -users will not be able to sign in! - -Configure the Dropbox key and secret. With the standalone Companion server, -specify environment variables: - -```shell -export COMPANION_DROPBOX_KEY="Dropbox API key" -export COMPANION_DROPBOX_SECRET="Dropbox API secret" -``` - -When using the Companion Node.js API, configure these options: - -```js -companion.app({ - providerOptions: { - dropbox: { - key: 'Dropbox API key', - secret: 'Dropbox API secret', - }, - }, -}); -``` - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/facebook.mdx b/docs/sources/companion-plugins/facebook.mdx deleted file mode 100644 index 71f248a49a..0000000000 --- a/docs/sources/companion-plugins/facebook.mdx +++ /dev/null @@ -1,174 +0,0 @@ ---- -slug: /facebook ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Facebook - -The `@uppy/facebook` plugin lets users import files from their -[Facebook](https://www.facebook.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 -[Facebook](https://www.facebook.com) account. - -A [Companion](/docs/companion) instance is required for the Facebook plugin to -work. Companion handles authentication with Facebook, 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/). - - - - -```shell -npm install @uppy/facebook -``` - - - - - -```shell -yarn add @uppy/facebook -``` - - - - - - {` - import { Uppy, Facebook } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Facebook, { - // Options - }) - `} - - - - -## Use - -Using Facebook 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 Facebook from '@uppy/facebook'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Facebook, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Facebook from '@uppy/facebook'; - -uppy.use(Facebook, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Facebook from '@uppy/facebook'; - -uppy.use(Facebook, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -You can create a Facebook App on the -[Facebook Developers site](https://developers.facebook.com/apps). - -The app page has a “Redirect URIs” field. Here, add: - -``` -https://$YOUR_COMPANION_HOST_NAME/facebook/redirect -``` - -If you are using Transloadit hosted Companion: - -``` -https://api2.transloadit.com/companion/facebook/redirect -``` - -You can only use the integration with your own account initially. Make sure to -apply for production status on the app page before you publish your app, or your -users will not be able to sign in! - -You need to set up OAuth in your Facebook app for Companion to be able to -connect to users’ Facebook accounts. You have to enable “Advanced Access” for -the `user_photos` permission. A precondition of that is “Business Verification” -which involves setting up a Meta Business Account and submitting documents to -prove business ownership. - -Configure the Facebook key and secret. With the standalone Companion server, -specify environment variables: - -```shell -export COMPANION_FACEBOOK_KEY="Facebook API key" -export COMPANION_FACEBOOK_SECRET="Facebook API secret" -``` - -When using the Companion Node.js API, configure these options: - -```js -companion.app({ - providerOptions: { - facebook: { - key: 'Facebook API key', - secret: 'Facebook API secret', - }, - }, -}); -``` - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/google-drive-picker.mdx b/docs/sources/companion-plugins/google-drive-picker.mdx deleted file mode 100644 index 3a4adf4300..0000000000 --- a/docs/sources/companion-plugins/google-drive-picker.mdx +++ /dev/null @@ -1,142 +0,0 @@ ---- -slug: /google-drive-picker ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Google Drive Picker - -The `@uppy/google-drive` plugin lets users import files from their -[Google Drive](https://drive.google.com) account using the new -[Picker API](https://developers.google.com/drive/picker). The benefit of using -this API over the traditional Google Drive API (which the -[Google Drive plugin](./google-drive.mdx) uses) is that the Picker API requires -less verification from Google. Drawbacks of the Picker API include less control -and inability to select folders. See also -[Google Photos Picker](./google-photos-picker.mdx). - -## When should I use this? - -When you want to let users import files from their -[Google Drive](https://drive.google.com) account. - -A [Companion](/docs/companion) instance is required for the Google Drive Picker -plugin to work. Companion downloads the files from Google Drive, 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-drive-picker -``` - - - - - -```shell -yarn add @uppy/google-drive-picker -``` - - - - - - {` - import { Uppy, GoogleDrivePicker } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(GoogleDrivePicker, { - // Options - }) - `} - - - - -## Use - -Using Google Drive Picker requires setup in both Uppy and Companion. - -### Initial setup - -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 Picker API](https://console.cloud.google.com/apis/library/picker.googleapis.com) - (for Google Drive). -- Create an API key. -- Create an OAuth 2.0 Client ID of type Web application with the correct - Authorized JavaScript origins. - -### Use in Uppy - -```js {10-13} showLineNumbers -import Uppy from '@uppy/core'; -import Dashboard from '@uppy/dashboard'; -import GoogleDrivePicker from '@uppy/google-drive-picker'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(GoogleDrivePicker, { - companionUrl: 'https://your-companion.com', - clientId: 'From Google Developer Console', - apiKey: 'From Google Developer Console', - appId: 'From Google Developer Console', - }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import GoogleDrivePicker from '@uppy/google-drive-picker'; - -uppy.use(GoogleDrivePicker, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - clientId: 'From Google Developer Console', - apiKey: 'From Google Developer Console', - appId: 'From Google Developer Console', -}); -``` - -### Use in Companion - -Companion is used to download/upload the picked files. Companion supports this -plugin out-of-the-box, however it must be enabled in Companion with the -`enableGooglePickerEndpoint` / `COMPANION_ENABLE_GOOGLE_PICKER_ENDPOINT` option. -For this plugin, all credentials are public (non-secret) and provided in the -frontend. - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -#### `clientId` - -The client ID from the [Initial setup](#initial-setup) (`string`). - -#### `apiKey` - -The API key from the [Initial setup](#initial-setup) (`string`). - -#### `appId` - -The App ID is the project ID which can be found in the URL in the Google -Developer Console (`string`). diff --git a/docs/sources/companion-plugins/google-drive.mdx b/docs/sources/companion-plugins/google-drive.mdx deleted file mode 100644 index 4a3d587bb4..0000000000 --- a/docs/sources/companion-plugins/google-drive.mdx +++ /dev/null @@ -1,178 +0,0 @@ ---- -slug: /google-drive ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Google Drive - -The `@uppy/google-drive` plugin lets users import files from their -[Google Drive](https://drive.google.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 -[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 -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/). - - - - -```shell -npm install @uppy/google-drive -``` - - - - - -```shell -yarn add @uppy/google-drive -``` - - - - - - {` - import { Uppy, GoogleDrive } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(GoogleDrive, { - // Options - }) - `} - - - - -## Use - -Using Google Drive 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 GoogleDrive from '@uppy/google-drive'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(GoogleDrive, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import GoogleDrive from '@uppy/google-drive'; - -uppy.use(GoogleDrive, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import GoogleDrive from '@uppy/google-drive'; - -uppy.use(GoogleDrive, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### 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 Drive API](https://developers.google.com/drive/api/v3/enable-drive-api). -- [Set up OAuth authorization](https://developers.google.com/drive/api/v3/about-auth). - - Under scopes, add the `https://www.googleapis.com/auth/drive.readonly` Drive - API scope. - - Due to this being a sensitive scope, your app must complete Google’s OAuth - app verification before being granted access. See - [OAuth App Verification Help Center](https://support.google.com/cloud/answer/13463073) - for more information. - -The app page has a `"Redirect URIs"` field. Here, add: - -``` -https://$YOUR_COMPANION_HOST_NAME/drive/redirect -``` - -If you are using Transloadit hosted Companion: - -``` -https://api2.transloadit.com/companion/drive/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: { - drive: { - key: 'Google OAuth client ID', - secret: 'Google OAuth client secret', - }, - }, -}); -``` - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/google-photos-picker.mdx b/docs/sources/companion-plugins/google-photos-picker.mdx deleted file mode 100644 index 195710dba9..0000000000 --- a/docs/sources/companion-plugins/google-photos-picker.mdx +++ /dev/null @@ -1,127 +0,0 @@ ---- -slug: /google-photos-picker ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Google Photos Picker - -The `@uppy/google-photos` plugin lets users import files from their -[Google Photos](https://photos.google.com) account using the new -[Picker API](https://developers.google.com/photos/picker). The benefit of using -this API over the traditional Google Photos API (which the -[Google Photos plugin](./google-photos.mdx) uses) is that the Picker API -requires less verification from Google. Drawbacks of the Picker API include less -control and inability to select shared albums. See also -[Google Drive Picker](./google-drive-picker.mdx). - -## 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 Picker -plugin to work. Companion downloads the files from Google Photos, 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-picker -``` - - - - - -```shell -yarn add @uppy/google-photos-picker -``` - - - - - - {` - import { Uppy, GooglePhotosPicker } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(GooglePhotosPicker, { - // Options - }) - `} - - - - -## Use - -Using Google Photos Picker requires setup in both Uppy and Companion. - -### Initial setup - -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 Picker API](https://console.cloud.google.com/apis/library/photospicker.googleapis.com). -- Create an OAuth 2.0 Client ID of type Web application with the correct - Authorized JavaScript origins. - -### Use in Uppy - -```js {10-13} showLineNumbers -import Uppy from '@uppy/core'; -import Dashboard from '@uppy/dashboard'; -import GooglePhotosPicker from '@uppy/google-photos-picker'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(GooglePhotosPicker, { - companionUrl: 'https://your-companion.com', - clientId: 'From Google Developer Console', - }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import GooglePhotosPicker from '@uppy/google-photos-picker'; - -uppy.use(GooglePhotosPicker, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - clientId: 'From Google Developer Console', -}); -``` - -### Use in Companion - -Companion is used to download/upload the picked files. Companion supports this -plugin out-of-the-box, however it must be enabled in Companion with the -`enableGooglePickerEndpoint` / `COMPANION_ENABLE_GOOGLE_PICKER_ENDPOINT` option. -For this plugin, all credentials are public (non-secret) and provided in the -frontend. - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -#### `clientId` - -The client ID from the [Initial setup](#initial-setup) (`string`). diff --git a/docs/sources/companion-plugins/google-photos.mdx b/docs/sources/companion-plugins/google-photos.mdx deleted file mode 100644 index fc6fb39d8e..0000000000 --- a/docs/sources/companion-plugins/google-photos.mdx +++ /dev/null @@ -1,175 +0,0 @@ ---- -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 -[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 -[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 with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import GooglePhotos from '@uppy/google-photos'; - -uppy.use(GooglePhotos, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import GooglePhotos from '@uppy/google-photos'; - -uppy.use(GooglePhotos, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### 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 - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/instagram.mdx b/docs/sources/companion-plugins/instagram.mdx deleted file mode 100644 index 2521555ef4..0000000000 --- a/docs/sources/companion-plugins/instagram.mdx +++ /dev/null @@ -1,187 +0,0 @@ ---- -slug: /instagram ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Instagram - -The `@uppy/instagram` plugin lets users import files from their -[Instagram](https://instagram.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 -[Instagram](https://instagram.com) account. - -A [Companion](/docs/companion) instance is required for the Instagram plugin to -work. Companion handles authentication with Instagram, 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/). - - - - -```shell -npm install @uppy/instagram -``` - - - - - -```shell -yarn add @uppy/instagram -``` - - - - - - {` - import { Uppy, Instagram } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Instagram, { - // Options - }) - `} - - - - -## Use - -Using Instagram 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 Instagram from '@uppy/instagram'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Instagram, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Instagram from '@uppy/instagram'; - -uppy.use(Instagram, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Instagram from '@uppy/instagram'; - -uppy.use(Instagram, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -To sign up for API keys, go to the -[Instagram Platform from Meta](https://developers.facebook.com/products/instagram/). - -Create a project for your app if you don’t have one yet. - -The app page has a `"Redirect URIs"` field. Here, add: - -``` -https://$YOUR_COMPANION_HOST_NAME/instagram/redirect -``` - -If you are using Transloadit hosted Companion: - -``` -https://api2.transloadit.com/companion/instagram/redirect -``` - -Meta will give you an OAuth client ID and client secret. - -Configure the Instagram key and secret in Companion. With the standalone -Companion server, specify environment variables: - -```shell -export COMPANION_INSTAGRAM_KEY="Instagram OAuth client ID" -export COMPANION_INSTAGRAM_SECRET="Instagram OAuth client secret" -``` - -When using the Companion Node.js API, configure these options: - -```js -companion.app({ - providerOptions: { - instagram: { - key: 'Instagram OAuth client ID', - secret: 'Instagram OAuth client secret', - }, - }, -}); -``` - -### Development - -Among Uppy-supported providers, Instagram is the only provider at the time of -writing that requires https even in dev mode. So, to test your integration in -development, you need to use some reverse proxy. The easiest way to do it is to -use [https://redirectmeto.com](https://redirectmeto.com). - -In your `.env`, set: - -```sh -COMPANION_DOMAIN="redirectmeto.com/http://localhost:3020" -COMPANION_PROTOCOL="https" -``` - -On -[https://developers.facebook.com/apps/.../instagram-basic-display/basic-display](https://developers.facebook.com/apps/.../instagram-basic-display/basic-display) -page, in the “Valid OAuth Redirect URIs” field, add -`https://redirectmeto.com/http://localhost:3020/instagram/redirect`. - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/onedrive.mdx b/docs/sources/companion-plugins/onedrive.mdx deleted file mode 100644 index 97084b7419..0000000000 --- a/docs/sources/companion-plugins/onedrive.mdx +++ /dev/null @@ -1,175 +0,0 @@ ---- -slug: /onedrive ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# OneDrive - -The `@uppy/onedrive` plugin lets users import files from their -[OneDrive](https://onedrive.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 -[OneDrive](https://onedrive.com) account. - -A [Companion](/docs/companion) instance is required for the OneDrive plugin to -work. Companion handles authentication with OneDrive, 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/). - - - - -```shell -npm install @uppy/onedrive -``` - - - - - -```shell -yarn add @uppy/onedrive -``` - - - - - - {` - import { Uppy, OneDrive } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(OneDrive, { - // Options - }) - `} - - - - -## Use - -Using OneDrive 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 OneDrive from '@uppy/onedrive'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(OneDrive, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import OneDrive from '@uppy/onedrive'; - -uppy.use(OneDrive, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import OneDrive from '@uppy/onedrive'; - -uppy.use(OneDrive, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -To sign up for API keys, go to the -[Azure Platform from Microsoft](https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade). - -Create a project for your app if you don’t have one yet. - -The app page has a `"Redirect URIs"` field. Here, add: - -``` -https://$YOUR_COMPANION_HOST_NAME/onedrive/redirect -``` - -If you are using Transloadit hosted Companion: - -``` -https://api2.transloadit.com/companion/onedrive/redirect -``` - -Go to the “Manifest” tab, and find the `"signInAudience"` key. Change it to -`"signInAudience": "AzureADandPersonalMicrosoftAccount"`, and click “Save”. - -Go to the “Overview” tab. Copy the `Application (client) ID` field - this will -be your Oauth client ID. - -Go to the “Certificates & secrets” tab, and click “+ New client secret”. Copy -the `Value` field - this will be your OAuth client secret. - -Configure the OneDrive key and secret in Companion. With the standalone -Companion server, specify environment variables: - -```shell -export COMPANION_ONEDRIVE_KEY="OneDrive Application ID" -export COMPANION_ONEDRIVE_SECRET="OneDrive OAuth client secret value" -``` - -When using the Companion Node.js API, configure these options: - -```js -companion.app({ - providerOptions: { - onedrive: { - key: 'OneDrive Application ID', - secret: 'OneDrive OAuth client secret value', - }, - }, -}); -``` - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/unsplash.mdx b/docs/sources/companion-plugins/unsplash.mdx deleted file mode 100644 index 3771f41772..0000000000 --- a/docs/sources/companion-plugins/unsplash.mdx +++ /dev/null @@ -1,153 +0,0 @@ ---- -slug: /unsplash ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Unsplash - -The `@uppy/unsplash` plugin lets users import files from their -[Unsplash](https://unsplash.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 -[Unsplash](https://unsplash.com) account. - -A [Companion](/docs/companion) instance is required for the Unsplash plugin to -work. Companion handles authentication with Unsplash, 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/). - - - - -```shell -npm install @uppy/unsplash -``` - - - - - -```shell -yarn add @uppy/unsplash -``` - - - - - - {` - import { Uppy, Unsplash } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Unsplash, { - // Options - }) - `} - - - - -## Use - -Using Unsplash 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 Unsplash from '@uppy/unsplash'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Unsplash, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Unsplash from '@uppy/unsplash'; - -uppy.use(Unsplash, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Unsplash from '@uppy/unsplash'; - -uppy.use(Unsplash, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -You can create a Unsplash App on the -[Unsplash Developers site](https://unsplash.com/developers). You’ll be -redirected to the app page, this page lists the app key and app secret. - -Configure the Unsplash key and secret. With the standalone Companion server, -specify environment variables: - -```shell -export COMPANION_UNSPLASH_KEY="Unsplash API key" -export COMPANION_UNSPLASH_SECRET="Unsplash API secret" -``` - -When using the Companion Node.js API, configure these options: - -```js -companion.app({ - providerOptions: { - unsplash: { - key: 'Unsplash API key', - secret: 'Unsplash API secret', - }, - }, -}); -``` - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/url.mdx b/docs/sources/companion-plugins/url.mdx deleted file mode 100644 index de342af754..0000000000 --- a/docs/sources/companion-plugins/url.mdx +++ /dev/null @@ -1,139 +0,0 @@ ---- -slug: /url ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Import from URL - -The `@uppy/url` plugin allows users to import files from the internet. Paste any -URL and it will be added! - -:::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 any URL. - -A [Companion](/docs/companion) instance is required for the URL plugin to work. -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/). - -:::note - -Companion has -[Server Side Request Forgery](https://owasp.org/www-community/attacks/Server_Side_Request_Forgery) -(SSRF) protections built-in so you don’t have to worry about the security -implications of arbitrary URLs. - -::: - - - - -```shell -npm install @uppy/url -``` - - - - - -```shell -yarn add @uppy/url -``` - - - - - - {` - import { Uppy, Url } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Url, { - // Options - }) - `} - - - - -## Use - -Using `@uppy/url` only requires setup in Uppy. - -### Use in Uppy - -```js {10-13} showLineNumbers -import Uppy from '@uppy/core'; -import Dashboard from '@uppy/dashboard'; -import Url from '@uppy/url'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; -import '@uppy/url/dist/style.min.css'; - -new Uppy() - .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Url, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Url from '@uppy/url'; - -uppy.use(Url, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Url from '@uppy/url'; - -uppy.use(Url, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -Companion supports this plugin out-of-the-box, however it must be enabled in -Companion with the `enableUrlEndpoint` / `COMPANION_ENABLE_URL_ENDPOINT` option. - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/sources/companion-plugins/zoom.mdx b/docs/sources/companion-plugins/zoom.mdx deleted file mode 100644 index 5bac89dc52..0000000000 --- a/docs/sources/companion-plugins/zoom.mdx +++ /dev/null @@ -1,178 +0,0 @@ ---- -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 cloud video recordings from their -[Zoom](https://zoom.com) account. Note that -[only licensed](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0063923) -Zoom accounts can store their recordings in the cloud, so this functionality -will only be available to users with a paid Zoom 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 cloud video recordings 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/). - - - - -```shell -npm install @uppy/zoom -``` - - - - - -```shell -yarn add @uppy/zoom -``` - - - - - - {` - import { Uppy, Zoom } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Zoom, { - // Options - }) - `} - - - - -## 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, { companionUrl: 'https://your-companion.com' }); -``` - -### Use with Transloadit - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Zoom from '@uppy/zoom'; - -uppy.use(Zoom, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, -}); -``` - -You may also hit rate limits, because the OAuth application is shared between -everyone using Transloadit. - -To solve that, you can use your own OAuth keys with Transloadit’s hosted -Companion servers by using Transloadit Template Credentials. [Create a Template -Credential][template-credentials] on the Transloadit site. Select “Companion -OAuth” for the service, and enter the key and secret for the provider you want -to use. Then you can pass the name of the new credentials to that provider: - -```js -import { COMPANION_URL, COMPANION_ALLOWED_HOSTS } from '@uppy/transloadit'; -import Zoom from '@uppy/zoom'; - -uppy.use(Zoom, { - companionUrl: COMPANION_URL, - companionAllowedHosts: COMPANION_ALLOWED_HOSTS, - companionKeysParams: { - key: 'YOUR_TRANSLOADIT_API_KEY', - credentialsName: 'my_companion_dropbox_creds', - }, -}); -``` - -### Use in Companion - -To sign up for API keys, go through the following steps: - -1. Sign up on [Zoom Marketplace](https://marketplace.zoom.us) - -2. Go to [https://marketplace.zoom.us](https://marketplace.zoom.us). There will - be a dropdown in the header called “Develop”. From that dropdown, select - “Build app”. - -3. In the “Basic Information” tab, Zoom shows your new “Client ID” and “Client - Secret” - copy them. - - 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', - }, - }, - }); - ``` - -4. In the “Basic Information” tab, set “OAuth Redirect URL” input field to: - - ``` - https://$YOUR_COMPANION_HOST_NAME/zoom/redirect - ``` - - If you are using Transloadit hosted Companion: - - ``` - https://api2.transloadit.com/companion/zoom/redirect - ``` - -5. In the “Scopes” tab, add “cloud_recording:read:list_user_recordings” and - “user:read:user” scopes. If Zoom asks for further permissions when you - interact with your Zoom integration - add those too. - -## API - -### Options - -#### [Common Companion options...](./companion-options.mdx) - -[template-credentials]: - https://transloadit.com/docs/#how-to-create-template-credentials diff --git a/docs/user-interfaces/dashboard.mdx b/docs/user-interfaces/dashboard.mdx deleted file mode 100644 index 07d6d4fbd2..0000000000 --- a/docs/user-interfaces/dashboard.mdx +++ /dev/null @@ -1,759 +0,0 @@ ---- -sidebar_position: 1 -slug: /dashboard ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -import UppyCdnExample from '/src/components/UppyCdnExample'; - -# Dashboard - -The all you need Dashboard — powerful, responsive, and pluggable. Kickstart your -uploading experience and gradually add more functionality. Add files from -[remote sources](/docs/companion), [edit images](/docs/image-editor), -[generate thumbnails](/docs/thumbnail-generator), and more. - -Checkout [integrations](#integrations) for the full list of plugins you can -integrate. - -:::tip - -[Try out the live example with all plugins](/examples) or take it for a spin in -[StackBlitz](https://stackblitz.com/edit/vitejs-vite-zaqyaf?file=main.js). - -::: - -## When should I use this? - -There could be many reasons why you may want to use the Dashboard, but some -could be: - -- when you need a battle tested plug-and-play uploading UI to save time. -- when your users need to add files from [remote sources](/docs/companion), such - [Google Drive](/docs/google-drive), [Dropbox](/docs/dropbox), and others. -- when you need to collect [meta data](#metafields) from your users per file. -- when your users want to take a picture with their [webcam](/docs/webcam) or - [capture their screen](/docs/screen-capture). - -## Install - - - - -```shell -npm install @uppy/core @uppy/dashboard -``` - - - - - -```shell -yarn add @uppy/core @uppy/dashboard -``` - - - - - - {` - import { Uppy, Dashboard } from "{{UPPY_JS_URL}}" - const uppy = new Uppy() - uppy.use(Dashboard, { target: '#uppy', inline: true }) - `} - - - - -## Use - -```js showLineNumbers -import Uppy from '@uppy/core'; -import Dashboard from '@uppy/dashboard'; - -import '@uppy/core/dist/style.min.css'; -import '@uppy/dashboard/dist/style.min.css'; - -new Uppy().use(Dashboard, { inline: true, target: '#uppy-dashboard' }); -``` - -:::note - -The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the -various plugins used by the Dashboard, such as -([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). -If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you -should not include their CSS files, but instead only use the one from the -`@uppy/dashboard` plugin. - -::: - -:::note - -Styles for Provider plugins, like Google Drive and Instagram, are also bundled -with Dashboard styles. Styles for other plugins, such as `@uppy/url` and -`@uppy/webcam`, are not included. If you are using those, please see their docs -and make sure to include styles for them as well. - -::: - -## API - -### Options - -#### `id` - -A unique identifier for this plugin (`string`, default: `'Dashboard'`). - -Plugins that are added by the Dashboard get unique IDs based on this ID, like -`'Dashboard:StatusBar'` and `'Dashboard:Informer'`. - -#### `target` - -Where to render the Dashboard (`string` or `Element`, default: `'body'`). - -You can pass an element, class, or id as a string. Dashboard is rendered into -`body`, because it’s hidden by default and only opened as a modal when `trigger` -is clicked. - -#### `inline` - -Render the Dashboard as a modal or inline (`boolean`, default: `false`). - -When `false`, Dashboard is opened by clicking on [`trigger`](#trigger). If -`inline: true`, Dashboard will be rendered into [`target`](#target) and fit -right in. - -#### `trigger` - -A CSS selector for a button that will trigger opening the Dashboard modal -(`string`, default: `null`). - -Several buttons or links can be used, as long as they are selected using the -same selector (`.select-file-button`, for example). - -#### `width` - -Width of the Dashboard in pixels (`number`, default: `750`). Used when -`inline: true`. - -#### `height` - -Height of the Dashboard in pixels (`number`, default: `550`). Used when -`inline: true`. - -#### `waitForThumbnailsBeforeUpload` - -Whether to wait for all thumbnails from `@uppy/thumbnail-generator` to be ready -before starting the upload (`boolean`, default `false`). - -If set to `true`, Thumbnail Generator will envoke Uppy’s internal processing -stage, displaying “Generating thumbnails...” message, and wait for -`thumbnail:all-generated` event, before proceeding to the uploading stage. - -This is useful because Thumbnail Generator also adds EXIF data to images, and if -we wait until it’s done processing, this data will be available on the server -after the upload. - -#### `showLinkToFileUploadResult` - -Turn the file icon and thumbnail in the Dashboard into a link to the uploaded -file (`boolean`, default: `false`). - -Please make sure to return the `url` key (or the one set via -`responseUrlFieldName`) from your server. - -#### `showProgressDetails` - -Show or hide progress details in the status bar (`boolean`, default: `false`). - -By default, progress in Status Bar is shown as a percentage. If you would like -to also display remaining upload size and time, set this to `true`. - -`showProgressDetails: false`: Uploading: 45% - -`showProgressDetails: true`: Uploading: 45%・43 MB of 101 MB・8s left - -#### `hideUploadButton` - -Show or hide the upload button (`boolean`, default: `false`). - -Use this if you are providing a custom upload button somewhere, and are using -the `uppy.upload()` API. - -#### `hideRetryButton` - -Hide the retry button in the status bar and on each individual file (`boolean`, -default: `false`). - -Use this if you are providing a custom retry button somewhere and if you are -using the `uppy.retryAll()` or `uppy.retryUpload(fileID)` API. - -#### `hidePauseResumeButton` - -Hide the pause/resume button (for resumable uploads, via [tus](http://tus.io), -for example) in the status bar and on each individual file (`boolean`, default: -`false`). - -Use this if you are providing custom cancel or pause/resume buttons somewhere, -and using the `uppy.pauseResume(fileID)` or `uppy.removeFile(fileID)` API. - -#### `hideCancelButton` - -Hide the cancel button in status bar and on each individual file (`boolean`, -default: `false`). - -Use this if you are providing a custom retry button somewhere, and using the -`uppy.cancelAll()` API. - -#### `hideProgressAfterFinish` - -Hide the status bar after the upload has finished (`boolean`, default: `false`). - -#### `doneButtonHandler` - -This option is passed to the status bar and will render a “Done” button in place -of pause/resume/cancel buttons, once the upload/encoding is done. The behaviour -of this “Done” button is defined by this handler function, for instance to close -the file picker modals or clear the upload state. - -This is what the Dashboard sets by default: - -```js -const doneButtonHandler = () => { - this.uppy.cancelAll(); - this.requestCloseModal(); -}; -``` - -Set to `null` to disable the “Done” button. - -#### `showSelectedFiles` - -Show the list of added files with a preview and file information (`boolean`, -default: `true`). - -In case you are showing selected files in your own app’s UI and want the Uppy -Dashboard to only be a picker, the list can be hidden with this option. - -See also [`disableStatusBar`](#disablestatusbar) option, which can hide the -progress and upload button. - -#### `showRemoveButtonAfterComplete` - -Show the remove button on every file after a successful upload (`boolean`, -default: `false`). - -Enabling this option only shows the remove `X` button in the Dashboard UI, but -to actually send a request you should listen to -[`file-removed`](https://uppy.io/docs/uppy/#file-removed) event and add your -logic there. - -Example: - -```js -uppy.on('file-removed', (file, reason) => { - if (reason === 'removed-by-user') { - sendDeleteRequestForFile(file); - } -}); -``` - -For an implementation example, please see -[#2301](https://github.com/transloadit/uppy/issues/2301#issue-628931176). - -#### `singleFileFullScreen` - -When only one file is selected, its preview and meta information will be -centered and enlarged (`boolean`, default: `true`). - -Often times Uppy used for photo / profile image uploads, or maybe a single -document. Then it makes sense to occupy the whole space of the available -Dashboard UI, giving the stage to this one file. This feature is automatically -disabled when Dashboard is small in height, since there’s not enough room. - -#### `note` - -A string of text to be placed in the Dashboard UI (`string`, default: `null`). - -This could for instance be used to explain any [`restrictions`](#restrictions) -that are put in place. For example: -`'Images and video only, 2–3 files, up to 1 MB'`. - -#### `metaFields` - -Create text or custom input fields for the user to fill in (`Array` or -`Function`, default: `null`). - -This will be shown when a user clicks the “edit” button on that file. - -:::note - -The meta data will only be set on a file object if it’s entered by the user. If -the user doesn’t edit a file’s metadata, it will not have default values; -instead everything will be `undefined`. If you want to set a certain meta field -to each file regardless of user actions, set -[`meta` in the Uppy constructor options](/docs/uppy/#meta). - -::: - -Each object can contain: - -- `id`. The name of the meta field. This will also be used in CSS/HTML as part - of the `id` attribute, so it’s better to - [avoid using characters like periods, semicolons, etc](https://stackoverflow.com/a/79022). -- `name`. The label shown in the interface. -- `placeholder`. The text shown when no value is set in the field. (Not needed - when a custom render function is provided) -- `render: ({value, onChange, required, form}, h) => void` (optional). A - function for rendering a custom form element. - - `value` is the current value of the meta field - - `onChange: (newVal) => void` is a function saving the new value and `h` is - the `createElement` function from - [Preact](https://preactjs.com/guide/v10/api-reference#h--createelement). - - `required` is a boolean that’s true if the field `id` is in the - `restrictedMetaFields` restriction - - `form` is the `id` of the associated `
` element. - - `h` can be useful when using Uppy from plain JavaScript, where you cannot - write JSX. - -
-Example: meta fields configured as an `Array` - -```js -uppy.use(Dashboard, { - trigger: '#pick-files', - metaFields: [ - { id: 'name', name: 'Name', placeholder: 'file name' }, - { id: 'license', name: 'License', placeholder: 'specify license' }, - { - id: 'caption', - name: 'Caption', - placeholder: 'describe what the image is about', - }, - { - id: 'public', - name: 'Public', - render({ value, onChange, required, form }, h) { - return h('input', { - type: 'checkbox', - required, - form, - onChange: (ev) => onChange(ev.target.checked ? 'on' : ''), - defaultChecked: value === 'on', - }); - }, - }, - ], -}); -``` - -
- -
-Example: dynamic meta fields based on file type with a `Function` - -```js -uppy.use(Dashboard, { - trigger: '#pick-files', - metaFields: (file) => { - const fields = [{ id: 'name', name: 'File name' }]; - if (file.type.startsWith('image/')) { - fields.push({ id: 'location', name: 'Photo Location' }); - fields.push({ id: 'alt', name: 'Alt text' }); - fields.push({ - id: 'public', - name: 'Public', - render: ({ value, onChange, required, form }, h) => { - return h('input', { - type: 'checkbox', - onChange: (ev) => onChange(ev.target.checked ? 'on' : ''), - defaultChecked: value === 'on', - required, - form, - }); - }, - }); - } - return fields; - }, -}); -``` - -
- -#### `closeModalOnClickOutside` - -Set to true to automatically close the modal when the user clicks outside of it -(`boolean`, default: `false`). - -#### `closeAfterFinish` - -Set to true to automatically close the modal when all current uploads are -complete (`boolean`, default: `false`). - -With this option, the modal is only automatically closed when uploads are -complete _and successful_. If some uploads failed, the modal stays open so the -user can retry failed uploads or cancel the current batch and upload an entirely -different set of files instead. - -:::info - -You can use this together with the -[`allowMultipleUploads: false`](/docs/uppy/#allowmultipleuploads) option in Uppy -Core to create a smooth experience when uploading a single (batch of) file(s). - -This is recommended. With several upload batches, the auto-closing behavior can -be quite confusing for users. - -::: - -#### `disablePageScrollWhenModalOpen` - -Disable page scroll when the modal is open (`boolean`, default: `true`). - -Page scrolling is disabled by default when the Dashboard modal is open, so when -you scroll a list of files in Uppy, the website in the background stays still. -Set to false to override this behaviour and leave page scrolling intact. - -#### `animateOpenClose` - -Add animations when the modal dialog is opened or closed, for a more satisfying -user experience (`boolean`, default: `true`). - -#### `fileManagerSelectionType` - -Configure the type of selections allowed when browsing your file system via the -file manager selection window (`string`, default: `'files'`). - -May be either `'files'`, `'folders'`, or `'both'`. Selecting entire folders for -upload may not be supported on all -[browsers](https://caniuse.com/#feat=input-file-directory). - -#### `proudlyDisplayPoweredByUppy` - -Show the Uppy logo with a link (`boolean`, default: `true`). - -Uppy is provided to the world for free by the team behind -[Transloadit](https://transloadit.com). In return, we ask that you consider -keeping a tiny Uppy logo at the bottom of the Dashboard, so that more people can -discover and use Uppy. - -#### `disableStatusBar` - -Disable the status bar completely (`boolean`, default: `false`). - -Dashboard ships with the `StatusBar` plugin that shows upload progress and -pause/resume/cancel buttons. If you want, you can disable the StatusBar to -provide your own custom solution. - -#### `disableInformer` - -Disable informer (shows notifications in the form of toasts) completely -(`boolean`, default: `false`). - -Dashboard ships with the `Informer` plugin that notifies when the browser is -offline, or when it’s time to say cheese if `Webcam` is taking a picture. If you -want, you can disable the Informer and/or provide your own custom solution. - -#### `disableThumbnailGenerator` - -Disable the thumbnail generator completely (`boolean`, default: `false`). - -Dashboard ships with the `ThumbnailGenerator` plugin that adds small resized -image thumbnails to images, for preview purposes only. If you want, you can -disable the `ThumbnailGenerator` and/or provide your own custom solution. - -#### `locale` - -```js -module.exports = { - strings: { - // When `inline: false`, used as the screen reader label for the button that closes the modal. - closeModal: 'Close Modal', - // Used as the screen reader label for the plus (+) button that shows the “Add more files” screen - addMoreFiles: 'Add more files', - addingMoreFiles: 'Adding more files', - // Used as the header for import panels, e.g., “Import from Google Drive”. - importFrom: 'Import from %{name}', - // When `inline: false`, used as the screen reader label for the dashboard modal. - dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)', - // When `inline: true`, used as the screen reader label for the dashboard area. - dashboardTitle: 'Uppy Dashboard', - // Shown in the Informer when a link to a file was copied to the clipboard. - copyLinkToClipboardSuccess: 'Link copied to clipboard.', - // Used when a link cannot be copied automatically — the user has to select the text from the - // input element below this string. - copyLinkToClipboardFallback: 'Copy the URL below', - // Used as the hover title and screen reader label for buttons that copy a file link. - copyLink: 'Copy link', - back: 'Back', - // Used as the screen reader label for buttons that remove a file. - removeFile: 'Remove file', - // Used as the screen reader label for buttons that open the metadata editor panel for a file. - editFile: 'Edit file', - // Shown in the panel header for the metadata editor. Rendered as “Editing image.png”. - editing: 'Editing %{file}', - // Used as the screen reader label for the button that saves metadata edits and returns to the - // file list view. - finishEditingFile: 'Finish editing file', - saveChanges: 'Save changes', - // Used as the label for the tab button that opens the system file selection dialog. - myDevice: 'My Device', - dropHint: 'Drop your files here', - // Used as the hover text and screen reader label for file progress indicators when - // they have been fully uploaded. - uploadComplete: 'Upload complete', - uploadPaused: 'Upload paused', - // Used as the hover text and screen reader label for the buttons to resume paused uploads. - resumeUpload: 'Resume upload', - // Used as the hover text and screen reader label for the buttons to pause uploads. - pauseUpload: 'Pause upload', - // Used as the hover text and screen reader label for the buttons to retry failed uploads. - retryUpload: 'Retry upload', - // Used as the hover text and screen reader label for the buttons to cancel uploads. - cancelUpload: 'Cancel upload', - // Used in a title, how many files are currently selected - xFilesSelected: { - 0: '%{smart_count} file selected', - 1: '%{smart_count} files selected', - }, - uploadingXFiles: { - 0: 'Uploading %{smart_count} file', - 1: 'Uploading %{smart_count} files', - }, - processingXFiles: { - 0: 'Processing %{smart_count} file', - 1: 'Processing %{smart_count} files', - }, - // The "powered by Uppy" link at the bottom of the Dashboard. - poweredBy: 'Powered by %{uppy}', - addMore: 'Add more', - editFileWithFilename: 'Edit file %{file}', - save: 'Save', - cancel: 'Cancel', - dropPasteFiles: 'Drop files here or %{browseFiles}', - dropPasteFolders: 'Drop files here or %{browseFolders}', - dropPasteBoth: 'Drop files here, %{browseFiles} or %{browseFolders}', - dropPasteImportFiles: 'Drop files here, %{browseFiles} or import from:', - dropPasteImportFolders: 'Drop files here, %{browseFolders} or import from:', - dropPasteImportBoth: - 'Drop files here, %{browseFiles}, %{browseFolders} or import from:', - importFiles: 'Import files from:', - browseFiles: 'browse files', - browseFolders: 'browse folders', - recoveredXFiles: { - 0: 'We could not fully recover 1 file. Please re-select it and resume the upload.', - 1: 'We could not fully recover %{smart_count} files. Please re-select them and resume the upload.', - }, - recoveredAllFiles: 'We restored all files. You can now resume the upload.', - sessionRestored: 'Session restored', - reSelect: 'Re-select', - missingRequiredMetaFields: { - 0: 'Missing required meta field: %{fields}.', - 1: 'Missing required meta fields: %{fields}.', - }, - }, -}; -``` - -#### `theme` - -Light or dark theme for the Dashboard (`string`, default: `'light'`). - -Uppy Dashboard supports “Dark Mode”. You can try it live on -[the Dashboard example page](https://uppy.io/examples/). - -It supports the following values: - -- `light` — the default -- `dark` -- `auto` — will respect the user’s system settings and switch automatically - -#### `autoOpen` - -Automatically open file editor for the file user just dropped/selected. -If one file is added, editor opens for that file; if 10 files are added, editor -opens only for the first file. - -This option supports the following values: - -- `null` - the default -- `"metaEditor"` - open the meta fields editor if - [meta fields](/docs/dashboard/#metafields) are enabled. -- `"imageEditor"` - open [`@uppy/image-editor`](/docs/image-editor) if the - plugin is enabled. - -#### `disabled` - -Enabling this option makes the Dashboard grayed-out and non-interactive -(`boolean`, default: `false`). - -Users won’t be able to click on buttons or drop files. Useful when you need to -conditionally enable/disable file uploading or manipulation, based on a -condition in your app. Can be set on init or via API: - -```js -const dashboard = uppy.getPlugin('Dashboard'); -dashboard.setOptions({ disabled: true }); - -userNameInput.addEventListener('change', () => { - dashboard.setOptions({ disabled: false }); -}); -``` - -#### `disableLocalFiles` - -Disable local files (`boolean`, default: `false`). - -Enabling this option will disable drag & drop, hide the “browse” and “My Device” -button, allowing only uploads from plugins, such as Webcam, Screen Capture, -Google Drive, Instagram. - -#### `onDragOver(event)` - -Callback for the [`ondragover`][ondragover] event handler. - -#### `onDrop(event)` - -Callback for the [`ondrop`][ondrop] event handler. - -#### `onDragLeave(event)` - -Callback for the [`ondragleave`][ondragleave] event handler. - -### Methods - -:::info - -Dashboard also has the methods described in -[`UIPlugin`](/docs/uppy#new-uipluginuppy-options) and -[`BasePlugin`](/docs/uppy#new-basepluginuppy-options). - -::: - -#### `openModal()` - -Shows the Dashboard modal. Use it like this: - -`uppy.getPlugin('Dashboard').openModal()` - -#### `closeModal()` - -Hides the Dashboard modal. Use it like this: - -`uppy.getPlugin('Dashboard').closeModal()` - -#### `isModalOpen()` - -Returns `true` if the Dashboard modal is open, `false` otherwise. - -```js -const dashboard = uppy.getPlugin('Dashboard'); -if (dashboard.isModalOpen()) { - dashboard.closeModal(); -} -``` - -### Events - -:::info - -You can use [`on`](/docs/uppy#onevent-action) and -[`once`](/docs/uppy#onceevent-action) to listen to these events. - -::: - -#### `dashboard:modal-open` - -Fired when the Dashboard modal is open. - -```js -uppy.on('dashboard:modal-open', () => { - console.log('Modal is open'); -}); -``` - -#### `dashboard:modal-closed` - -Fired when the Dashboard modal is closed. - -#### `dashboard:file-edit-start` - -**Parameters:** - -- `file` — The [File Object](https://uppy.io/docs/uppy/#File-Objects) - representing the file that was opened for editing. - -Fired when the user clicks “edit” icon next to a file in the Dashboard. The -FileCard panel is then open with file metadata available for editing. - -#### `dashboard:file-edit-complete` - -**Parameters:** - -- `file` — The [File Object](https://uppy.io/docs/uppy/#File-Objects) - representing the file that was edited. - -Fired when the user finished editing the file metadata. - -## Integrations - -These are the plugins specifically made for the Dashboard. This is not a list of -all Uppy plugins. - -### Sources - -- [`@uppy/audio`](/docs/audio) — record audio. -- [`@uppy/box`](/docs/box) — import files from - [Box](https://www.box.com/en-nl/home). -- [`@uppy/dropbox`](/docs/dropbox) — import from [Dropbox](https://dropbox.com). -- [`@uppy/facebook`](/docs/facebook) — import from - [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/google-drive-picker`](/docs/google-drive-picker) — import from - [Google Drive](https://drive.google.com) using the new Picker API. -- [`@uppy/google-photos-picker`](/docs/google-photos-picker) — import from - [Google Photos](https://drive.google.com) using the new Picker API. -- [`@uppy/instagram`](/docs/instagram) — import from - [Instagram](https://instagram.com). -- [`@uppy/onedrive`](/docs/onedrive) — import from - [OneDrive](https://www.microsoft.com/en-us/microsoft-365/onedrive/online-cloud-storage). -- [`@uppy/screen-capture`](/docs/screen-capture) — Record your screen, including - (optionally) your microphone. -- [`@uppy/unsplash`](/docs/unsplash) — import files from - [Unsplash](https://unsplash.com/) -- [`@uppy/url`](/docs/url) — import files from any URL. -- [`@uppy/webcam`](/docs/webcam) — Record or make a picture with your webcam. -- [`@uppy/zoom`](/docs/zoom) — import files from [Zoom](https://zoom.us). - -### UI - -- [`@uppy/image-editor`](/docs/image-editor) — allows users to crop, rotate, - zoom and flip images that are added to Uppy. -- [`@uppy/informer`](/docs/informer) — show notifications. -- [`@uppy/status-bar`](/docs/status-bar) — advanced upload progress status bar. -- [`@uppy/thumbnail-generator`](/docs/thumbnail-generator) — generate preview - thumbnails for images to be uploaded. - -### Frameworks - -- [`@uppy/angular`](/docs/angular) — Dashboard component for - [Angular](https://angular.io/). -- [`@uppy/react`](/docs/react) — Dashboard component for - [React](https://reactjs.org/). -- [`@uppy/svelte`](/docs/svelte) — Dashboard component for - [Svelte](https://svelte.dev/). -- [`@uppy/vue`](/docs/vue) — Dashboard component for [Vue](https://vuejs.org/). - -[ondragover]: - https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragover -[ondragleave]: - https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragleave -[ondrop]: - https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrop