TypeScript icon, indicating that this package has built-in type declarations

8.41.1Β β€’Β PublicΒ β€’Β Published

Migrated to: @bytescale/upload-widget-angular

Angular File Upload Widget
(With Integrated Cloud Storage)

Twitter URL

Get Started β€” Try on StackBlitz

Upload Widget Demo

100% Serverless File Upload Widget
Powered by Bytescale

DMCA Compliant β€’ GDPR Compliant β€’ 99.9% Uptime SLA
Supports: Rate Limiting, Volume Limiting, File Size & Type Limiting, JWT Auth, and more...


Install via NPM:

npm install angular-uploader uploader

Or via YARN:

yarn add angular-uploader uploader


Add the UploaderModule to your app:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { UploaderModule } from "angular-uploader";

import { AppComponent } from "./app.component";

  declarations: [AppComponent],
  imports: [
    UploaderModule // <-- Add the Uploader module here.
  bootstrap: [AppComponent]
export class AppModule {}

Components & Directives

Choose one of these options:

Option 1: Create an Upload Button β€” Try on StackBlitz

The uploadButton directive displays a file upload modal on click.


  • uploader (required): an instance of the Uploader class.
  • uploadOptions (optional): an object following the UploadWidgetConfig interface.
  • uploadComplete (optional): a callback containing a single parameter β€” an array of uploaded files.
import { Component } from '@angular/core';
import { Uploader, UploadWidgetConfig, UploadWidgetResult } from 'uploader';

  selector: 'app-root',
  template: `
    <a href="{{ uploadedFileUrl }}" target="_blank">{{ uploadedFileUrl }}</a>
      Upload a file...
export class AppComponent {
  uploader = Uploader({
    apiKey: 'free', // <-- Get production-ready API keys from Bytescale
  options: UploadWidgetConfig = {
    multi: false,
  onComplete = (files: UploadWidgetResult[]) => {
    this.uploadedFileUrl = files[0]?.fileUrl;
  uploadedFileUrl = undefined;

Option 2: Create a Dropzone β€” Try on StackBlitz

The upload-dropzone component renders an inline drag-and-drop file uploader.


  • uploader (required): an instance of the Uploader class.
  • options (optional): an object following the UploadWidgetConfig interface.
  • onComplete (optional): a callback containing the array of uploaded files as its parameter.
  • onUpdate (optional): same as above, but called after every file upload or removal.
  • width (optional): width of the dropzone.
  • height (optional): height of the dropzone.
import { Component } from "@angular/core";
import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader";

  selector: "app-root",
  template: `
    <upload-dropzone [uploader]="uploader" 
export class AppComponent {
  uploader = Uploader({ 
    apiKey: "free" 
  options: UploadWidgetConfig = {
    multi: false
  // 'onUpdate' vs 'onComplete' attrs on 'upload-dropzone':
  // - Dropzones are non-terminal by default (they don't have an end
  //   state), so by default we use 'onUpdate' instead of 'onComplete'.
  // - To create a terminal dropzone, use the 'onComplete' attribute
  //   instead and add the 'showFinishButton: true' option.
  onUpdate = (files: UploadWidgetResult[]) => {
    alert( => x.fileUrl).join("\n"));
  width = "600px";
  height = "375px";

The Result

The callbacks receive a Array<UploadWidgetResult>:

  fileUrl: "",   // URL to use when serving this file.
  filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).
  editedFile: undefined,                 // Edited file (for image crops). Same structure as below.

  originalFile: {
    fileUrl: "", // Uploaded file URL.
    filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
    accountId: "FW251aX",                // Bytescale account the file was uploaded to.
    originalFileName: "example.jpg",     // Original file name from the user's machine.
    file: { ... },                       // Original DOM file object from the <input> element.
    size: 12345,                         // File size in bytes.
    lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
    mime: "image/jpeg",                  // File MIME type.
    metadata: {
      ...                                // User-provided JSON object.
    tags: [
      "tag1",                            // User-provided & auto-generated tags.

🌐 API Support

🌐 File Management API

Bytescale provides an Upload API, which supports the following:

  • File uploading.
  • File listing.
  • File deleting.
  • And more...

Uploading a "Hello World" text file is as simple as:

curl --data "Hello World" \
     -u apikey:free \
     -X POST ""

Note: Remember to set -H "Content-Type: mime/type" when uploading other file types!

Read the Upload API docs Β»

🌐 Image Processing API (Resize, Crop, etc.)

Bytescale also provides an Image Processing API, which supports the following:

Read the Image Processing API docs Β»

Original Image

Here's an example using a photo of Chicago:

Processed Image

Using the Image Processing API, you can produce this image:

Full Documentation

Uploader Documentation Β»

Need a Headless (no UI) File Upload Library?

Try Upload.js Β»

Can I use my own storage?

Yes: Bytescale supports AWS S3, Cloudflare R2, Google Storage, and DigitalOcean Spaces.

To configure a custom storage backend, please see:

πŸ‘‹ Create your Bytescale Account

Angular Uploader is the Angular Upload Widget for Bytescale: the best way to serve images, videos, and audio for web apps.

Create a Bytescale account Β»

Building From Source



Package Sidebar


npm i angular-uploader

Weekly Downloads






Unpacked Size

75.5 kB

Total Files


Last publish


  • upload-io