added transformation effectShadow and effect

Author: ANKUR DWIVEDI

README.md

@@ -296,6 +296,8 @@ If you want to generate transformations in your application and add them to the
 | effectUSM | e-usm |
 | effectContrast | e-contrast |
 | effectGray | e-grayscale |
+| effectShadow | e-shadow |
+| effectGradient | e-gradient |
 | original | orig |
 | raw | The string provided in raw will be added in the URL as it is. |
 

src/constants/supportedTransforms.ts

@@ -87,141 +87,6 @@ const supportedTransforms: { [key: string]: string } = {
    */
   named: "n",
 
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-oi
-   */
-  overlayImage: "oi",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-aspect-ratio-oiar
-   */
-  overlayImageAspectRatio: "oiar",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-background-oibg
-   */
-  overlayImageBackground: "oibg",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-border-oib
-   */
-  overlayImageBorder: "oib",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-dpr-oidpr
-   */
-  overlayImageDPR: "oidpr",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-quality-oiq
-   */
-  overlayImageQuality: "oiq",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-image-cropping
-   */
-  overlayImageCropping: "oic",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#trimming-of-the-overlay-image
-   */
-  overlayImageTrim: "oit",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-x-position-ox
-   */
-  overlayX: "ox",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-y-position-oy
-   */
-  overlayY: "oy",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-focus-ofo
-   */
-  overlayFocus: "ofo",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-height-oh
-   */
-  overlayHeight: "oh",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-width-ow
-   */
-  overlayWidth: "ow",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-ot
-   */
-  overlayText: "ot",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-size-ots
-   */
-  overlayTextFontSize: "ots",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-font-otf
-   */
-  overlayTextFontFamily: "otf",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-color-otc
-   */
-  overlayTextColor: "otc",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-transparency-oa
-   */
-  overlayTextTransparency: "oa",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-transparency-oa
-   */
-  overlayAlpha: "oa",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-typography-ott
-   */
-  overlayTextTypography: "ott",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-background-obg
-   */
-  overlayBackground: "obg",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-encoded-ote
-   */
-  overlayTextEncoded: "ote",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-width-otw
-   */
-  overlayTextWidth: "otw",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-background-otbg
-   */
-  overlayTextBackground: "otbg",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-padding-otp
-   */
-  overlayTextPadding: "otp",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-text-inner-alignment-otia
-   */
-  overlayTextInnerAlignment: "otia",
-
-  /**
-   * @link https://docs.imagekit.io/features/image-transformations/overlay#overlay-radius-or
-   */
-  overlayRadius: "or",
-
   /**
    * @link https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#progressive-image-pr
    */
@@ -282,6 +147,16 @@ const supportedTransforms: { [key: string]: string } = {
    */
   original: "orig",
 
+  /**
+   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation#shadow-e-shadow
+   */
+  effectShadow: "e-shadow",
+
+  /**
+   * @link https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation.md#gradient-e-gradient
+   */
+  effectGradient: "e-gradient",
+
   /**
    * @link https://docs.imagekit.io/features/image-transformations/conditional-transformations
    */

src/interfaces/UploadOptions.ts

@@ -1,3 +1,12 @@
+interface postTransformation{
+  type: 'abs' | 'thumbnail' | 'transformation' | 'gif-to-video'
+  protocol?: 'hls' | 'dash'
+  value?: string
+}
+interface transformation{
+  pre?: string
+  post?: postTransformation[]
+}
 /**
  * Options used when uploading a file
  *
@@ -113,6 +122,8 @@ export interface UploadOptions {
    */
   customMetadata?: string | Record<string, string | number | boolean | Array<string | number | boolean>>
 
+  transformation?: transformation
+
   /**
    * Optional XMLHttpRequest object that you can send for upload API request. You can listen to `progress` and other events on this object for any custom logic. 
    */

src/upload/index.ts

@@ -60,7 +60,10 @@ 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(uploadOptions[key] !== undefined) {
+      } else if(key === "transformation" && typeof uploadOptions.transformation === "object" &&
+        uploadOptions.transformation !== null) {
+        formData.append(key, JSON.stringify(uploadOptions.transformation));
+      }else if(uploadOptions[key] !== undefined) {
         formData.append(key, String(uploadOptions[key]));
       }
     }

test/upload.js

@@ -1091,4 +1091,35 @@ describe("File upload", function () {
         expect(callback.calledOnce).to.be.true;
         sinon.assert.calledWith(callback, null, uploadSuccessResponseObj);
     });
+
+    it('With pre and post transformation', async function () {
+        const fileOptions = {
+            ...securityParameters,
+            fileName: "test_file_name",
+            file: "test_file",
+            responseFields: "tags, customCoordinates, isPrivateFile, metadata",
+            useUniqueFileName: false,
+            transformation: { pre: 'w-100', post: [{type: 'transformation', value: ''}]}
+        };
+        var callback = sinon.spy();
+
+        imagekit.upload(fileOptions, callback);
+
+        expect(server.requests.length).to.be.equal(1);
+        await sleep();
+        successUploadResponse();
+        await sleep();
+
+        var arg = server.requests[0].requestBody;
+
+        expect(arg.get('file')).to.be.equal("test_file");
+        expect(arg.get('fileName')).to.be.equal("test_file_name");
+        expect(arg.get('responseFields')).to.be.equal("tags, customCoordinates, isPrivateFile, metadata");
+        expect(arg.get('useUniqueFileName')).to.be.equal('false');
+        expect(arg.get('publicKey')).to.be.equal('test_public_key');
+        expect(arg.get('transformation')).to.be.equal(JSON.stringify(fileOptions.transformation));
+
+        expect(callback.calledOnce).to.be.true;
+        sinon.assert.calledWith(callback, null, uploadSuccessResponseObj);
+    });
 });

