Release 8.0.0

Author: ljwagerfield

README.md

@@ -77,14 +77,14 @@ export class AppModule {}
 
 ```typescript
 import { Component } from "@angular/core";
-import { Uploader, UploaderOptions, UploaderResult } from "uploader";
+import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader";
 
 @Component({
   selector: "app-root",
   template: `
     <button uploadButton 
-            [uploadComplete]="uploadComplete" 
-            [uploadOptions]="uploadOptions" 
+            [uploadComplete]="onComplete" 
+            [uploadOptions]="options" 
             [uploader]="uploader">
       Upload a file...
     </button>
@@ -94,11 +94,11 @@ export class AppComponent {
   uploader = new Uploader({ 
     apiKey: "free" // <-- Get production-ready API keys from Upload.io
   });
-  uploadOptions: UploaderOptions = {
+  options: UploadWidgetConfig = {
     multi: false
   };
-  uploadComplete = (files: UploaderResult[]) => {
-    console.log(files.map(x => x.fileUrl));
+  onComplete = (files: UploadWidgetResult[]) => {
+    alert(files.map(x => x.fileUrl).join("\n"));
   };
 }
 ```
@@ -150,20 +150,20 @@ The `uploadButton` directive displays a file upload modal on click.
 Inputs:
 
 - `uploader` (required): an instance of the [`Uploader` class](https://github.com/upload-io/uploader/blob/main/lib/src/Uploader.tsx).
-- `uploadOptions` (optional): an object following the [`UploaderOptions` interface](https://github.com/upload-io/uploader/blob/main/lib/src/UploaderOptions.ts).
+- `uploadOptions` (optional): an object following the [`UploadWidgetConfig` interface](https://github.com/upload-io/uploader/blob/main/lib/src/UploadWidgetConfig.ts).
 - `uploadComplete` (optional): a callback containing a single parameter — an array of uploaded files.
 
 ```typescript
 import { Component } from "@angular/core";
-import { Uploader, UploaderOptions, UploaderResult } from "uploader";
+import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader";
 
 @Component({
   selector: "app-root",
   template: `
     <button uploadButton 
             [uploader]="uploader"
-            [uploadOptions]="uploadOptions"
-            [uploadComplete]="uploadComplete">
+            [uploadOptions]="options"
+            [uploadComplete]="onComplete">
       Upload a file...
     </button>
   `
@@ -172,11 +172,11 @@ export class AppComponent {
   uploader = new Uploader({ 
     apiKey: "free" 
   });
-  uploadOptions: UploaderOptions = {
+  options: UploadWidgetConfig = {
     multi: false
   };
-  uploadComplete = (files: UploaderResult[]) => {
-    console.log(files.map(x => x.fileUrl));
+  onComplete = (files: UploadWidgetResult[]) => {
+    alert(files.map(x => x.fileUrl).join("\n"));
   };
 }
 ```
@@ -188,15 +188,15 @@ The `upload-dropzone` component renders an inline drag-and-drop file uploader.
 Inputs:
 
 - `uploader` (required): an instance of the [`Uploader` class](https://github.com/upload-io/uploader/blob/main/lib/src/Uploader.tsx).
-- `options` (optional): an object following the [`UploaderOptions` interface](https://github.com/upload-io/uploader/blob/main/lib/src/UploaderOptions.ts).
+- `options` (optional): an object following the [`UploadWidgetConfig` interface](https://github.com/upload-io/uploader/blob/main/lib/src/UploadWidgetConfig.ts).
 - `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.
 
 ```typescript
 import { Component } from "@angular/core";
-import { Uploader, UploaderOptions, UploaderResult } from "uploader";
+import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader";
 
 @Component({
   selector: "app-root",
@@ -213,16 +213,16 @@ export class AppComponent {
   uploader = new Uploader({ 
     apiKey: "free" 
   });
-  options: UploaderOptions = {
+  options: UploadWidgetConfig = {
     multi: false
   };
   // 'onUpdate' explained:
   // - Dropzones are non-terminal by default (i.e. they don't have an
   //   end state), so we use 'onUpdate' instead of 'onComplete'. 
   // - To create a terminal dropzone, add a 'onComplete' attribute
   //   to the component and add the 'showFinishButton: true' option.
-  onUpdate = (files: UploaderResult[]) => {
-    console.log(files.map(x => x.fileUrl));
+  onUpdate = (files: UploadWidgetResult[]) => {
+    alert(files.map(x => x.fileUrl).join("\n"));
   };
   width = "600px";
   height = "375px";
@@ -231,7 +231,7 @@ export class AppComponent {
 
 ## The Result
 
-The callbacks receive a `Array<UploaderResult>`:
+The callbacks receive a `Array<UploadWidgetResult>`:
 
 ```javascript
 {

package-lock.json

@@ -34,7 +34,7 @@
     "@angular/router": "~13.3.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "uploader": "^2.6.4",
+    "uploader": "^3.0.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

package.json

@@ -54,7 +54,7 @@
   "peerDependencies": {
     "@angular/common": "^13.3.0",
     "@angular/core": "^13.3.0",
-    "uploader": "^2.6.4"
+    "uploader": "^3.0.1"
   },
   "dependencies": {}
 }

projects/angular-uploader/package-lock.json

@@ -1,13 +1,13 @@
 import { Directive, HostListener, Input, OnInit } from "@angular/core";
-import { UploaderInterface, UploaderOptions, UploaderResult } from "uploader";
+import { UploaderInterface, UploadWidgetConfig, UploadWidgetResult } from "uploader";
 
 @Directive({
   selector: "[uploadButton]"
 })
 export class UploadButtonDirective implements OnInit {
-  @Input("uploadOptions") options?: UploaderOptions;
+  @Input("uploadOptions") options?: UploadWidgetConfig;
   @Input("uploader") uploader?: UploaderInterface;
-  @Input("uploadComplete") onComplete?: (files: UploaderResult[]) => void;
+  @Input("uploadComplete") onComplete?: (files: UploadWidgetResult[]) => void;
 
   @HostListener("click", ["$event"]) onClick(event: any) {
     event.preventDefault();

projects/angular-uploader/package.json

@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
-import { UploaderInterface, UploaderOptions, UploaderResult } from "uploader";
+import { UploaderInterface, UploadWidgetConfig, UploadWidgetResult } from "uploader";
 
 @Component({
   selector: "upload-dropzone",
@@ -9,17 +9,17 @@ import { UploaderInterface, UploaderOptions, UploaderResult } from "uploader";
   styles: []
 })
 export class UploadDropzoneComponent implements AfterViewInit {
-  @Input("options") options?: UploaderOptions;
+  @Input("options") options?: UploadWidgetConfig;
   @Input("uploader") uploader?: UploaderInterface;
-  @Input("onComplete") onComplete?: (files: UploaderResult[]) => void;
-  @Input("onUpdate") onUpdate?: (files: UploaderResult[]) => void;
+  @Input("onComplete") onComplete?: (files: UploadWidgetResult[]) => void;
+  @Input("onUpdate") onUpdate?: (files: UploadWidgetResult[]) => void;
   @Input("width") width: string = "600px";
   @Input("height") height: string = "375px";
 
   @ViewChild("container") container!: ElementRef;
 
   ngAfterViewInit() {
-    const onUpdateParams: UploaderOptions = this.onUpdate === undefined ? {} : { onUpdate: this.onUpdate };
+    const onUpdateParams: UploadWidgetConfig = this.onUpdate === undefined ? {} : { onUpdate: this.onUpdate };
 
     this.getUploader()
       .open({

projects/angular-uploader/src/lib/upload-button.directive.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { Uploader, UploaderOptions, UploaderResult } from "uploader";
+import { Uploader, UploadWidgetConfig, UploadWidgetResult } from "uploader";
 
 @Component({
   selector: "app-root",
@@ -21,10 +21,10 @@ import { Uploader, UploaderOptions, UploaderResult } from "uploader";
 })
 export class AppComponent {
   uploader = Uploader({ apiKey: "free" });
-  uploadComplete = (files: UploaderResult[]) => {
+  uploadComplete = (files: UploadWidgetResult[]) => {
     console.log(files.map(x => x.fileUrl));
   };
-  uploadOptions: UploaderOptions = {
+  uploadOptions: UploadWidgetConfig = {
     multi: false
   };
 }