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 wouldl like to use on 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:

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:

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