Skip to main content

Angular

Angular components for Uppy UI plugins.

When should I use it?​

When you are using the Angular framework and you would like to use one of the UI components.

Install​

npm install @uppy/angular

@uppy/angular supports Angular 17, 18, 19, 20, 21 and 22.

note

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

To send files to Transloadit, follow the canonical Angular + Uppy + Transloadit guide. It includes the required server-side signing boundary.

Use​

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:

  • Import UppyAngularDashboardModule used as <uppy-dashboard> renders @uppy/dashboard
  • Import UppyAngularDashboardModalModule used as <uppy-dashboard-modal> renders @uppy/dashboard as a modal
  • Import UppyAngularStatusBarModule used as <uppy-status-bar> renders @uppy/status-bar
note

UppyAngularDragDropModule and UppyAngularProgressBarModule were removed in Uppy 5.0. The @uppy/drag-drop plugin is still supported and can be used directly with uppy.use(DragDrop, { target }).

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

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>

You should initialize Uppy as a property of your component.

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 });
}

CSS​

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:

import { Component, ViewEncapsulation } from '@angular/core';
//...
@Component({
  // ...
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    '../node_modules/@uppy/core/css/style.css',
    '../node_modules/@uppy/dashboard/css/style.css',
  ],
})