feat: add upload progress callback and abort signal support

Author: manu4543

src/constants/errorMessages.ts

@@ -15,10 +15,11 @@ export default {
     help: "",
   },
   INVALID_UPLOAD_OPTIONS: { message: "Invalid uploadOptions parameter", help: "" },
-  MISSING_SIGNATURE: { message: "Missing signature for upload. The SDK expects token, signature and expire for authentication.", help: ""},
-  MISSING_TOKEN: { message: "Missing token for upload. The SDK expects token, signature and expire for authentication.", help: ""},
-  MISSING_EXPIRE: { message: "Missing expire for upload. The SDK expects token, signature and expire for authentication.", help: ""},
-  INVALID_TRANSFORMATION: { message: "Invalid transformation parameter. Please include at least pre, post, or both.", help: ""},
-  INVALID_PRE_TRANSFORMATION: { message: "Invalid pre transformation parameter.", help: ""},
-  INVALID_POST_TRANSFORMATION: { message: "Invalid post transformation parameter.", help: ""},
+  MISSING_SIGNATURE: { message: "Missing signature for upload. The SDK expects token, signature and expire for authentication.", help: "" },
+  MISSING_TOKEN: { message: "Missing token for upload. The SDK expects token, signature and expire for authentication.", help: "" },
+  MISSING_EXPIRE: { message: "Missing expire for upload. The SDK expects token, signature and expire for authentication.", help: "" },
+  INVALID_TRANSFORMATION: { message: "Invalid transformation parameter. Please include at least pre, post, or both.", help: "" },
+  INVALID_PRE_TRANSFORMATION: { message: "Invalid pre transformation parameter.", help: "" },
+  INVALID_POST_TRANSFORMATION: { message: "Invalid post transformation parameter.", help: "" },
+  UPLOAD_ABORTED: { message: "Request aborted by the user", help: "" },
 };

src/interfaces/UploadOptions.ts

@@ -145,5 +145,15 @@ export interface UploadOptions {
   /**
    * Optional `checks` parameters can be used to run server-side checks before files are uploaded to the Media Library.
    */
-  checks?: string
+  checks?: string;
+
+  /**
+   * Optional callback function that will be called with the progress event when the file is being uploaded.
+   */
+  onProgress?: (event: ProgressEvent) => void;
+
+  /**
+   * Optional AbortSignal object that can be used to abort the upload request
+   */
+  signal?: AbortSignal;
 }

src/upload/index.ts

@@ -1,7 +1,7 @@
 import errorMessages from "../constants/errorMessages";
-import respond from "../utils/respond";
-import { request } from "../utils/request";
 import { ImageKitOptions, UploadOptions, UploadResponse } from "../interfaces";
+import { request } from "../utils/request";
+import respond from "../utils/respond";
 
 export const upload = (
   xhr: XMLHttpRequest,
@@ -24,17 +24,17 @@ export const upload = (
     return;
   }
 
-  if(!uploadOptions.token) {
+  if (!uploadOptions.token) {
     respond(true, errorMessages.MISSING_TOKEN, callback)
     return
   }
 
-  if(!uploadOptions.signature) {
+  if (!uploadOptions.signature) {
     respond(true, errorMessages.MISSING_SIGNATURE, callback)
     return
   }
 
-  if(!uploadOptions.expire) {
+  if (!uploadOptions.expire) {
     respond(true, errorMessages.MISSING_EXPIRE, callback)
     return
   }
@@ -73,7 +73,7 @@ export const upload = (
       if (key === "file" && typeof uploadOptions.file != "string") {
         formData.append('file', uploadOptions.file, String(uploadOptions.fileName));
       } else if (key === "tags" && Array.isArray(uploadOptions.tags)) {
-        formData.append('tags', uploadOptions.tags.join(",")); 
+        formData.append('tags', uploadOptions.tags.join(","));
       } else if (key === 'signature') {
         formData.append("signature", uploadOptions.signature);
       } else if (key === 'expire') {
@@ -87,18 +87,36 @@ export const upload = (
       } else if (key === "customMetadata" && typeof uploadOptions.customMetadata === "object" &&
         !Array.isArray(uploadOptions.customMetadata) && uploadOptions.customMetadata !== null) {
         formData.append('customMetadata', JSON.stringify(uploadOptions.customMetadata));
-      } else if(key === "transformation" && typeof uploadOptions.transformation === "object" &&
+      } else if (key === "transformation" && typeof uploadOptions.transformation === "object" &&
         uploadOptions.transformation !== null) {
         formData.append(key, JSON.stringify(uploadOptions.transformation));
       } else if (key === 'checks' && uploadOptions.checks) {
         formData.append("checks", uploadOptions.checks);
-      } else if(uploadOptions[key] !== undefined) {
+      } else if (uploadOptions[key] !== undefined) {
         formData.append(key, String(uploadOptions[key]));
       }
     }
   }
 
   formData.append("publicKey", options.publicKey);
 
+  if (uploadOptions.onProgress) {
+    xhr.upload.onprogress = function (event: ProgressEvent) {
+      if (uploadOptions.onProgress) uploadOptions.onProgress(event)
+    };
+  }
+
+  if (uploadOptions.signal && uploadOptions.signal) {
+    if (uploadOptions.signal.aborted) { // If the signal is already aborted, return immediately with the 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);
+    });
+  }
+
   request(xhr, formData, callback);
 };