Uppy

https://uppy.io/docs
Admin
Uppy is a modular open-source file uploader that provides UI components, headless hooks, and...
Tokens:197,260
Snippets:1,550
Trust Score:9.9
Update:1 day ago
Show doc for...
Tokens:
Raw
### install() method example

Source: https://uppy.io/docs/guides/building-plugins/

Called when the plugin is .use'd. Use it to set up event listeners and upload hooks. This example attaches an 'upload-progress' event listener and adds a post-processor.

```javascript
export default class MyPlugin extends UIPlugin {
	// ...
	install() {
		this.uppy.on('upload-progress', this.onProgress);
		this.uppy.addPostProcessor(this.afterUpload);
	}
}
```

--------------------------------

### Add pre-processor in install()

Source: https://uppy.io/docs/uppy/

Example of using install() to add a pre-processor, as done by @uppy/compressor. This is required for pre-processor plugins.

```javascript
install () {
  this.uppy.addPreProcessor(this.prepareUpload)
}
```

--------------------------------

### Mount UI plugin in install()

Source: https://uppy.io/docs/uppy/

Example of mounting a UI plugin to the DOM in install() when a target option is provided.

```javascript
install () {
  const { target } = this.opts
  if (target) {
    this.mount(target, this)
  }
}
```

--------------------------------

### Install @uppy/screen-capture with NPM

Source: https://uppy.io/docs/screen-capture/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/screen-capture
```

--------------------------------

### uninstall() method example

Source: https://uppy.io/docs/guides/building-plugins/

Called when the plugin is removed or the Uppy instance is closed. Should undo all work done in install(). This example removes the event listener and post-processor added in install().

```javascript
export default class MyPlugin extends UIPlugin {
	// ...
	uninstall() {
		this.uppy.off('upload-progress', this.onProgress);
		this.uppy.removePostProcessor(this.afterUpload);
	}
}
```

--------------------------------

### Install @uppy/google-photos-picker with npm

Source: https://uppy.io/docs/google-photos-picker/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/google-photos-picker
```

--------------------------------

### CDN setup for Uppy with Zoom plugin

Source: https://uppy.io/docs/zoom/

HTML and JavaScript example for using the Zoom plugin via CDN. Includes CSS link, a container div, and module script that initializes Uppy and adds the Zoom plugin. Note: the bundle includes most plugins, so it's not recommended for production.

```html
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v5.2.1/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, Zoom } from "https://releases.transloadit.com/uppy/v5.2.1/uppy.min.mjs"
  const uppy = new Uppy()
  uppy.use(Zoom, {
  // Options
  })
</script>
```

--------------------------------

### Install @uppy/progress-bar with Yarn

Source: https://uppy.io/docs/progress-bar/

Install the plugin using yarn.

```shell
yarn add @uppy/progress-bar
```

--------------------------------

### Install @uppy/google-drive with npm

Source: https://uppy.io/docs/google-drive/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/google-drive
```

--------------------------------

### Install @uppy/progress-bar with NPM

Source: https://uppy.io/docs/progress-bar/

Install the plugin using npm.

```shell
npm install @uppy/progress-bar
```

--------------------------------

### Install @uppy/transloadit with npm

Source: https://uppy.io/docs/transloadit/

Install the Transloadit plugin using npm.

```shell
npm install @uppy/transloadit
```

--------------------------------

### Install @uppy/onedrive with npm

Source: https://uppy.io/docs/onedrive/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/onedrive
```

--------------------------------

### Install @uppy/webdav with npm

Source: https://uppy.io/docs/webdav/

Install the WebDAV plugin using npm.

```shell
npm install @uppy/webdav
```

--------------------------------

### Install @uppy/webcam with npm

Source: https://uppy.io/docs/webcam/

Install the @uppy/webcam plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/webcam
```

--------------------------------

### install()

Source: https://uppy.io/docs/uppy/

The install method is ran once when the plugin is added to Uppy with .use(). Use this to initialize the plugin.

```APIDOC
## install()

### Description
The `install` method is ran once, when the plugin is added to Uppy with `.use()`. Use this to initialize the plugin.

### Method
`install()`

### Example
```js
install () {
  this.uppy.addPreProcessor(this.prepareUpload)
}
```

Another common thing to do when creating a UI plugin is to mount it to the DOM:

```js
install () {
  const { target } = this.opts
  if (target) {
    this.mount(target, this)
  }
}
```
```

--------------------------------

### Install @uppy/transloadit with Yarn

Source: https://uppy.io/docs/transloadit/

Install the Transloadit plugin using Yarn.

```shell
yarn add @uppy/transloadit
```

--------------------------------

### Install @uppy/webdav with yarn

Source: https://uppy.io/docs/webdav/

Install the WebDAV plugin using yarn.

```shell
yarn add @uppy/webdav
```

--------------------------------

### Before: Using @uppy/progress-bar

Source: https://uppy.io/docs/guides/migration-guides/

Shows the old way of using the deprecated `@uppy/progress-bar` plugin. This code is provided as a 'Before' example in the migration guide.

```javascript
import ProgressBar from '@uppy/progress-bar';

