Migrated to: @bytescale/upload-widget-angular

Angular File Upload Widget
(With Integrated Cloud Storage)

Get Started — Try on StackBlitz

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...

---

Installation

Install via NPM:

1npm install angular-uploader uploader

Or via YARN:

1yarn add angular-uploader uploader

Initialization

Add the UploaderModule to your app:

1import { NgModule } from "@angular/core";
2import { BrowserModule } from "@angular/platform-browser";
3import { UploaderModule } from "angular-uploader";
4
5import { AppComponent } from "./app.component";
6
7@NgModule({
8  declarations: [AppComponent],
9  imports: [
10    BrowserModule, 
11    UploaderModule // <-- Add the Uploader module here.
12  ],
13  bootstrap: [AppComponent]
14})
15export 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.

Inputs:

• 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.

1import { Component } from '@angular/core';
2import { Uploader, UploadWidgetConfig, UploadWidgetResult } from 'uploader';
3
4@Component({
5  selector: 'app-root',
6  template: `
7    <a href="{{ uploadedFileUrl }}" target="_blank">{{ uploadedFileUrl }}</a>
8    <button
9      uploadButton
10      [uploadComplete]="onComplete"
11      [uploadOptions]="options"
12      [uploader]="uploader"
13    >
14      Upload a file...
15    </button>
16  `,
17})
18export class AppComponent {
19  uploader = Uploader({
20    apiKey: 'free', // <-- Get production-ready API keys from Bytescale
21  });
22  options: UploadWidgetConfig = {
23    multi: false,
24  };
25  onComplete = (files: UploadWidgetResult[]) => {
26    this.uploadedFileUrl = files[0]?.fileUrl;
27  };
28  uploadedFileUrl = undefined;
29}

Option 2: Create a Dropzone — Try on StackBlitz

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

Inputs:

• 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.

1import { Component } from "@angular/core";
2import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader";
3
4@Component({
5  selector: "app-root",
6  template: `
7    <upload-dropzone [uploader]="uploader" 
8                     [options]="options"
9                     [onUpdate]="onUpdate"
10                     [width]="width"
11                     [height]="height"> 
12    </upload-dropzone>
13  `
14})
15export class AppComponent {
16  uploader = Uploader({ 
17    apiKey: "free" 
18  });
19  options: UploadWidgetConfig = {
20    multi: false
21  };
22  // 'onUpdate' vs 'onComplete' attrs on 'upload-dropzone':
23  // - Dropzones are non-terminal by default (they don't have an end
24  //   state), so by default we use 'onUpdate' instead of 'onComplete'.
25  // - To create a terminal dropzone, use the 'onComplete' attribute
26  //   instead and add the 'showFinishButton: true' option.
27  onUpdate = (files: UploadWidgetResult[]) => {
28    alert(files.map(x => x.fileUrl).join("\n"));
29  };
30  width = "600px";
31  height = "375px";
32}

The Result

The callbacks receive a Array<UploadWidgetResult>:

1{
2  fileUrl: "https://upcdn.io/FW25...",   // URL to use when serving this file.
3  filePath: "/uploads/example.jpg",      // File path (we recommend saving this to your database).
4    
5  editedFile: undefined,                 // Edited file (for image crops). Same structure as below.
6
7  originalFile: {
8    fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
9    filePath: "/uploads/example.jpg",    // Uploaded file path (relative to your raw file directory).
10    accountId: "FW251aX",                // Bytescale account the file was uploaded to.
11    originalFileName: "example.jpg",     // Original file name from the user's machine.
12    file: { ... },                       // Original DOM file object from the <input> element.
13    size: 12345,                         // File size in bytes.
14    lastModified: 1663410542397,         // Epoch timestamp of when the file was uploaded or updated.
15    mime: "image/jpeg",                  // File MIME type.
16    metadata: {
17      ...                                // User-provided JSON object.
18    },
19    tags: [
20      "tag1",                            // User-provided & auto-generated tags.
21      "tag2",
22      ...
23    ]
24  }
25}

🌐 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:

1curl --data "Hello World" \
2     -u apikey:free \
3     -X POST "https://api.bytescale.com/v1/files/basic"

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:

• Image Resizing
• Image Cropping
• Image Compression
• Image Conversion
• Image Manipulation (blur, sharpen, brightness, etc.)
• Layering (e.g for text & image watermarks)
• and more...

Read the Image Processing API docs »

Original Image

Here's an example using a photo of Chicago:

https://upcdn.io/W142hJk/raw/example/city-landscape.jpg

Processed Image

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

https://upcdn.io/W142hJk/image/example/city-landscape.jpg
  ?w=900
  &h=600
  &fit=crop
  &f=webp
  &q=80
  &blur=4
  &text=WATERMARK
  &layer-opacity=80
  &blend=overlay
  &layer-rotate=315
  &font-size=100
  &padding=10
  &font-weight=900
  &color=ffffff
  &repeat=true
  &text=Chicago
  &gravity=bottom
  &padding-x=50
  &padding-bottom=20
  &font=/example/fonts/Lobster.ttf
  &color=ffe400

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:

https://www.bytescale.com/docs/storage/sources

👋 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

BUILD.md

License

MIT