Angular Quickstart

@upupjs/angular is a native Angular 19+ port of the canonical upup React UI — DOM-identical to it — with cloud-drive sources, resumable uploads, theming, and ICU i18n. This page gets you uploading in client mode, no server package required.

Requires Angular 19+ (@angular/core, @angular/common, and rxjs are peer dependencies).

Install

npm i @upupjs/angular

Minimal example (client mode)

UpupUploaderComponent is a standalone component (selector upup-uploader). Add it to a standalone component's imports (or an NgModule's imports). It takes a single config input. In client mode the browser uploads directly to your storage; your app only issues short-lived upload credentials at uploadEndpoint.

import { Component } from '@angular/core'
import { UpupUploaderComponent } from '@upupjs/angular'

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [UpupUploaderComponent],
    template: `<upup-uploader
        [config]="{ provider: 'aws', uploadEndpoint: '/api/upload-token' }"
    />`,
})
export class AppComponent {}

Load the stylesheet once globally — add @upupjs/angular/styles to the styles array in angular.json, or @import '@upupjs/angular/styles'; in your global styles.css.

See Code Examples for a ready-to-copy presign handler.

Choose sources and cloud drives

Everything is passed through the single config input. Add sources to pick which tabs appear and cloudDrives to enable the cloud providers (client IDs come from each provider's developer console):

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [UpupUploaderComponent],
    template: `<upup-uploader [config]="config" />`,
})
export class AppComponent {
    config = {
        provider: 'aws',
        uploadEndpoint: '/api/upload-token',
        sources: [
            'local',
            'camera',
            'screen',
            'url',
            'googleDrive',
            'oneDrive',
        ],
        cloudDrives: {
            googleDrive: { clientId: '...', apiKey: '...', appId: '...' },
            oneDrive: { clientId: '...' },
        },
    }
}

Add server mode

For credential isolation and server-proxied cloud drives, add @upupjs/server and set the mode:

<upup-uploader
    [config]="{ mode: 'server', serverUrl: '/api/upup', provider: 'aws' }"
/>

The handler requires an uploadTokenSecret of at least 16 characters — createUpupHandler throws at construction time if it is missing or too short:

import { createUpupHandler } from '@upupjs/server'

export const handler = createUpupHandler({
    storage: {
        type: 'aws',
        bucket: process.env.S3_BUCKET!,
        region: process.env.S3_REGION!,
    },
    uploadTokenSecret: process.env.UPUP_UPLOAD_TOKEN_SECRET, // required, >= 16 chars
})

See Server Mode — Setup for the full walkthrough: adapters for Next.js, Express, Fastify, and Hono; auth and user binding; and production token stores.

What you get

• Cloud drives — Google Drive, OneDrive, Dropbox, and Box, browsed in-panel.
• Camera and screen capture sources.
• Link import — add files by URL.
• Resumable uploads — optional tus or S3 multipart for large files.
• ICU i18n — locale bundles with pluralization and per-key overrides.
• Theming — design tokens, slots, and dark mode.

The image editor is React/Preact-only and is intentionally stubbed in Angular; every other capability above is fully native.

Also exported

UpupStore and the createUpupUpload / toSignalStore helpers for driving the uploader from your own Angular state, plus the FileSource, StorageProvider, and UploadStatus enums.