uppy.use(ProgressBar, { target: '#progress' });
```

--------------------------------

### Install @uppy/audio with npm

Source: https://uppy.io/docs/audio/

Install the @uppy/audio plugin using npm.

```shell
npm install @uppy/audio
```

--------------------------------

### SvelteKit page with Uppy Dashboard, XHRUpload, and Form plugin

Source: https://uppy.io/docs/sveltekit/

Extends the previous example by adding the @uppy/form plugin to send additional form fields with the upload. The Form plugin is installed on mount because it is client-side only. Includes a form with a date input and the Dashboard component.

```Svelte
<script>
  import { onMount, onDestroy } from 'svelte';
  import Uppy from '@uppy/core';
  import { Dashboard } from '@uppy/svelte';
  import XHRUpload from '@uppy/xhr-upload';
  import Form from '@uppy/form';

  import '@uppy/core/css/style.min.css';
  import '@uppy/dashboard/css/style.min.css';

  const uppy = new Uppy().use(XHRUpload, { endpoint: '/upload' });

  // @uppy/form is client-side only, so we need to install it
  // when the component is mounted.
  onMount(() => {
    uppy.use(Form, { target: '#form' });
  });
</script>

<form id="form">
  <label for="dob">Date of birth: </label>
  <input type="date" name="dob" />
  <Dashboard {uppy} />
</form>
```

--------------------------------

### Install @uppy/status-bar with npm

Source: https://uppy.io/docs/status-bar/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/status-bar
```

--------------------------------

### Start Companion server

Source: https://uppy.io/docs/companion/

Run the start:companion script to launch Companion locally. It will be available at http://localhost:3020 and uses node --watch for auto-restart on file changes.

```bash
yarn run start:companion
```

--------------------------------

### Install @uppy/screen-capture with Yarn

Source: https://uppy.io/docs/screen-capture/

Install the plugin using Yarn, an alternative package manager.

```shell
yarn add @uppy/screen-capture
```

--------------------------------

### Install @uppy/file-input with npm

Source: https://uppy.io/docs/file-input/

Install the @uppy/file-input plugin using npm.

```shell
npm install @uppy/file-input
```

--------------------------------

### Install @uppy/file-input with yarn

Source: https://uppy.io/docs/file-input/

Install the @uppy/file-input plugin using yarn.

```shell
yarn add @uppy/file-input
```

--------------------------------

### Run standalone Companion

Source: https://uppy.io/docs/companion/

Starts the standalone Companion server using the configured environment variables.

```bash
companion
```

--------------------------------

### Install @uppy/audio with yarn

Source: https://uppy.io/docs/audio/

Install the @uppy/audio plugin using yarn.

```shell
yarn add @uppy/audio
```

--------------------------------

### Install @uppy/thumbnail-generator with NPM

Source: https://uppy.io/docs/thumbnail-generator/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/thumbnail-generator
```

--------------------------------

### companionKeysParams example

Source: https://uppy.io/docs/box/

Example configuration for using your own OAuth app with Transloadit-hosted Companion. Requires your Transloadit API key and the name of a 'Companion OAuth' credential. The values are sent to Companion for pre-auth and in a 'uppy-credentials-params' header on later requests.

```javascript
companionKeysParams: {
	key: 'YOUR_TRANSLOADIT_API_KEY',
	credentialsName: 'google_drive_own',
}
```

--------------------------------

### Install @uppy/image-generator with NPM

Source: https://uppy.io/docs/ai-image/

Install the plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/image-generator
```

--------------------------------

### Install @uppy/drag-drop with npm

Source: https://uppy.io/docs/drag-drop/

Install the core and drag-drop packages via npm.

```shell
npm install @uppy/core @uppy/drag-drop
```

--------------------------------

### Install @uppy/google-drive-picker with npm

Source: https://uppy.io/docs/google-drive-picker/

Install the plugin using npm. Requires a Companion instance for file downloads and uploads.

```shell
npm install @uppy/google-drive-picker
```

--------------------------------

### Run Companion with a JSON config file

Source: https://uppy.io/docs/companion/

Starts Companion with a JSON configuration file using the --config flag.

```bash
companion --config /path/to/companion.json
```

--------------------------------

### Install via yarn

Source: https://uppy.io/docs/progress-bar/

Install the @uppy/progress-bar plugin using yarn.

```APIDOC
## Install via yarn

### Description
Install the @uppy/progress-bar plugin using yarn.

### Command
```shell
yarn add @uppy/progress-bar
```
```

--------------------------------

### Install @uppy/drag-drop with yarn

Source: https://uppy.io/docs/drag-drop/

Install the core and drag-drop packages via yarn.

```shell
yarn add @uppy/core @uppy/drag-drop
```

--------------------------------

### Install @uppy/url with npm

Source: https://uppy.io/docs/url/

Install the @uppy/url plugin using npm.

```shell
npm install @uppy/url
```

--------------------------------

### Webcam Plugin Usage

Source: https://uppy.io/docs/webcam/

Example of how to initialize Uppy with the Dashboard and Webcam plugins.

```APIDOC
## Webcam Plugin Usage

### Description
Initialize Uppy with the Dashboard and Webcam plugins to enable webcam capture.

### Code Example
```js
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Webcam from '@uppy/webcam';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';
import '@uppy/webcam/css/style.min.css';

new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Webcam);
```
```

--------------------------------

### Install Dashboard with NPM

Source: https://uppy.io/docs/dashboard/

Install the core and dashboard packages via npm.

```shell
npm install @uppy/core @uppy/dashboard
```

--------------------------------

### Install @uppy/compressor with NPM

Source: https://uppy.io/docs/compressor/

Install the @uppy/compressor plugin using npm.

```shell
npm install @uppy/compressor
```

--------------------------------

### Install Dashboard with Yarn

Source: https://uppy.io/docs/dashboard/

Install the core and dashboard packages via yarn.

```shell
yarn add @uppy/core @uppy/dashboard
```

--------------------------------

### Install @uppy/unsplash with npm

Source: https://uppy.io/docs/unsplash/

