Merge pull request #92 from imagekit-developer/SDK-68

Sdk 68

.github/workflows/nodejs.yml

@@ -22,6 +22,11 @@ jobs:
         npm install -g @angular/cli@1.4.10
         cd sdk
         npm install
+        cd tests/test-apps/sample-server
+        echo PRIVATE_KEY=${{ secrets.ik_private_key }} >> .env;
+        npm install
+        npm run server &
+        cd ../../../
         npm run test:ci
       env:
         CI: true
@@ -49,7 +54,6 @@ jobs:
         echo production: false, >> environment.ts;
         echo URL_ENDPOINT:\"https://ik.imagekit.io/sdktestingik\", >> environment.ts;
         echo PUBLIC_KEY:\"${{ secrets.ik_public_key }}\", >> environment.ts;
-        echo AUTHENTICATION_ENDPOINT:\"http://localhost:3000/auth\" >> environment.ts;
         echo '};' >>  environment.ts;
         less environment.ts
 
@@ -80,5 +84,4 @@ jobs:
         CI: true
         PUBLIC_KEY: ${{ secrets.ik_public_key }}
         PRIVATE_KEY: ${{ secrets.ik_private_key }}
-        URL_ENDPOINT: https://ik.imagekit.io/sdktestingik
-        AUTHENTICATION_ENDPOINT: 'http://localhost:3000/auth'
+        URL_ENDPOINT: https://ik.imagekit.io/sdktestingik

README.md

@@ -11,6 +11,44 @@ ImageKit Angular SDK allows you to resize, optimize, deliver, and upload images
 
 ImageKit is complete media storage, optimization, and transformation solution that comes with an image and video CDN. It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.
 
