Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.

Angular

Uppy provides Angular components for the included UI plugins.

Installation

All Angular components are provided through the @uppy/angular package

Install from NPM:

npm install @uppy/angular
# Or with yarn
yarn add @uppy/angular

CSS

Make sure to also include the necessary CSS files for each Uppy Angular component you are using.

Usage

The components can be used with Angular.

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

// app.module.ts

import { NgModule } from '@angular/core'
import { UppyAngularDashboardModule } from '@uppy/angular'

import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    UppyAngularDashboardModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
class {}
<!--- app.component.html -->
<uppy-dashboard
  [uppy]='uppy'>
</uppy-dashboard>
// app.component.ts

import { Component } from '@angular/core'
import { Uppy } from '@uppy/core'

@Component({
  selector: 'app-root',
})
export class AppComponent {
  uppy: Uppy = new Uppy({ debug: true, autoProceed: true })
}

The following plugins are available as Angular component wrappers:

  • <uppy-dashboard /> - renders a @uppy/dashboard
  • <uppy-drag-drop /> - renders a @uppy/drag-drop area
  • <uppy-progress-bar /> - renders a @uppy/progress-bar
  • <uppy-status-bar /> - renders a @uppy/status-bar

Each component takes a props prop that will be passed to the UI Plugin.

Initializing Uppy

You should initialize Uppy as a property of your component.

import { Uppy } from '@uppy/core'

export class AppComponent {
  uppy: Uppy = new Uppy({ debug: true, autoProceed: true })
}

Components

<uppy-dashboard />

CSS

The UppyAngularDashboardModule component requires the following CSS for styling (added to your component decorator or to your angular.json). You can also provide your own styles if you prefer:

@Component({
  // Snip
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/dashboard/dist/style.css',
  ],
})
class {}

Import general Core styles from @uppy/core/dist/style.css first, then add the Dashboard styles from @uppy/dashboard/dist/style.css. A minified version is also available as style.min.css at the same path.

⚠️ The @uppy/dashboard plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as (@uppy/status-bar and @uppy/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.

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.

Props

The <uppy-dashboard /> component supports all @uppy/dashboard options to be passed as an object on the props prop. An Uppy instance must be provided in the [uppy]='' prop.

The <uppy-dashboard /> cannot be passed to a target: option of a remote provider or plugins such as @uppy/webcam. To use other plugins like @uppy/webcam with the <uppy-dashboard /> component, first add them to the Uppy instance, and then specify their id in the options you pass.

<uppy-dashboard-modal />

CSS

The UppyAngularDashboardModalModule component requires the following CSS for styling (added to your component decorator or to your angular.json). You can also provide your own styles if you prefer:

@Component({
  // Snip
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/dashboard/dist/style.css',
  ],
})
class{}

Import general Core styles from @uppy/core/dist/style.css first, then add the Dashboard styles from @uppy/dashboard/dist/style.css. A minified version is also available as style.min.css at the same path.

⚠️ The @uppy/dashboard plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as (@uppy/status-bar and @uppy/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.

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.

Props

The <uppy-dashboard-modal /> component supports all @uppy/dashboard options to be passed as an object on the props prop. An Uppy instance must be provided in the [uppy]='' prop. Additionally, it takes an [open]='' prop, telling it which state to display in

The <uppy-dashboard-modal /> cannot be passed to a target: option of a remote provider or plugins such as @uppy/webcam. To use other plugins like @uppy/webcam with the <uppy-dashboard-modal /> component, first add them to the Uppy instance, and then specify their id in the options you pass.

<uppy-drag-drop />

CSS

The UppyAngularDragDropModule component includes some basic styles, like shown in the example. You can also choose not to use it and provide your own styles instead:

@Component({
  // Snip
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/drag-drop/dist/style.css',
  ],
})
class{}

Import general Core styles from @uppy/core/dist/style.css first, then add the Drag & Drop styles from @uppy/drag-drop/dist/style.css. A minified version is also available as style.min.css at the same path.

Props

The <uppy-drag-drop /> component supports all @uppy/drag-drop options to be passed as an object on the props prop. An Uppy instance must be provided in the [uppy]='' prop.

<uppy-progress-bar />

CSS

The UppyAngularProgressBarModule plugin requires the following CSS for styling:

@Component({
  // Snip
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/progress-bar/dist/style.css',
  ],
})
class {}

Import general Core styles from @uppy/core/dist/style.css first, then add the Progress Bar styles from @uppy/progress-bar/dist/style.css. A minified version is also available as style.min.css at the same path. The way to do import depends on your build system.

Props

The <uppy-progress-bar /> component supports all @uppy/progress-bar options to be passed as an object on the props prop. An Uppy instance must be provided in the [uppy]='' prop.

<uppy-status-bar />

CSS

The UppyAngularStatusBar plugin requires the following CSS for styling:

@Component({
  // Snip
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/status-bar/dist/style.css',
  ],
})
class {}

Import general Core styles from @uppy/core/dist/style.css first, then add the Status Bar styles from @uppy/status-bar/dist/style.css. A minified version is also available as style.min.css at the same path. The way to do import depends on your build system.

Props

The <uppy-status-bar /> component supports all @uppy/status-bar options to be passed as an object on the props prop. An Uppy instance must be provided in the [uppy]='' prop.