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
note

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

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 UppyAngularProgressBarModule used as <uppy-progress-bar> renders @uppy/progress-bar
  • Import UppyAngularStatusBarModule used as <uppy-status-bar> renders @uppy/status-bar
  • Import UppyAngularDragDropModule used as <uppy-drag-drop> renders @uppy/drag-drop

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/dist/style.css',
    '../node_modules/@uppy/dashboard/dist/style.css',
  ],
})