Angular Upload Widget

npm install angular-uploader uploader

yarn add angular-uploader uploader

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 {}

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: string | undefined = undefined;
27}

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}