Docs

List & Common Options

Plugins are what makes Uppy useful: they help select, manipulate and upload files.

  • Local Sources:
    • @uppy/dashboard — full-featured sleek UI with file previews, metadata editing, upload/pause/resume/cancel buttons and more. Includes StatusBar and Informer plugins by default
    • @uppy/drag-drop — plain and simple drag-and-drop area
    • @uppy/file-input — even more plain and simple, just a button
    • @uppy/webcam — upload selfies or audio / video recordings
  • Remote Providers: (remote sources that work through Uppy Server)
  • Uploaders:
  • UI Elements:
  • Encoding Services:
  • Miscellaneous:
    • @uppy/form — collect metadata from <form> right before the Uppy upload, then optionally append results back to the form
    • @uppy/thumbnail-generator — generate preview thumbnails for images to be uploaded [documentation not yet available]
    • @uppy/golden-retriever — restore files and continue uploading after a page refresh or a browser crash

Common options

Each plugin can have any number of options (please see specific plugins for details), but these are shared between some:

id

A unique string identifying the plugin. By default, the plugin’s name is used, so usually it does not need to be configured manually. Use this if you need to add multiple plugins of the same type.

target

Can be a string CSS selector, a DOM element, or a Plugin class. Consider the following example, where DragDrop plugin will be rendered into a body element:

const Uppy = require('@uppy/core')
const DragDrop = require('@uppy/drag-drop')
const uppy = Uppy()
uppy.use(DragDrop, { target: 'body' })
// or: uppy.use(DragDrop, { target: document.body })

While in this one, we are using the @uppy/dashboard plugin, which can act as a host target for other plugins:

const Uppy = require('@uppy/core')
const Dashboard = require('@uppy/dashboard')
const GoogleDrive = require('@uppy/google-drive')
const uppy = Uppy()
uppy.use(Dashboard, {
  trigger: '#uppyModalOpener'
})
uppy.use(GoogleDrive, {target: Dashboard})

In the example above, the Dashboard gets rendered into an element with ID uppy, while GoogleDrive is rendered into the Dashboard itself.

locale: {}

Same as with Uppy.Core’s setting above, this allows you to override plugin’s locale string, so that instead of Select files in English, your users will see Выберите файлы in Russian. Example:

.use(FileInput, {
  target: 'body',
  locale: {
    strings: { selectToUpload: 'Выберите файл для загрузки' }
  }
})

See plugin documentation pages for other plugin-specific options.

Provider Plugins

See the Provider Plugins documentation page for information on provider plugins.

Caught a mistake or want to contribute to the documentation? Edit/fork this page directly on Github!