Introduction

Uppy provides React components for the included UI plugins.

Installation

All React components are provided through the @uppy/react package.

Install from NPM:

npm install @uppy/react

CSS

Make sure to also include the necessary CSS files for each Uppy React component you are using. Follow links for individual components docs below for details on that.

Usage

The components can be used with either React or API-compatible alternatives such as Preact.

Instead of adding a UI plugin to an Uppy instance with .use(), the Uppy instance can be passed into components as an uppy prop.
All other props are passed as options to the plugin.

import React from 'react'
import Uppy from '@uppy/core'
import Tus from '@uppy/tus'
import { DragDrop } from '@uppy/react'

const uppy = new Uppy({
  meta: { type: 'avatar' },
  restrictions: { maxNumberOfFiles: 1 },
  autoProceed: true,
})

uppy.use(Tus, { endpoint: '/upload' })

uppy.on('complete', (result) => {
  const url = result.successful[0].uploadURL
  store.dispatch({
    type: 'SET_USER_AVATAR_URL',
    payload: { url },
  })
})

const AvatarPicker = ({ currentAvatar }) => {
  return (
    <div>
      <img src={currentAvatar} alt="Current Avatar" />
      <DragDrop
        uppy={uppy}
        locale={{
          strings: {
            // Text to show on the droppable area.
            // `%{browse}` is replaced with a link that opens the system file selection dialog.
            dropHereOr: 'Drop here or %{browse}',
            // Used as the label for the link that opens the system file selection dialog.
            browse: 'browse',
          },
        }}
      />
    </div>
  )
}

The following plugins are available as React component wrappers (you need to
install each package separately):

<Dashboard /> - renders an inline @uppy/dashboard.
<DashboardModal /> - renders a @uppy/dashboard modal.
<DragDrop /> - renders a @uppy/drag-drop area.
<ProgressBar /> - renders a @uppy/progress-bar.
<StatusBar /> - renders a @uppy/status-bar.

Docs

UI Elements

Sources

Destinations

Miscellaneous

React

Other Integrations

Contributing

Introduction

Installation

CSS

Usage