test/url-generation.js

@@ -182,43 +182,30 @@ describe("URL generation", function () {
         expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400:rndm_trnsf-abcd/test_path.jpg`);
     });
 
-    it('overlayImage', function () {
+    it('Overlay image', function () {
         const url = imagekit.url({
             path: "/test_path.jpg",
             transformation: [{
                 "height": "300",
                 "width": "400",
-                overlayImage: "overlay.jpg"
+                "raw": "l-image,i-overlay.jpg,w-100,b-10_CDDC39,l-end"
             }]
         })
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,oi-overlay.jpg/test_path.jpg`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,l-image,i-overlay.jpg,w-100,b-10_CDDC39,l-end/test_path.jpg`);
     });
 
-    it('overlayImage with slash in path', function () {
+    it('Overlay image with slash in path', function () {
         const url = imagekit.url({
             path: "/test_path.jpg",
             transformation: [{
                 "height": "300",
                 "width": "400",
-                overlayImage: "/path/to/overlay.jpg"
+                "raw": "l-image,i-/path/to/overlay.jpg,w-100,b-10_CDDC39,l-end"
             }]
         })
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,oi-path@@to@@overlay.jpg/test_path.jpg`);
-    });
-
-    it('overlayX', function () {
-        const url = imagekit.url({
-            path: "/test_path.jpg",
-            transformation: [{
-                "height": "300",
-                "width": "400",
-                overlayX: 10
-            }]
-        })
-
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,ox-10/test_path.jpg`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,l-image,i-/path/to/overlay.jpg,w-100,b-10_CDDC39,l-end/test_path.jpg`);
     });
 
     it('Border', function () {
@@ -234,7 +221,7 @@ describe("URL generation", function () {
         expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,b-20_FF0000/test_path.jpg`);
     });
 
-     it('transformation with empty key and empty value', function () {
+    it('transformation with empty key and empty value', function () {
         const url = imagekit.url({
             path: "/test_path.jpg",
             transformation: [{
@@ -263,11 +250,11 @@ describe("URL generation", function () {
         const url = imagekit.url({
             path: "/test_path.jpg",
             transformation: [{
-                overlayImage: ""
+                effectShadow: ""
             }]
         })
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:oi-/test_path.jpg`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:e-shadow-/test_path.jpg`);
     });
 
     it('transformation with - value', function () {
@@ -299,32 +286,6 @@ describe("URL generation", function () {
                 rotation: 90,
                 blur: 10,
                 named: "some_name",
-                overlayX: 35,
-                overlayY: 35,
-                overlayFocus: "bottom",
-                overlayHeight: 20,
-                overlayWidth: 20,
-                overlayImage: "/folder/file.jpg", // leading slash case
-                overlayImageTrim: false,
-                overlayImageAspectRatio: "4:3",
-                overlayImageBackground: "0F0F0F",
-                overlayImageBorder: "10_0F0F0F",
-                overlayImageDPR: 2,
-                overlayImageQuality: 50,
-                overlayImageCropping: "force",
-                overlayText: "two words",
-                overlayTextFontSize: 20,
-                overlayTextFontFamily: "Open Sans",
-                overlayTextColor: "00FFFF",
-                overlayTextTransparency: 5,
-                overlayTextTypography: "b",
-                overlayBackground: "00AAFF55",
-                overlayTextEncoded: "b3ZlcmxheSBtYWRlIGVhc3k%3D",
-                overlayTextWidth: 50,
-                overlayTextBackground: "00AAFF55",
-                overlayTextPadding: 40,
-                overlayTextInnerAlignment: "left",
-                overlayRadius: 10,
                 progressive: true,
                 lossless: true,
                 trim: 5,
@@ -336,12 +297,14 @@ describe("URL generation", function () {
                 effectUSM: "2-2-0.8-0.024",
                 effectContrast: true,
                 effectGray: true,
+                effectShadow: 'e-shadow-bl-15_st-40_x-10_y-N5',
+                effectGradient: 'from-red_to-white',
                 original: true,
                 raw: "h-200,w-300,l-image,i-logo.png,l-end"
             }]
         })
 
-        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,ar-4-3,q-40,c-force,cm-extract,fo-left,f-jpeg,r-50,bg-A94D34,b-5-A94D34,rt-90,bl-10,n-some_name,ox-35,oy-35,ofo-bottom,oh-20,ow-20,oi-folder@@file.jpg,oit-false,oiar-4:3,oibg-0F0F0F,oib-10_0F0F0F,oidpr-2,oiq-50,oic-force,ot-two%20words,ots-20,otf-Open%20Sans,otc-00FFFF,oa-5,ott-b,obg-00AAFF55,ote-b3ZlcmxheSBtYWRlIGVhc3k%3D,otw-50,otbg-00AAFF55,otp-40,otia-left,or-10,pr-true,lo-true,t-5,md-true,cp-true,di-folder@@file.jpg,dpr-3,e-sharpen-10,e-usm-2-2-0.8-0.024,e-contrast-true,e-grayscale-true,orig-true,h-200,w-300,l-image,i-logo.png,l-end/test_path.jpg`);
+        expect(url).equal(`https://ik.imagekit.io/test_url_endpoint/tr:h-300,w-400,ar-4-3,q-40,c-force,cm-extract,fo-left,f-jpeg,r-50,bg-A94D34,b-5-A94D34,rt-90,bl-10,n-some_name,pr-true,lo-true,t-5,md-true,cp-true,di-folder@@file.jpg,dpr-3,e-sharpen-10,e-usm-2-2-0.8-0.024,e-contrast-true,e-grayscale-true,e-shadow-e-shadow-bl-15_st-40_x-10_y-N5,e-gradient-from-red_to-white,orig-true,h-200,w-300,l-image,i-logo.png,l-end/test_path.jpg`);
     });
 });