Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
File Processing
- Robodog Introduction
- Robodog File Picker
- Image Editor
- Robodog Form
- Robodog Upload
- Robodog Dashboard
- Transloadit
Miscellaneous
React
- Introduction
- Initializing Uppy
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
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.