+## Breaking changes - Upgrading from 2.x to 3.x version
+3.x version has breaking changes as listed below.
+* In version 3.0.0, we have deprecated the use of the `authenticationEndpoint` parameter. Instead, the SDK now introduces a new parameter named `authenticator`. This parameter expects an asynchronous function that resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`.
+
+Example implementation for `authenticator` using `Fetch API`.
+
+``` javascript
+
+authenticator = async () => {
+    try {
+
+        // You can pass headers as well and later validate the request source in the backend, or you can use headers for any other use case.
+        const headers = {
+          'Authorization': 'Bearer your-access-token',
+          'CustomHeader': 'CustomValue'
+        };
+
+        const response = await fetch('server_endpoint', {
+            headers
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Request failed with status ${response.status}: ${errorText}`);
+        }
+
+        const data = await response.json();
+        const { signature, expire, token } = data;
+        return { signature, expire, token };
+    } catch (error) {
+        throw new Error(`Authentication request failed: ${error.message}`);
+    }
+};
+```
+
+*Note*: Avoid generating security parameters on the client side. Always send a request to your backend to retrieve security parameters, as the generation of these parameters necessitates the use of your Imagekit `privateKey`, which must not be included in client-side code.
+
+
 ## Installation
 
 ```shell
@@ -45,7 +83,6 @@ To use the SDK, you need to provide it with a few configuration parameters. The
     ImagekitioAngularModule.forRoot({
       publicKey: environment.publicKey,
       urlEndpoint: environment.urlEndpoint,
-      authenticationEndpoint: environment.authenticationEndpoint
     })
   ],
   providers: [],
@@ -54,7 +91,7 @@ To use the SDK, you need to provide it with a few configuration parameters. The
 ```
 
 * `urlEndpoint` is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard/url-endpoints.
-* `publicKey` and `authenticationEndpoint` parameters are required if you want to use the SDK for client-side file upload. You can get `publicKey` from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard/developer/api-keys.
+* `publicKey` and `authenticator` parameters are required if you want to use the SDK for client-side file upload. You can get `publicKey` from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard/developer/api-keys.
 * `transformationPosition` is optional. The default value for the parameter is `path`. Acceptable values are `path` & `query`
 
 > Note: Do not include your [private key](https://docs.imagekit.io/api-reference/api-introduction/api-keys#private-key) in any client-side code.
@@ -101,6 +138,12 @@ To use the SDK, you need to provide it with a few configuration parameters. The
     }]'
 ></ik-image>
 
+// Renders an image with text overlaid.
+<ik-image 
+  path="/default-image.jpg"
+  [transformation]='[{ "width": 300, "height": 300 },{ "raw": "l-text,i-Imagekit,rt-90,co-0651D5,fs-50,l-end" }]'>
+</ik-image>
+
 // Lazy loading
 <ik-image path="/default-image.jpg" loading="lazy"></ik-image>
 
@@ -138,6 +181,15 @@ To use the SDK, you need to provide it with a few configuration parameters. The
   fileName= "test.jpg" 
   (onError)="handleUploadError($event)"
   (onSuccess)="handleUploadSuccess($event)"
+  [tags]='["sample-tag1", "sample-tag2"]'
+  customCoordinates="10,10,10,10"
+  [isPrivateFile]="false"
+  [responseFields]='["tags"]'
+  folder="/sample-folder"
+  [validateFile]="validateFileFunction"
+  [onUploadStart]="onUploadStartFunction"
+  [onUploadProgress]="onUploadProgressFunction"
+  [authenticator]="authenticator"
 ></ik-upload>
 ```
 
@@ -178,7 +230,7 @@ The `ik-image` component renders an `img` tag. It is used for rendering and mani
 The `transformation` prop is an array of objects. Each object can have the following properties. When you specify more than one object, each object is added as a chained transformation. For example:
 
 ```js
-// IThe following resizes the image to 300x300px 
+// The following resizes the image to 300x300px 
 flexibleTransformationOne: Array<Transformation> = [{
   height: "300",
   width: "300"
@@ -228,34 +280,6 @@ See the complete list of transformations supported in ImageKit [here](https://do
 | rotation | rt |
 | blur | bl |
 | named | n |
-| overlayX | ox |
-| overlayY | oy |
-| overlayFocus | ofo |
-| overlayHeight | oh |
-| overlayWidth | ow |
-| overlayImage | oi |
-| overlayImageTrim | oit |
-| overlayImageAspectRatio | oiar |
-| overlayImageBackground | oibg |
-| overlayImageBorder | oib |
-| overlayImageDPR | oidpr |
-| overlayImageQuality | oiq |
-| overlayImageCropping | oic |
-| overlayImageTrim | oit |
-| overlayText | ot |
-| overlayTextFontSize | ots |
-| overlayTextFontFamily | otf |
-| overlayTextColor | otc |
-| overlayTextTransparency | oa |
-| overlayAlpha | oa |
-| overlayTextTypography | ott |
-| overlayBackground | obg |
-| overlayTextEncoded | ote |
-| overlayTextWidth | otw |
-| overlayTextBackground | otbg |
-| overlayTextPadding | otp |
-| overlayTextInnerAlignment | otia |
-| overlayRadius | or |
 | progressive | pr |
 | lossless | lo |
 | trim | t |
@@ -436,9 +460,9 @@ The SDK provides a component to upload files to the [ImageKit Media Library](htt
 | onError   | Function callback | Optional. EventEmitter. Called if the upload results in error. The first and only argument is the error received from the upload API |
 | urlEndpoint      | String | Optional. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
 | publicKey      | String | Optional |
-| authenticationEndpoint      | String | Optional |
+| authenticator      | ()=>Promise<{signature:string,token:string,expiry:number}> | Optional |
 
-Note: All three `urlEndpoint`, `publicKey` and `authenticationEndpoint` must be present in the attribute for them to take effect. Otherwise, the SDK will fall back to the values specified in `app.module.ts`.
+Note: `urlEndpoint` and `publicKey` must be present in the attribute for them to take effect. Otherwise, the SDK will fall back to the values specified in `app.module.ts`.
 
 Sample usage
 
@@ -505,6 +529,32 @@ Custom button example, using buttonRef
 </button>
 ```
 
+Abort upload
+
+```js
+// Added to app.component.ts
+@ViewChild('upload') uploadComponent:IkUploadComponent;// @ViewChild can be used to get instance of IKUpload component.
+
+onAbortFunction(){
+    this.uploadComponent && this.uploadComponent.abort();
+}
+
+// Added to app.component.html
+<ik-upload 
+  #upload
+  fileName= "test.jpg" 
+  (onError)="handleUploadError($event)"
+  (onSuccess)="handleUploadSuccess($event)"
+  [validateFile]="validateFileFunction"
+  [onUploadStart]="onUploadStartFunction"
+  [onUploadProgress]="onUploadProgressFunction"
+  [authenticator]="authenticator"
+></ik-upload>
+<button 
+  (click)="onAbortFunction()"
+>Abort</button>
+```
+
 ## Accessing Imagekit core JS SDK
 
 Sample usage
@@ -515,17 +565,15 @@ import { ImagekitService } from 'imagekitio-angular';
 // Initializing the service with configuration
 service = new ImagekitService({
   urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
-    publicKey: "your_public_key",
-    authenticationEndpoint: "your_authentication_endpoint"
+  publicKey: "your_public_key",
 });
 
 // Generating URL
-// Note: You can choose to override the publicKey and authenticationEndpoint if necessary
+// Note: You can choose to override the publicKey if necessary
 const url = this.service.ikInstance.url({
   path: "/default-image.jpg",
   urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
   publicKey: "your_overriding_public_key_if_needed",
-  authenticationEndpoint: "your_overriding_authentication_endpoint_if_needed"
 });
 
 ```

sdk/lib/package.json

@@ -1,11 +1,11 @@
 {
   "name": "imagekitio-angular",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "author": "ImageKit",
   "license": "MIT",
   "private": false,
   "dependencies": {
-    "imagekit-javascript": "^1.5.4"
+    "imagekit-javascript": "^2.0.0"
   },
   "ngPackage": {
     "$schema": "./node_modules/ng-packagr/ng-package.schema.json",

sdk/lib/src/imagekitio-angular/ik-image/ik-image.component.ts

@@ -59,9 +59,11 @@ export class IkImageComponent implements AfterViewInit, OnInit, OnChanges {
     }
   }
 
-  onImageLoaded = (event) => {
-    if(this.loading != 'lazy' && event.srcElement.src === this.lqipUrl){
-      this.loadImage(this, this.url);
+  onImageLoaded = (event: { srcElement: { src: string; }; }) => {
+    const { loading, lqipUrl, url } = this;
+
+    if (loading !== 'lazy' && event.srcElement.src === lqipUrl) {
+      this.loadImage(this, url);
     }
   };