Install the @uppy/unsplash plugin using npm. This is the standard package manager installation method.

```shell
npm install @uppy/unsplash
```

--------------------------------

### Install via npm

Source: https://uppy.io/docs/progress-bar/

Install the @uppy/progress-bar plugin using npm.

```APIDOC
## Install via npm

### Description
Install the @uppy/progress-bar plugin using npm.

### Command
```shell
npm install @uppy/progress-bar
```
```

--------------------------------

### Install @uppy/url with yarn

Source: https://uppy.io/docs/url/

Install the @uppy/url plugin using yarn.

```shell
yarn add @uppy/url
```

--------------------------------

### Install @uppy/google-drive-picker with yarn

Source: https://uppy.io/docs/google-drive-picker/

Install the plugin using yarn. Requires a Companion instance for file downloads and uploads.

```shell
yarn add @uppy/google-drive-picker
```

--------------------------------

### Install Uppy Transloadit packages (Next.js)

Source: https://uppy.io/docs/guides/uppy-transloadit/

Install the core, dashboard, react, transloadit, and transloadit packages for the Next.js integration.

```shell
npm install @uppy/core @uppy/dashboard @uppy/react @uppy/transloadit transloadit
```

--------------------------------

### Install @uppy/compressor with Yarn

Source: https://uppy.io/docs/compressor/

Install the @uppy/compressor plugin using yarn.

```shell
yarn add @uppy/compressor
```

--------------------------------

### Install @uppy/react

Source: https://uppy.io/docs/react/

Install the @uppy/react package using npm or yarn.

```APIDOC
## Install @uppy/react

### Description
Install the @uppy/react package to use React components and hooks for Uppy.

### Installation

#### NPM
```shell
npm install @uppy/react
```

#### Yarn
```shell
yarn add @uppy/react
```

### Notes
- You may also need to install peer dependencies, for instance `@uppy/dashboard`.
- To send files to Transloadit, follow the canonical [React + Uppy + Transloadit guide](https://uppy.io/docs/guides/uppy-transloadit/#react). It includes the required server-side signing boundary.
```

--------------------------------

### Install @uppy/informer with yarn

Source: https://uppy.io/docs/informer/

Install the @uppy/informer package using yarn.

```shell
yarn add @uppy/informer
```

--------------------------------

### Install @uppy/react with npm

Source: https://uppy.io/docs/react/

Install the @uppy/react package using npm. You may also need to install peer dependencies, such as @uppy/dashboard.

```shell
npm install @uppy/react
```

--------------------------------

### Install @uppy/vue with npm

Source: https://uppy.io/docs/vue/

Install the @uppy/vue package using npm. You also need to install the UI plugin you want to use, such as @uppy/dashboard.

```shell
npm install @uppy/vue
```

--------------------------------

### Install @uppy/box with npm

Source: https://uppy.io/docs/box/

Install the @uppy/box plugin using npm.

```shell
npm install @uppy/box
```

--------------------------------

### Install @uppy/svelte with npm

Source: https://uppy.io/docs/svelte/

Install the @uppy/svelte package using npm. You also need to install the UI plugin you want to use, such as @uppy/dashboard.

```shell
npm install @uppy/svelte
```

--------------------------------

### Install @uppy/google-photos-picker with yarn

Source: https://uppy.io/docs/google-photos-picker/

Install the plugin using yarn, an alternative package manager.

```shell
yarn add @uppy/google-photos-picker
```

--------------------------------

### Install @uppy/onedrive with yarn

Source: https://uppy.io/docs/onedrive/

Install the plugin using yarn, an alternative package manager.

```shell
yarn add @uppy/onedrive
```

--------------------------------

### Install @uppy/tus with npm

Source: https://uppy.io/docs/tus/

Install the @uppy/tus plugin using npm.

```shell
npm install @uppy/tus
```

--------------------------------

### Install @uppy/remote-sources with npm

Source: https://uppy.io/docs/remote-sources/

Install the @uppy/remote-sources package using npm.

```shell
npm install @uppy/remote-sources
```

--------------------------------

### Install @uppy/zoom with yarn

Source: https://uppy.io/docs/zoom/

Install the Zoom plugin via yarn. Requires a Companion instance for authentication and file handling.

```shell
yarn add @uppy/zoom
```

--------------------------------

### Install @uppy/vue

Source: https://uppy.io/docs/vue/

Install the @uppy/vue package via npm or yarn.

```APIDOC
## Install @uppy/vue

### Description
Install the @uppy/vue package via npm or yarn.

### Installation
```shell
npm install @uppy/vue
```

```shell
yarn add @uppy/vue
```
```

--------------------------------

### Install @uppy/svelte with yarn

Source: https://uppy.io/docs/svelte/

Install the @uppy/svelte package using yarn. You also need to install the UI plugin you want to use, such as @uppy/dashboard.

```shell
yarn add @uppy/svelte
```

--------------------------------

### Install Transloadit Node SDK

Source: https://uppy.io/docs/guides/uppy-transloadit/

Install the Transloadit Node SDK in the server application using npm.

```shell
npm install transloadit
```

--------------------------------

### Install @uppy/informer

Source: https://uppy.io/docs/informer/

Install the @uppy/informer plugin via npm or yarn.

```APIDOC
## Install @uppy/informer

### Description
Install the @uppy/informer plugin using npm or yarn.

### Installation
#### npm
```shell
npm install @uppy/informer
```

#### yarn
```shell
yarn add @uppy/informer
```
```

--------------------------------

### Install @uppy/angular with npm

Source: https://uppy.io/docs/angular/

Install the @uppy/angular package using npm. Requires also installing the UI plugin you want to use, such as @uppy/dashboard.

