feat: implement abort signal support and upload progress tracking in upload process

Author: manu4543

samples/sample-app/views/index.pug

@@ -23,6 +23,7 @@ html
         script(type='text/javascript' src="./imagekit.min.js")
         script.
             try {
+                window.controller = new AbortController();
                 var imagekit = new ImageKit({
                     publicKey: "!{publicKey}",
                     urlEndpoint: "!{urlEndpoint}",
@@ -51,9 +52,11 @@ html
                     var statusEl = document.getElementById("status");
                     statusEl.innerHTML = "Uploading...";
 
+                    
                     // Use this if you want to track upload progress
                     var customXHR = new XMLHttpRequest();
                     customXHR.upload.addEventListener('progress', function (e) {
+                        console.log("On progress event handler from customXHR");
                         if (e.loaded <= fileSize) {
                             var percent = Math.round(e.loaded / fileSize * 100);
                             console.log(`Uploaded ${percent}%`);
@@ -94,6 +97,11 @@ html
                                 token: securityParametersObj.token,
                                 signature: securityParametersObj.signature,
                                 expire: securityParametersObj.expire,
+                                signal: window.controller.signal,
+                                onProgress: function(e) {
+                                    console.log("On progress event handler from SDK");
+                                    console.log(e.loaded);
+                                },
                                 //- extensions: [
                                 //-     {
                                 //-         name: "aws-auto-tagging",
@@ -102,6 +110,7 @@ html
                                 //-     }
                                 //- ],
                             }, function(err, result) {
+                                debugger;
                                 if (err) {
                                     statusEl.innerHTML = "Error uploading image. "+ err.message; 
                                     console.log(err) 

src/upload/index.ts

@@ -93,6 +93,7 @@ export const upload = (
       } else if (key === 'checks' && uploadOptions.checks) {
         formData.append("checks", uploadOptions.checks);
       } else if (uploadOptions[key] !== undefined) {
+        if (["onProgress", "signal"].includes(key)) continue;
         formData.append(key, String(uploadOptions[key]));
       }
     }
@@ -106,15 +107,28 @@ export const upload = (
     };
   }
 
-  if (uploadOptions.signal && uploadOptions.signal) {
+  function onAbortHandler() {
+    xhr.abort();
+    // Provide the reason or fallback error
+    // @ts-ignore for TypeScript versions lacking `signal.reason`
+    respond(true, uploadOptions.signal?.reason ?? errorMessages.UPLOAD_ABORTED, callback);
+  }
+
+  if (uploadOptions.signal) {
     if (uploadOptions.signal.aborted) { // If the signal is already aborted, return immediately with the reason
+      // @ts-ignore for TypeScript versions lacking `signal.reason`
       respond(true, uploadOptions.signal.reason ?? errorMessages.UPLOAD_ABORTED, callback);
       return;
     }
+
     // If the signal is not already aborted, add an event listener to abort the request when the signal is aborted
-    uploadOptions.signal.addEventListener("abort", function () {
-      xhr.abort();
-      respond(true, this.reason, callback);
+    uploadOptions.signal.addEventListener("abort", onAbortHandler);
+
+    // On XHR completion (success, fail, or abort), remove just this abort handler
+    xhr.addEventListener("loadend", () => {
+      if (uploadOptions.signal) {
+        uploadOptions.signal.removeEventListener("abort", onAbortHandler);
+      }
     });
   }