# Angular Quickstart

`@useupup/angular` is a native Angular 19–22 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, 20, 21, or 22 (`@angular/core`, `@angular/common`,
`@angular/platform-browser`, and `rxjs` are peer dependencies).

## Install

```sh
npm i @useupup/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`.

```ts
import { Component } from '@angular/core'
import { UpupUploaderComponent } from '@useupup/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 `@useupup/angular/styles` to the `styles`
array in `angular.json`, or `@import '@useupup/angular/styles';` in your global
`styles.css`.

See [Code Examples](/docs/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):

```ts
@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
[`@useupup/server`](https://www.npmjs.com/package/@useupup/server) and set the mode:

```html
<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:

```ts
import { createUpupHandler } from '@useupup/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](/docs/guides/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.

## Coming from ng2-file-upload

Replacing `ng2-file-upload`? [upup vs ng2-file-upload](/docs/comparisons/upup-vs-ng2-file-upload/)
compares the two and maps its options to upup's `config`.

<PlaygroundCta />