Add "pendingFiles" and "uploadedFiles" to OnUpdate callback

Author: ljwagerfield

MIGRATE.md

@@ -8,10 +8,11 @@ Steps:
 2. Uninstall `@upload-io/jquery-uploader` and `uploader`
 3. Replace `"@upload-io/jquery-uploader"` with `"@bytescale/upload-widget-jquery"` 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. Remove `$.uploader.init(...)`
-7. Replace `.uploader({...})` with `.bytescaleUploadWidget({...})`
-8. Add `apiKey` as a field to the object passed to the `bytescaleUploadWidget` method (add it if you don't have one).
+5. Replace `onUpdate: (files) => {}` with `onUpdate: ({uploadedFiles}) => {}`.
+6. Remove `uploader` (from imports and props)
+7. Remove `$.uploader.init(...)`
+8. Replace `.uploader({...})` with `.bytescaleUploadWidget({...})`
+9. Add `apiKey` as a field to the object passed to the `bytescaleUploadWidget` method (add it if you don't have one).
 
 ### Before
 

package-lock.json

@@ -75,7 +75,7 @@
     "jquery": "3.6.0"
   },
   "dependencies": {
-    "@bytescale/upload-widget": "^4.9.0"
+    "@bytescale/upload-widget": "^4.11.0"
   },
   "devDependencies": {
     "@babel/cli": "7.17.6",

package.json

@@ -1,5 +1,5 @@
 import "@bytescale/upload-widget-jquery";
-import { UploadWidgetResult } from "@bytescale/upload-widget";
+import { UploadWidgetResult, UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget";
 
 ($("button") as any).bytescaleUploadWidget({
   apiKey: "free",
@@ -19,12 +19,12 @@ import { UploadWidgetResult } from "@bytescale/upload-widget";
     width: "600px",
     height: "375px"
   },
-  onUpdate: (files: UploadWidgetResult[]) => {
-    if (files.length === 0) {
+  onUpdate: ({ uploadedFiles }: UploadWidgetOnUpdateEvent) => {
+    if (uploadedFiles.length === 0) {
       console.log("No files selected in dropzone.");
     } else {
       console.log("Files uploaded in dropzone:");
-      console.log(files.map(f => f.fileUrl));
+      console.log(uploadedFiles.map(f => f.fileUrl));
     }
   }
 });