```shell
npm install @uppy/angular
```

--------------------------------

### Install @uppy/facebook with npm

Source: https://uppy.io/docs/facebook/

Install the @uppy/facebook plugin using npm.

```shell
npm install @uppy/facebook
```

--------------------------------

### Install Uppy Transloadit packages (JavaScript)

Source: https://uppy.io/docs/guides/uppy-transloadit/

Install the core, dashboard, and transloadit packages for the JavaScript integration.

```shell
npm install @uppy/core @uppy/dashboard @uppy/transloadit
```

--------------------------------

### Install @uppy/informer with npm

Source: https://uppy.io/docs/informer/

Install the @uppy/informer package using npm.

```shell
npm install @uppy/informer
```

--------------------------------

### Install @uppy/google-drive with Yarn

Source: https://uppy.io/docs/google-drive/

Install the plugin using Yarn, an alternative package manager.

```shell
yarn add @uppy/google-drive
```

--------------------------------

### Install @uppy/status-bar with yarn

Source: https://uppy.io/docs/status-bar/

Install the plugin using yarn, an alternative package manager.

```shell
yarn add @uppy/status-bar
```

--------------------------------

### Install @uppy/box with yarn

Source: https://uppy.io/docs/box/

Install the @uppy/box plugin using yarn.

```shell
yarn add @uppy/box
```

--------------------------------

### Install @uppy/webcam with Yarn

Source: https://uppy.io/docs/webcam/

Install the @uppy/webcam plugin using Yarn, an alternative package manager.

```shell
yarn add @uppy/webcam
```

--------------------------------

### Full example of a custom Uppy plugin (UppyImageCompressor)

Source: https://uppy.io/docs/guides/building-plugins/

Complete UIPlugin example that compresses images before upload using compressorjs. Shows constructor with default options, locale strings, compress method, prepareUpload hook, and install/uninstall methods. Replace the compressorjs method with any other async work as needed.

```javascript
import { UIPlugin } from '@uppy/core';
import { Translator } from '@uppy/core/utils';
import Compressor from 'compressorjs/dist/compressor.esm.js';

class UppyImageCompressor extends UIPlugin {
	constructor(uppy, opts) {
		const defaultOptions = {
			quality: 0.6,
		};
		super(uppy, { ...defaultOptions, ...opts });

		this.id = this.opts.id || 'ImageCompressor';
		this.type = 'modifier';

		this.defaultLocale = {
			strings: {
				compressingImages: 'Compressing images...',
			},
		};

		// we use those internally in `this.compress`, so they
		// should not be overridden
		delete this.opts.success;
		delete this.opts.error;

		this.i18nInit();
	}

	compress(blob) {
		return new Promise(
			(resolve, reject) =>
				new Compressor(blob, {
					...this.opts,
					success(result) {
						return resolve(result);
					},
					error(err) {
						return reject(err);
					},
				}),
		);
	}

	prepareUpload = (fileIDs) => {
		const promises = fileIDs.map((fileID) => {
			const file = this.uppy.getFile(fileID);
			this.uppy.emit('preprocess-progress', file, {
				mode: 'indeterminate',
				message: this.i18n('compressingImages'),
			});

			if (!file.type.startsWith('image/')) {
				return;
			}

			return this.compress(file.data)
				.then((compressedBlob) => {
					this.uppy.log(
						`[Image Compressor] Image ${file.id} size before/after compression: ${file.data.size} / ${compressedBlob.size}`,
					);
					this.uppy.setFileState(fileID, { data: compressedBlob });
				})
				.catch((err) => {
					this.uppy.log(
						`[Image Compressor] Failed to compress ${file.id}:`,
						'warning',
					);
					this.uppy.log(err, 'warning');
				});
		});

		const emitPreprocessCompleteForAll = () => {
			fileIDs.forEach((fileID) => {
				const file = this.uppy.getFile(fileID);
				this.uppy.emit('preprocess-complete', file);
			});
		};

		// Why emit `preprocess-complete` for all files at once, instead of
		// above when each is processed?
		// Because it leads to StatusBar showing a weird “upload 6 files” button,
		// while waiting for all the files to complete pre-processing.
		return Promise.all(promises).then(emitPreprocessCompleteForAll);
	};

	install() {
		this.uppy.addPreProcessor(this.prepareUpload);
	}

	uninstall() {
		this.uppy.removePreProcessor(this.prepareUpload);
	}
}

export default UppyImageCompressor;
```

--------------------------------

### Basic RemoteSources setup with Dashboard

Source: https://uppy.io/docs/remote-sources/

Initializes Uppy with Dashboard and RemoteSources, specifying the Companion URL.

```javascript
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import RemoteSources from '@uppy/remote-sources';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';

new Uppy();
  .use(Dashboard);
  .use(RemoteSources, { companionUrl: 'https://your-companion-url' });
```

--------------------------------

### addPreProcessor(fn)

Source: https://uppy.io/docs/uppy/

Adds a preprocessing function that gets called with a list of file IDs before an upload starts. The function should return a Promise.

```APIDOC
## addPreProcessor(fn)

### Description
Add a preprocessing function. `fn` gets called with a list of file IDs before an upload starts. `fn` should return a Promise. Its resolution value is ignored.

### Method
addPreProcessor

### Parameters
- `fn` (function) - Required - A function that receives a list of file IDs and returns a Promise.

### Response
No return value.
```

--------------------------------

### Install @uppy/core with npm

Source: https://uppy.io/docs/uppy/

Install the core Uppy module using npm.

```shell
npm install @uppy/core
```

