added transformation example

Author: ANKUR DWIVEDI

angular/.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+dist

angular/package-lock.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~9.1.13",
     "@angular/platform-browser-dynamic": "~9.1.13",
     "@angular/router": "~9.1.13",
-    "imagekitio-angular": "^3.0.0",
+    "imagekitio-angular": "^4.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

angular/package.json

@@ -100,6 +100,7 @@ <h1>Hi! This is an ImageKit Angular SDK Demo!</h1>
     [onUploadStart]="onUploadStartFunction"
     [onUploadProgress]="onUploadProgressFunction"
     [authenticator]="authenticator"
+    [transformation]='{ pre: "l-text,i-Imagekit,fs-50,l-end", "post": [{type: "transformation", value: "w-100"}]}'
     class="file-upload-ik">
   </ik-upload>
   <button (click)="onAbortFunction()">Abort</button>

angular/src/app/app.component.html

@@ -15,7 +15,9 @@ export class AppComponent {
 
   transformation: Array<Transformation> = [{
      height: "200",
-     width: "200"
+     width: "200",
+     effectShadow: "bl-15_st-40_x-10_y-N5",
+     effectGradient: "from-red_to-white",
   }];
 
   flexibleTransformationOne: Array<Transformation> = [{

angular/src/app/app.component.ts

@@ -1,2 +1,2 @@
 requests==2.22.0
-imagekitio~=3.0.0
+imagekitio~=4.0.0

python/requirements.txt

@@ -76,6 +76,7 @@
             overwrite_tags=False,
             overwrite_custom_metadata=True,
             # custom_metadata={"test": 12}, # only add custom meta data if you have it in account.
+            transformation={ "pre": 'l-text,i-Imagekit,fs-50,l-end', "post": [{"type": 'transformation', "value": 'w-100'}]}
         ),
     )
 
@@ -111,6 +112,7 @@
             overwrite_tags=False,
             overwrite_custom_metadata=True,
             # custom_metadata={"test": 12}, # only add custom meta data if you have it in account.
+            transformation={ "pre": 'l-text,i-Imagekit,fs-50,l-end', "post": [{"type": 'transformation', "value": 'w-100'}]}
         ),
     )
 
@@ -149,6 +151,7 @@
             overwrite_tags=False,
             overwrite_custom_metadata=True,
             # custom_metadata={"test": 12}, # only add custom meta data if you have it in account.
+            transformation={ "pre": 'l-text,i-Imagekit,fs-50,l-end', "post": [{"type": 'transformation', "value": 'w-100'}]}
         ),
     )
 
@@ -299,6 +302,8 @@
                     "progressive": "true",
                     "effect_sharpen": "-",
                     "effect_contrast": "1",
+                    "effect_shadow": "bl-15_st-40_x-10_y-N5",
+                    "effect_gradient": "from-red_to-white",
                 }
             ],
         }

python/sample.py

@@ -91,6 +91,7 @@ function App() {
           // style={{display: 'none'}} // hide the default input and use the custom upload button
           inputRef={inputRefTest}
           ref={ikUploadRefTest}
+          transformation={{ pre: "l-text,i-Imagekit,fs-50,l-end", post: [{ type: "transformation", value: "w-100" }] }}
         />
         <p>Custom Upload Button</p>
         {ikUploadRefTest && <button onClick={() => ikUploadRefTest.current.click()}>Upload</button>}

react/src/App.js

@@ -19,7 +19,8 @@
 
 # 2 Using full image URL
 image_url = imagekitio.url({src: url_endpoint.chomp("/") + "/default-image.jpg",
-                            transformation: [{height: "300", width: "400"}],})
+                            transformation: [{height: "300", width: "400", effect_shadow: "bl-15",
+                            effect_gradient: "from-lightskyblue_to-mintcream"}],})
 puts "-------------------------------------"
 
 puts "Url using full image url =>  #{image_url}"
@@ -45,7 +46,8 @@
     response_fields: 'tags,customCoordinates,isPrivateFile,metadata',
     tags: %w[abc def],
     use_unique_file_name: false,
-    is_private_file: true
+    is_private_file: true,
+    transformation: { pre: 'l-text,i-Imagekit,fs-50,l-end', post: [{type: 'transformation', value: 'w-100'}]},
     )
 puts "------------------------------------------", "\n"
 puts "Upload Private with binary => ", upload