Upload improve

README.md

@@ -75,8 +75,6 @@ var imagekit = new ImageKit({
 });
 ```
 
-> Note: Never include your private API key in client-side code. The SDK will throw an error if you do.
-
 ### Initialization Options
 
 | Option                 | Description                                                                                                                                                                                                                                         | Example                                         |

package.json

@@ -22,6 +22,7 @@
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-typescript": "^8.2.1",
         "@types/node": "^15.6.1",
+        "abortcontroller-polyfill": "^1.7.8",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "chai": "^4.2.0",
         "codecov": "^3.8.0",
@@ -43,7 +44,7 @@
         "dev": "rollup -c -w",
         "export-types": "tsc",
         "build": "rm -rf dist*;rollup -c && yarn export-types",
-        "test": "NODE_ENV=test nyc ./node_modules/mocha/bin/mocha \"test/**/*.js\"",
+        "test": "NODE_ENV=test nyc ./node_modules/mocha/bin/mocha --require ./test/setup.js \"test/**/*.js\"",
         "startSampleApp": "yarn build && cd samples/sample-app/ && yarn install && node index.js",
         "report-coverage": "codecov"
     },

rollup.config.js

@@ -12,8 +12,7 @@ export default [
     output: {
       name: "ImageKit",
       file: pkg.browser,
-      format: "umd",
-      sourceMap: true,
+      format: "umd"
     },
     plugins: [
       nodeResolve({ extensions: [".ts"] }),
@@ -34,8 +33,8 @@ export default [
   {
     input: "src/index.ts",
     output: [
-      { file: pkg.main, format: "cjs", exports: "default" },
-      { file: pkg.module, format: "es", exports: "default" },
+      { file: pkg.main, format: "cjs", exports: "named" },
+      { file: pkg.module, format: "es", exports: "named" },
     ],
     plugins: [
       nodeResolve({ extensions: [".ts"] }),

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/constants/errorMessages.ts

@@ -1,24 +1,24 @@
 export default {
-  MANDATORY_INITIALIZATION_MISSING: { message: "Missing urlEndpoint during SDK initialization", help: "" },
-  INVALID_TRANSFORMATION_POSITION: { message: "Invalid transformationPosition parameter", help: "" },
-  PRIVATE_KEY_CLIENT_SIDE: { message: "privateKey should not be passed on the client side", help: "" },
-  MISSING_UPLOAD_DATA: { message: "Missing data for upload", help: "" },
-  MISSING_UPLOAD_FILE_PARAMETER: { message: "Missing file parameter for upload", help: "" },
-  MISSING_UPLOAD_FILENAME_PARAMETER: { message: "Missing fileName parameter for upload", help: "" },
-  MISSING_AUTHENTICATION_ENDPOINT: { message: "Missing authentication endpoint for upload", help: "" },
-  MISSING_PUBLIC_KEY: { message: "Missing public key for upload", help: "" },
-  AUTH_ENDPOINT_TIMEOUT: { message: "The authenticationEndpoint you provided timed out in 60 seconds", help: "" },
-  AUTH_ENDPOINT_NETWORK_ERROR: { message: "Request to authenticationEndpoint failed due to network error", help: "" },
-  AUTH_INVALID_RESPONSE: { message: "Invalid response from authenticationEndpoint. The SDK expects a JSON response with three fields i.e. signature, token and expire.", help: "" },
+  MANDATORY_INITIALIZATION_MISSING: { message: "Missing urlEndpoint during SDK initialization" },
+  INVALID_TRANSFORMATION_POSITION: { message: "Invalid transformationPosition parameter" },
+  PRIVATE_KEY_CLIENT_SIDE: { message: "privateKey should not be passed on the client side" },
+  MISSING_UPLOAD_DATA: { message: "Missing data for upload" },
+  MISSING_UPLOAD_FILE_PARAMETER: { message: "Missing file parameter for upload" },
+  MISSING_UPLOAD_FILENAME_PARAMETER: { message: "Missing fileName parameter for upload" },
+  MISSING_AUTHENTICATION_ENDPOINT: { message: "Missing authentication endpoint for upload" },
+  MISSING_PUBLIC_KEY: { message: "Missing public key for upload" },
+  AUTH_ENDPOINT_TIMEOUT: { message: "The authenticationEndpoint you provided timed out in 60 seconds" },
+  AUTH_ENDPOINT_NETWORK_ERROR: { message: "Request to authenticationEndpoint failed due to network error" },
+  AUTH_INVALID_RESPONSE: { message: "Invalid response from authenticationEndpoint. The SDK expects a JSON response with three fields i.e. signature, token and expire." },
   UPLOAD_ENDPOINT_NETWORK_ERROR: {
-    message: "Request to ImageKit upload endpoint failed due to network error",
-    help: "",
+    message: "Request to ImageKit upload endpoint failed due to network error"
   },
-  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: ""},
+  INVALID_UPLOAD_OPTIONS: { message: "Invalid uploadOptions parameter" },
+  MISSING_SIGNATURE: { message: "Missing signature for upload. The SDK expects token, signature and expire for authentication." },
+  MISSING_TOKEN: { message: "Missing token for upload. The SDK expects token, signature and expire for authentication." },
+  MISSING_EXPIRE: { message: "Missing expire for upload. The SDK expects token, signature and expire for authentication." },
+  INVALID_TRANSFORMATION: { message: "Invalid transformation parameter. Please include at least pre, post, or both." },
+  INVALID_PRE_TRANSFORMATION: { message: "Invalid pre transformation parameter." },
+  INVALID_POST_TRANSFORMATION: { message: "Invalid post transformation parameter." },
+  UPLOAD_ABORTED: { message: "Request aborted by the user" },
 };

src/index.ts

@@ -1,91 +1,11 @@
-import { version } from "../package.json";
-import errorMessages from "./constants/errorMessages";
-import { ImageKitOptions, UploadOptions, UploadResponse, UrlOptions } from "./interfaces";
-import IKResponse from "./interfaces/IKResponse";
-import { upload } from "./upload/index";
-import respond from "./utils/respond";
-import { url } from "./url/index";
-import transformationUtils from "./utils/transformation";
+import { UploadOptions, UploadResponse, UrlOptions } from "./interfaces";
+import { upload } from "./upload";
+import { buildURL, generateTransformationString } from "./url";
 
-function mandatoryParametersAvailable(options: ImageKitOptions) {
-  return options.urlEndpoint;
-}
+export { buildURL, generateTransformationString, upload };
 
-const promisify = function <T = void>(thisContext: ImageKit, fn: Function) {
-  return function (...args: any[]): Promise<T> | void {
-    if (args.length === fn.length && typeof args[args.length - 1] !== "undefined") {
-      if (typeof args[args.length - 1] !== "function") {
-        throw new Error("Callback must be a function.");
-      }
-      fn.call(thisContext, ...args);
-    } else {
-      return new Promise<T>((resolve, reject) => {
-        const callback = function (err: Error, ...results: any[]) {
-          if (err) {
-            return reject(err);
-          } else {
-            resolve(results.length > 1 ? results : results[0]);
-          }
-        };
-        args.pop()
-        args.push(callback);
-        fn.call(thisContext, ...args);
-      });
-    }
-  };
+export type {
+  UrlOptions,
+  UploadOptions,
+  UploadResponse
 };
-
-class ImageKit {
-  options: ImageKitOptions = {
-    publicKey: "",
-    urlEndpoint: "",
-    transformationPosition: transformationUtils.getDefault(),
-  };
-
-  constructor(opts: ImageKitOptions) {
-    this.options = { ...this.options, ...(opts || {}) };
-    if (!mandatoryParametersAvailable(this.options)) {
-      throw errorMessages.MANDATORY_INITIALIZATION_MISSING;
-    }
-
-    if (!transformationUtils.validParameters(this.options)) {
-      throw errorMessages.INVALID_TRANSFORMATION_POSITION;
-    }
-  }
-
-  /**
-   * A utility function to generate asset URL. It applies the specified transformations and other parameters to the URL.
-   */
-  url(urlOptions: UrlOptions): string {
-    return url(urlOptions, this.options);
-  }
-
-  /**
-   * For uploading files directly from the browser to ImageKit.io.
-   *
-   * {@link https://imagekit.io/docs/api-reference/upload-file/upload-file#how-to-implement-client-side-file-upload}
-   */
-  upload(uploadOptions: UploadOptions, options?: Partial<ImageKitOptions>): Promise<IKResponse<UploadResponse>>
-  upload(uploadOptions: UploadOptions, callback: (err: Error | null, response: IKResponse<UploadResponse> | null) => void, options?: Partial<ImageKitOptions>): void;
-  upload(uploadOptions: UploadOptions, callbackOrOptions?: ((err: Error | null, response: IKResponse<UploadResponse> | null) => void) | Partial<ImageKitOptions>, options?: Partial<ImageKitOptions>): void | Promise<IKResponse<UploadResponse>> {
-    let callback;
-    if (typeof callbackOrOptions === 'function') {
-      callback = callbackOrOptions;
-    } else {
-      options = callbackOrOptions || {};
-    }
-    if (!uploadOptions || typeof uploadOptions !== "object") {
-      return respond(true, errorMessages.INVALID_UPLOAD_OPTIONS, callback);
-    }
-    var mergedOptions = {
-      ...this.options,
-      ...options,
-    };
-    const { xhr: userProvidedXHR } = uploadOptions || {};
-    delete uploadOptions.xhr;
-    const xhr = userProvidedXHR || new XMLHttpRequest();
-    return promisify<IKResponse<UploadResponse>>(this, upload)(xhr, uploadOptions, mergedOptions, callback);
-  }
-}
-
-export default ImageKit;

src/interfaces/UploadOptions.ts

@@ -16,7 +16,7 @@ interface AbsObject {
 
 type PostTransformation = TransformationObject | GifToVideoOrThumbnailObject | AbsObject;
 
-interface Transformation{
+interface Transformation {
   pre?: string
   post?: PostTransformation[]
 }
@@ -35,28 +35,38 @@ export interface UploadOptions {
    *      Pass the full URL, for example - https://www.example.com/rest-of-the-image-path.jpg.
    */
   file: string | Blob | File;
+
+  /**
+  * The name with which the file has to be uploaded.
+  * The file name can contain:
+  * - Alphanumeric Characters: a-z , A-Z , 0-9 (including unicode letters, marks, and numerals in other languages)
+  * - Special Characters: . _ and -
+  * Any other character including space will be replaced by _
+  */
+  fileName: string;
+
   /**
    * HMAC-SHA1 digest of the token+expire using your ImageKit.io private API key as a key. This should be in lowercase.
    * Warning: Signature must be calculated on the server-side. This field is required for authentication when uploading a file from the client-side.
    */
   signature: string;
+
   /**
    * A unique value generated by the client, which will be used by the ImageKit.io server to recognize and prevent subsequent retries for the same request. We suggest using V4 UUIDs, or another random string with enough entropy to avoid collisions.
    * Note: Sending a value that has been used in the past will result in a validation error. Even if your previous request resulted in an error, you should always send a new value for this field.
    */
   token: string;
+
   /**
    * The time until your signature is valid. It must be a Unix time in less than 1 hour into the future. It should be in seconds.
    */
   expire: number;
+
   /**
-   * The name with which the file has to be uploaded.
-   * The file name can contain:
-   * - Alphanumeric Characters: a-z , A-Z , 0-9 (including unicode letters, marks, and numerals in other languages)
-   * - Special Characters: . _ and -
-   * Any other character including space will be replaced by _
+   * The public API key of your ImageKit account. You can find it in the [ImageKit dashboard](https://imagekit.io/dashboard/developer/api-keys).
    */
-  fileName: string;
+  publicKey: string;
+
   /**
    * Whether to use a unique filename for this file or not.
    * - Accepts true or false.
@@ -145,5 +155,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;
 }