--------------------------------

### Install @uppy/drop-target with NPM

Source: https://uppy.io/docs/drop-target/

Install the @uppy/drop-target plugin using npm.

```shell
npm install @uppy/drop-target
```

--------------------------------

### Install @uppy/tus with yarn

Source: https://uppy.io/docs/tus/

Install the @uppy/tus plugin using yarn.

```shell
yarn add @uppy/tus
```

--------------------------------

### Install Uppy Transloadit packages (React)

Source: https://uppy.io/docs/guides/uppy-transloadit/

Install the core, dashboard, react, and transloadit packages for the React integration.

```shell
npm install @uppy/core @uppy/dashboard @uppy/react @uppy/transloadit
```

--------------------------------

### Install @uppy/zoom with npm

Source: https://uppy.io/docs/zoom/

Install the Zoom plugin via npm. Requires a Companion instance for authentication and file handling.

```shell
npm install @uppy/zoom
```

--------------------------------

### Install @uppy/remote-sources with yarn

Source: https://uppy.io/docs/remote-sources/

Install the @uppy/remote-sources package using yarn.

```shell
yarn add @uppy/remote-sources
```

--------------------------------

### addUploader(fn)

Source: https://uppy.io/docs/uppy/

Adds an uploader function that gets called with a list of file IDs when an upload should start. The function should do the actual uploading work and return a Promise.

```APIDOC
## addUploader(fn)

### Description
Add an uploader function. `fn` gets called with a list of file IDs when an upload should start. Uploader functions should do the actual uploading work, such as creating and sending an XMLHttpRequest or calling into some upload service SDK. `fn` should return a Promise that resolves once all files have been uploaded.

### Method
addUploader

### Parameters
- `fn` (function) - Required - A function that receives a list of file IDs and returns a Promise.

### Response
No return value.
```

--------------------------------

### BasePlugin.install()

Source: https://uppy.io/docs/guides/building-plugins/

Called when the plugin is used via .use(). Use this method to set up event listeners and upload hooks.

```APIDOC
## install()

### Description
Called when the plugin is `.use`d. Do any setup work here, like attaching events or adding upload hooks.

### Method
install()

### Parameters
None

### Request Example
```js
export default class MyPlugin extends UIPlugin {
	// ...
	install() {
		this.uppy.on('upload-progress', this.onProgress);
		this.uppy.addPostProcessor(this.afterUpload);
	}
}
```

### Response
No return value.
```

--------------------------------

### Implementing a custom store with createDefaultStore

Source: https://uppy.io/docs/guides/custom-stores/

Example implementation of a store with getState, setState, and subscribe methods. The subscribe method returns an unsubscribe function.

```javascript
function createDefaultStore() {
	let state = {};
	const listeners = new Set();

	return {
		getState: () => state,
		setState: (patch) => {
			const prevState = state;
			const nextState = { ...prevState, ...patch };

			state = nextState;

			listeners.forEach((listener) => {
				listener(prevState, nextState, patch);
			});
		},
		subscribe: (listener) => {
			listeners.add(listener);
			return () => listeners.delete(listener);
		},
	};
}
```

--------------------------------

### ScreenCapture Plugin Usage

Source: https://uppy.io/docs/screen-capture/

Example of initializing Uppy with the Dashboard and ScreenCapture plugins.

```APIDOC
## ScreenCapture Plugin Usage

### Description
Example of initializing Uppy with the Dashboard and ScreenCapture plugins.

### Code Example
```js
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import ScreenCapture from '@uppy/screen-capture';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';
import '@uppy/screen-capture/css/style.min.css';

new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(ScreenCapture);
```
```

--------------------------------

### Configure environment variables

Source: https://uppy.io/docs/companion/

Copy the .env.example file to .env and edit it with your editor to set correct values for local Companion development.

```bash
cp .env.example .env
$EDITOR .env
```

--------------------------------

### Install @uppy/xhr-upload via npm

Source: https://uppy.io/docs/xhr-upload/

Use this command to install the @uppy/xhr-upload plugin via npm.

```shell
npm install @uppy/xhr-upload
```

--------------------------------

### Install @uppy/facebook with Yarn

Source: https://uppy.io/docs/facebook/

Install the @uppy/facebook plugin using Yarn.

```shell
yarn add @uppy/facebook
```

--------------------------------

### Install polyfills with npm

Source: https://uppy.io/docs/guides/browser-support/

Install the required polyfills for IE11 support using npm.

```shell
npm install core-js whatwg-fetch abortcontroller-polyfill md-gum-polyfill resize-observer-polyfill
```

--------------------------------

### Install @uppy/form via Yarn

Source: https://uppy.io/docs/form/

Install the @uppy/form plugin using yarn.

```shell
yarn add @uppy/form
```

--------------------------------

### Install @uppy/thumbnail-generator with Yarn

Source: https://uppy.io/docs/thumbnail-generator/

Install the plugin using Yarn, an alternative package manager.

```shell
yarn add @uppy/thumbnail-generator
```

--------------------------------

### Install @uppy/drop-target with Yarn

Source: https://uppy.io/docs/drop-target/

Install the @uppy/drop-target plugin using yarn.

```shell
yarn add @uppy/drop-target
```

--------------------------------

### Install @uppy/aws-s3 with npm

Source: https://uppy.io/docs/aws-s3/

Use npm to install the @uppy/aws-s3 plugin.

```shell
npm install @uppy/aws-s3
```

--------------------------------

### Install @uppy/core with yarn

Source: https://uppy.io/docs/uppy/

Install the core Uppy module using yarn.

```shell
yarn add @uppy/core
```

