Add "pendingFiles" and "uploadedFiles" to OnUpdate callback

MIGRATE.md

@@ -8,8 +8,9 @@ Steps:
 2. Uninstall `angular-uploader` and `uploader`
 3. Replace `"angular-uploader"` with `"@bytescale/upload-widget-angular"` in your `import` statements.
 4. Replace `uploader` with `upload-widget` in all CSS class name overrides (if you have any).
-5. Remove `uploader` (from imports and props)
-6. Add `apiKey` as a field to the object passed to the `options` prop (add it if you don't have one).
+5. Replace `onUpdate: (files) => {}` with `onUpdate: ({uploadedFiles}) => {}`.
+6. Remove `uploader` (from imports and props)
+7. Add `apiKey` as a field to the object passed to the `options` prop (add it if you don't have one).
 
 ### Before
 

README.md

@@ -239,7 +239,10 @@ const options = {
     reset,                        // Resets the widget when called.
     updateConfig                  // Updates the widget's config by passing a new config
   }) => {},                       // object to the method's first parameter.
-  onUpdate: files => {},          // Called each time the list of uploaded files change.
+  onUpdate: (event) => {          // Called each time the Upload Widget's list of files change.
+    // event.pendingFiles         // Array of files that are either uploading or queued.
+    // event.uploadedFiles        // Array of files that have been uploaded and not removed.
+  },
   onPreUpload: async file => ({
     errorMessage: "Uh oh!",       // Displays this validation error to the user (if set).
     transformedFile: file         // Uploads 'transformedFile' instead of 'file' (if set).

package.json

@@ -32,7 +32,7 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
-    "@bytescale/upload-widget": "^4.9.0",
+    "@bytescale/upload-widget": "^4.11.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

projects/bytescale-upload-widget-angular/package.json

@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@angular/common": ">=13",
     "@angular/core": ">=13",
-    "@bytescale/upload-widget": "^4.9.0",
+    "@bytescale/upload-widget": "^4.10.0",
     "tslib": "^2.3.0"
   }
 }

projects/bytescale-upload-widget-angular/src/lib/upload-dropzone.component.ts

@@ -1,5 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { UploadWidget, UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";
+import { UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget/dist/config/UploadWidgetOnUpdateEvent";
 
 @Component({
   selector: "upload-dropzone",
@@ -14,7 +15,7 @@ import { UploadWidget, UploadWidgetConfig, UploadWidgetResult } from "@bytescale
 export class UploadDropzoneComponent implements AfterViewInit {
   @Input("options") options?: UploadWidgetConfig;
   @Input("onComplete") onComplete?: (files: UploadWidgetResult[]) => void;
-  @Input("onUpdate") onUpdate?: (files: UploadWidgetResult[]) => void;
+  @Input("onUpdate") onUpdate?: (event: UploadWidgetOnUpdateEvent) => void;
   @Input("width") width: string = "600px";
   @Input("height") height: string = "375px";