Skip to main content


Angular components for Uppy UI plugins.

When should I use it?

When you are using the Angular framework and you wouldl like to use on of the UI components.


npm install @uppy/angular

You also need to install the UI plugin you want to use. For instance, @uppy/dashboard.


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

The following plugins are available as Angular component wrappers:

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

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

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

declarations: [AppComponent],
imports: [BrowserModule, UppyAngularDashboardModule],
providers: [],
bootstrap: [AppComponent],
class {}
<uppy-dashboard [uppy]="uppy"> </uppy-dashboard>

You should initialize Uppy as a property of your component.

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

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


All components have their own styling and should be added to your component decorator. You can find the CSS import statements in the docs of the UI plugin you want to use. For instance, for @uppy/dashboard:

// ...
styleUrls: [