--------------------------------

### JSX setup with Preact for Uppy plugin

Source: https://uppy.io/docs/guides/building-plugins/

Required for using JSX in Uppy plugins because Uppy uses Preact, not React. Add the `/** @jsx h */` comment at the top of the file and import the Preact `h` function. The example shows a simple UIPlugin that renders the number of files in the Uppy state.

```jsx
/** @jsx h */
import { UIPlugin } from '@uppy/core';
import { h } from 'preact';

class NumFiles extends UIPlugin {
	render() {
		const numFiles = Object.keys(this.uppy.state.files).length;

		return <div>Number of files: {numFiles}</div>;
	}
}
```

--------------------------------

### Install @uppy/image-generator with Yarn

Source: https://uppy.io/docs/ai-image/

Install the plugin using Yarn, an alternative package manager.

```shell
yarn add @uppy/image-generator
```

--------------------------------

### Set up Uppy with WebDAV and Dashboard

Source: https://uppy.io/docs/webdav/

Basic usage example for the WebDAV plugin. Imports Uppy, Dashboard, and WebDav, imports their CSS, and initializes Uppy with the Dashboard and WebDav plugins, specifying the Companion URL.

```javascript
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import WebDav from '@uppy/webdav';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';

new Uppy()
	.use(Dashboard, { inline: true, target: '#dashboard' })
	.use(WebDav, { companionUrl: 'https://your-companion.com' });
```

--------------------------------

### Install Uppy Transloadit packages (Vue)

Source: https://uppy.io/docs/guides/uppy-transloadit/

Install the core, dashboard, transloadit, and vue packages for the Vue integration.

```shell
npm install @uppy/core @uppy/dashboard @uppy/transloadit @uppy/vue
```

--------------------------------

### Clone and install Uppy repo

Source: https://uppy.io/docs/companion/

Commands to clone the Uppy repository and install dependencies using yarn, as the first step to run Companion locally.

```bash
git clone https://github.com/transloadit/uppy
cd uppy
yarn install
```

--------------------------------

### WebDav Plugin Usage

Source: https://uppy.io/docs/webdav/

Example of how to initialize Uppy with the WebDAV plugin, including required imports and CSS.

```APIDOC
## WebDav Plugin Usage

### Description
Example of how to initialize Uppy with the WebDAV plugin, including required imports and CSS.

### Code Example
```js
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import WebDav from '@uppy/webdav';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';

new Uppy()
	.use(Dashboard, { inline: true, target: '#dashboard' })
	.use(WebDav, { companionUrl: 'https://your-companion.com' });
```
```

--------------------------------

### Install @uppy/xhr-upload via Yarn

Source: https://uppy.io/docs/xhr-upload/

Use this command to install the @uppy/xhr-upload plugin via Yarn.

```shell
yarn add @uppy/xhr-upload
```

--------------------------------

### Install @uppy/form via NPM

Source: https://uppy.io/docs/form/

Install the @uppy/form plugin using npm.

```shell
npm install @uppy/form
```

--------------------------------

### Install ImageEditor with yarn

Source: https://uppy.io/docs/image-editor/

Install the required Uppy packages using yarn.

```shell
yarn add @uppy/core @uppy/dashboard @uppy/image-editor
```

--------------------------------

### Install via CDN

Source: https://uppy.io/docs/progress-bar/

Use the @uppy/progress-bar plugin via CDN with a script tag.

```APIDOC
## Install via CDN

### Description
Use the @uppy/progress-bar plugin via CDN with a script tag.

### HTML
```html
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v5.2.1/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, ProgressBar } from "https://releases.transloadit.com/uppy/v5.2.1/uppy.min.mjs"
  const uppy = new Uppy()
  uppy.use(ProgressBar, { target: '#progress-bar' })
</script>
```
```

--------------------------------

### CDN setup for @uppy/remote-sources

Source: https://uppy.io/docs/remote-sources/

Add Uppy CSS and initialize RemoteSources via CDN. Note: the bundle includes most Uppy plugins, so it's not recommended for production.

```html
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v5.2.1/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { RemoteSources } from "https://releases.transloadit.com/uppy/v5.2.1/uppy.min.mjs"
  const RemoteSources = new Uppy().use(RemoteSources)
</script>
```

--------------------------------

### Install @uppy/aws-s3 with Yarn

Source: https://uppy.io/docs/aws-s3/

Use Yarn to install the @uppy/aws-s3 plugin.

```shell
yarn add @uppy/aws-s3
```

--------------------------------

### UIPlugin constructor example

Source: https://uppy.io/docs/uppy/

Shows how to define a plugin class extending UIPlugin, passing options to super. The options are also passed to the underlying BasePlugin.

```javascript
class MyPlugin extends UIPlugin {
	constructor(uppy, opts) {
		super(uppy, opts);
	}
}
```

--------------------------------

### Install @uppy/golden-retriever with npm

Source: https://uppy.io/docs/golden-retriever/

Install the Golden Retriever plugin using npm.

```shell
npm install @uppy/golden-retriever
```

--------------------------------

### Install @uppy/react with yarn

Source: https://uppy.io/docs/react/

Install the @uppy/react package using yarn. You may also need to install peer dependencies, such as @uppy/dashboard.

```shell
yarn add @uppy/react
```

--------------------------------

### Remove pre-processor in uninstall()

Source: https://uppy.io/docs/uppy/

Example of using uninstall() to remove a pre-processor, uploader, or post-processor.

```javascript
uninstall () {
  this.uppy.removePreProcessor(this.prepareUpload)
}
```

--------------------------------

### Install Uppy packages with yarn

