Data Types

Angular Upload Widget

To install the Angular Upload Widget via NPM:

npm install angular-uploader uploader

To install via YARN:

yarn add angular-uploader uploader

To import the module in your Angular 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 {}

Option 1: Create an Upload Button

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({ apiKey: "free" }); // Replace "free" with your API key.
20 options: UploadWidgetConfig = {
21 multi: true
22 };
23 onComplete = (files: UploadWidgetResult[]) => {
24 this.uploadedFileUrl = files[0]?.fileUrl;
25 };
26 uploadedFileUrl = undefined;
27}

Options: UploadWidgetConfig, e.g. { multi: true }

Callback Parameter: UploadWidgetResult

Live preview:

Option 2: Create a 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({ apiKey: "free" }); // Replace "free" with your API key.
17 options: UploadWidgetConfig = {
18 multi: true
19 };
20 // 'onUpdate' vs 'onComplete' attrs on 'upload-dropzone':
21 // - Dropzones are non-terminal by default (they don't have an end
22 // state), so by default we use 'onUpdate' instead of 'onComplete'.
23 // - To create a terminal dropzone, use the 'onComplete' attribute
24 // instead and add the 'showFinishButton: true' option.
25 onUpdate = (files: UploadWidgetResult[]) => {
26 alert(files.map(x => x.fileUrl).join("\n"));
27 };
28 width = "600px";
29 height = "375px";
30}

Options: UploadWidgetConfig, e.g. { multi: true }

Callback Parameter: UploadWidgetResult

Live preview:

Was this section helpful? Yes No

You are using an outdated browser.

This website requires a modern web browser -- the latest versions of these browsers are supported: