Angular File Uploader

One core, every framework

1. 1

   Step 1: Install the package

   One package, @useupup/angular, brings the UI and the upload engine. pnpm, Yarn and Bun work the same way.

   Terminal

   npm i @useupup/angular

2. 2

   Step 2: Render the uploader

   Add it with its stylesheet and point it at your upload endpoint: a route that returns a short-lived presigned URL for each file. The code examples include a ready-made handler.

   app.component.ts

   import { Component } from '@angular/core'
   import { UpupUploaderComponent } from '@useupup/angular'
   // Load styles once: add '@useupup/angular/styles' to angular.json → "styles"
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [UpupUploaderComponent],
     template: `<upup-uploader
       [config]="{ provider: 'aws', uploadEndpoint: '/api/upload-token' }"
     />`,
   })
   export class AppComponent {}

3. 3

   Step 3: Add cloud drives and sources

   List the sources you want and add the client IDs from each provider's developer console. Google Drive, OneDrive, Dropbox and Box are browsed inside the uploader panel.

   app.component.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', 'googleDrive', 'oneDrive'],
       cloudDrives: {
         googleDrive: { clientId: '...', apiKey: '...', appId: '...' },
         oneDrive: { clientId: '...' },
       },
     }
   }

• Drag-and-drop dropzone, file picker, previews and progress
• Google Drive, OneDrive, Dropbox and Box imports
• Camera, screen capture and link imports
• Resumable uploads with tus or S3 multipart
• Presigned uploads to S3, R2, MinIO and other S3-compatible storage
• Server mode with an HMAC-signed trust model (@useupup/server)
• ICU i18n, theming and dark mode
• MIT license, no license key

For resumable uploads, direct-to-S3 and image editing side by side, see Angular file upload libraries compared.

Keep reading

• Angular quickstart
• UpupUploader props reference
• Server mode setup with @useupup/server
• Upload to AWS S3
• Upload to Cloudflare R2
• Upload to MinIO
• Upload to Azure Blob Storage
• Resumable uploads
• Localization and i18n
• Events and callbacks reference
• upup vs Uppy
• upup vs FilePond