Source: https://uppy.io/docs/nextjs/

Install the core, dashboard, and React packages for Uppy using yarn.

```shell
yarn add @uppy/core @uppy/dashboard @uppy/react
```

--------------------------------

### Install @uppy/unsplash with Yarn

Source: https://uppy.io/docs/unsplash/

Install the @uppy/unsplash plugin using Yarn, an alternative package manager.

```shell
yarn add @uppy/unsplash
```

--------------------------------

### Install Uppy packages

Source: https://uppy.io/docs/reactrouter/

Install the required Uppy packages for using the Dashboard and React components.

```shell
npm install @uppy/core @uppy/dashboard @uppy/react
```

--------------------------------

### Install polyfills with Yarn

Source: https://uppy.io/docs/guides/browser-support/

Install the required polyfills for IE11 support using Yarn.

```shell
yarn add core-js whatwg-fetch abortcontroller-polyfill md-gum-polyfill resize-observer-polyfill
```

--------------------------------

### Install @uppy/vue with yarn

Source: https://uppy.io/docs/vue/

Install the @uppy/vue package using yarn. You also need to install the UI plugin you want to use, such as @uppy/dashboard.

```shell
yarn add @uppy/vue
```

--------------------------------

### Use ScreenCapture with Uppy and Dashboard

Source: https://uppy.io/docs/screen-capture/

Import and initialize Uppy with the Dashboard and ScreenCapture plugins. Requires installing @uppy/core, @uppy/dashboard, and @uppy/screen-capture, and importing their CSS files.

```javascript
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import ScreenCapture from '@uppy/screen-capture';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';
import '@uppy/screen-capture/css/style.min.css';

new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(ScreenCapture);
```

--------------------------------

### Install @uppy/dropbox with Yarn

Source: https://uppy.io/docs/dropbox/

Install the Dropbox plugin via Yarn. Alternative to npm for package management.

```shell
yarn add @uppy/dropbox
```

--------------------------------

### Use ProgressBar

Source: https://uppy.io/docs/progress-bar/

Example of using the ProgressBar plugin with Uppy.

```APIDOC
## Use ProgressBar

### Description
Example of using the ProgressBar plugin with Uppy.

### JavaScript
```js
import Uppy from '@uppy/core';
import ProgressBar from '@uppy/progress-bar';

import '@uppy/core/css/style.min.css';
import '@uppy/progress-bar/css/style.min.css';

new Uppy().use(ProgressBar, { target: '#progress-bar' });
```
```

--------------------------------

### Install @uppy/companion in a Node.js project

Source: https://uppy.io/docs/companion/

Installs @uppy/companion as a dependency for Express middleware mode.

```bash
npm install @uppy/companion
```

--------------------------------

### Install Uppy packages with npm

Source: https://uppy.io/docs/sveltekit/

Install the required Uppy packages: @uppy/core, @uppy/dashboard, and @uppy/svelte.

```shell
npm install @uppy/core @uppy/dashboard @uppy/svelte
```

--------------------------------

### CDN setup for @uppy/drag-drop

Source: https://uppy.io/docs/drag-drop/

Add the Uppy CSS and initialize the DragDrop plugin using the CDN bundle. Note: the bundle includes most plugins and is not recommended for production.

```html
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v5.2.1/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v5.2.1/uppy.min.mjs"
  const uppy = new Uppy()
  uppy.use(DragDrop, { target: '#uppy' })
</script>
```

--------------------------------

### Create a new Uppy instance

Source: https://uppy.io/docs/uppy/

Imports Uppy from '@uppy/core' and creates a new instance with default options. This is the basic setup for using Uppy.

```javascript
import Uppy from '@uppy/core';

const uppy = new Uppy();
```

--------------------------------

### Install @uppy/angular with yarn

Source: https://uppy.io/docs/angular/

Install the @uppy/angular package using yarn. Requires also installing the UI plugin you want to use, such as @uppy/dashboard.

```shell
yarn add @uppy/angular
```

--------------------------------

### Install Companion globally (standalone)

Source: https://uppy.io/docs/companion/

Installs @uppy/companion globally via npm for standalone mode. Requires Node.js >=22.0.0.

```bash
npm install -g @uppy/companion
```

--------------------------------

### Install @uppy/dropbox with npm

Source: https://uppy.io/docs/dropbox/

Install the Dropbox plugin via npm. Use this in a Node.js or bundler-based project.

```shell
npm install @uppy/dropbox
```

--------------------------------

### Set up Uppy Webcam with Dashboard

Source: https://uppy.io/docs/webcam/

Import Uppy, Dashboard, and Webcam plugins along with their CSS, then initialize Uppy with the Dashboard inline and add the Webcam plugin. Requires HTTPS in Chrome except on localhost.

```javascript
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Webcam from '@uppy/webcam';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';
import '@uppy/webcam/css/style.min.css';

new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Webcam);
```

--------------------------------

### providerOptions JSON example

Source: https://uppy.io/docs/companion/

Example of the providerOptions object structure with a drive provider key and secret. When using the standalone version, use environment variables or secret files like COMPANION_GOOGLE_SECRET_FILE.

```json
{
	"drive": {
		"key": "***",
		"secret": "***"
	}
}
```

--------------------------------

### Use @uppy/url in Uppy

Source: https://uppy.io/docs/url/

Basic setup for the URL plugin in Uppy, importing required modules and CSS, and initializing Uppy with Dashboard and Url plugins.

```javascript
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Url from '@uppy/url';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';
import '@uppy/url/css/style.min.css';

new Uppy()
	.use(Dashboard, { inline: true, target: '#dashboard' })
	.use(Url, { companionUrl: 'https://your-companion.com' });
```

--------------------------------

### Install ImageEditor with npm

Source: https://uppy.io/docs/image-editor/

Install the required Uppy packages (@uppy/core, @uppy/dashboard, @uppy/image-editor) using npm.

```shell
npm install @uppy/core @uppy/dashboard @uppy/image-editor
```

--------------------------------

### Install and use StatusBar with Uppy

Source: https://uppy.io/docs/status-bar/

Import Uppy and StatusBar, include their CSS, and initialize Uppy with the StatusBar plugin targeting a DOM element with id 'status-bar'.

```javascript
import Uppy from '@uppy/core';
import StatusBar from '@uppy/status-bar';

import '@uppy/core/css/style.min.css';
import '@uppy/status-bar/css/style.min.css';

new Uppy().use(StatusBar, { target: '#status-bar' });
```

--------------------------------

### Set required environment variables for standalone Companion

Source: https://uppy.io/docs/companion/

Sets the minimum environment variables needed to start standalone Companion: COMPANION_SECRET, COMPANION_DOMAIN, and COMPANION_DATADIR.

```bash
export COMPANION_SECRET="shh!Issa Secret!"
export COMPANION_DOMAIN="YOUR SERVER DOMAIN"
export COMPANION_DATADIR="PATH/TO/DOWNLOAD/DIRECTORY"
```

--------------------------------

### Listen to file-editor:start event

Source: https://uppy.io/docs/image-editor/

Emitted when selectFile(file) is called. Use this event to react when the editor starts for a file.

```javascript
uppy.on('file-editor:start', (file) => {
	console.log(file);
});
```

--------------------------------

### Use FileInput Plugin

Source: https://uppy.io/docs/file-input/

Example of how to initialize Uppy with the FileInput plugin, targeting a DOM element.

```APIDOC
## Use FileInput Plugin

### Description
Initialize Uppy with the FileInput plugin, targeting a DOM element.

### Method
N/A (JavaScript initialization)

### Endpoint
N/A

### Parameters
None

### Request Example
```js
import Uppy from '@uppy/core';
import FileInput from '@uppy/file-input';

import '@uppy/core/css/style.min.css';
import '@uppy/file-input/css/style.css';

new Uppy().use(FileInput, { target: '#uppy-file-input' });
```

### Response
No response.
```

--------------------------------

### Show notification with uppy.info

Source: https://uppy.io/docs/informer/

Example from the compressor plugin showing how to display a notification using uppy.info.

```js
const size = prettierBytes(totalCompressedSize);
this.uppy.info(this.i18n('compressedX', { size }), 'info');
```

--------------------------------

### upload()

Source: https://uppy.io/docs/uppy/

Starts uploading added files and returns a Promise that resolves with an object containing successful and failed uploads.

```APIDOC
## upload()

### Description
Start uploading added files. Returns a Promise that resolves with an object containing two arrays of uploaded files: `result.successful` (files uploaded successfully) and `result.failed` (files that did not upload successfully, each with an `.error` property).

### Method
upload

### Parameters
None

### Request Example
```js
uppy.upload().then((result) => {
	console.info('Successful uploads:', result.successful);

	if (result.failed.length > 0) {
		console.error('Errors:');
		result.failed.forEach((file) => {
			console.error(file.error);
		});
	}
});
```

### Response
Returns a Promise that resolves with an object containing:
- `result.successful` - Array of files that were uploaded successfully.
- `result.failed` - Array of files that did not upload successfully. Each failed file has an `.error` property describing what went wrong.
```

--------------------------------

### Before: Importing Dashboard and StatusBar from @uppy/react

Source: https://uppy.io/docs/guides/migration-guides/

Old import style that forced installation of all peer dependencies even if only some components were used.

```javascript
import { Dashboard, StatusBar } from '@uppy/react';
```

--------------------------------

### Set up @uppy/aws-s3 via CDN

Source: https://uppy.io/docs/aws-s3/

Load Uppy and AwsS3 from the CDN. The bundle includes most plugins, so it is not recommended for production. Add CSS to the head, initialize with a div, and use the module script.

```html
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v5.2.1/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, AwsS3 } from "https://releases.transloadit.com/uppy/v5.2.1/uppy.min.mjs"
  new Uppy().use(AwsS3, { /* see options */ })
</script>
```

--------------------------------

### Import polyfills and export Uppy core

Source: https://uppy.io/docs/guides/browser-support/

Import the polyfills in the correct order and set up ResizeObserver. The comment notes that AbortController needs fetch which needs Promise (provided by core-js). Then re-export Uppy core.

```js
import 'core-js';
import 'whatwg-fetch';
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch';
// Order matters: AbortController needs fetch which needs Promise (provided by core-js).

import 'md-gum-polyfill';
import ResizeObserver from 'resize-observer-polyfill';

window.ResizeObserver ??= ResizeObserver;

export { default } from '@uppy/core';
export * from '@uppy/core';
```

--------------------------------

### Install @uppy/golden-retriever with yarn

Source: https://uppy.io/docs/golden-retriever/

Install the Golden Retriever plugin using yarn.

```shell
yarn add @uppy/golden-retriever
```

--------------------------------

### Basic Uppy Dashboard setup with inline mode

Source: https://uppy.io/docs/dashboard/

Import Uppy and the Dashboard plugin, include required CSS, and initialize Uppy with the Dashboard in inline mode targeting an element with id 'uppy-dashboard'.

```javascript
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';

new Uppy().use(Dashboard, { inline: true, target: '#uppy-dashboard' });
```
Tokens:
Raw