updated readme and validateFile and uploadStarted function in IKUpload

Author: ANKUR DWIVEDI

README.md

@@ -85,10 +85,9 @@ yarn add imagekitio-vue
 ## Usage
 
 ### Initialization
-Register it as a plugin to install all components globally.
-
+Import components in your code:
 ```js
-import ImageKit from "imagekitio-vue"
+import ImageKit, { IKImage, IKUpload, IKContext, IKVideo, } from 'imagekitio-vue'
 import { createApp } from 'vue';
 
 const app = createApp({});
@@ -98,18 +97,6 @@ app.use(ImageKit, {
   publicKey: "your_public_api_key", // optional
   // transformationPosition: "path" // optional
 })
-```
-`urlEndpoint` is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints.
-
-`publicKey` and `authenticator` parameters are required if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers.
-
-`transformationPosition` is optional. The default value for this parameter is `path`. Acceptable values are `path` & `query`
-
-_Note: Do not include your Private Key in any client-side code, including this SDK or its initialization. If you pass the `privateKey` parameter while initializing this SDK, it throws an error_
-
-Or, import components individually.
-```
-import { IKImage, IKVideo, IKContext, IKUpload } from "imagekitio-vue"
 
 export default {
   components: {
@@ -119,20 +106,18 @@ export default {
     IKUpload
   }
 }
+
 ```
+`urlEndpoint` is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints.
 
-### Quick examples
-```js
-import ImageKit from "imagekitio-vue"
-import { createApp } from 'vue';
+`publicKey` and `authenticator` parameters are required if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers.
 
-const app = createApp({});
+`transformationPosition` is optional. The default value for this parameter is `path`. Acceptable values are `path` & `query`
 
-app.use(ImageKit, {
-  urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
-  publicKey: "your_public_api_key", // optional
-})
+_Note: Do not include your Private Key in any client-side code, including this SDK or its initialization. If you pass the `privateKey` parameter while initializing this SDK, it throws an error_
 
+### Quick examples
+```js
 // Rendering image using a relative file path
 <IKImage
   path="/default-image.jpg"
@@ -193,12 +178,12 @@ app.use(ImageKit, {
   // Render an image using an absolute URL - https://www1.custom-domain.com/default-image.jpg?tr=w-100
   <IKImage src="https://www1.custom-domain.com/default-image.jpg?tr=w-100" />
   // Height and width manipulation - https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200/default-image.jpg
-  <IKImage path="/default-image.jpg" transformation={[{
+  <IKImage path="/default-image.jpg" :transformation={[{
     "height": "200",
     "width": "200"
   }]} />
   // Chained transformation - https://ik.imagekit.io/your_imagekit_id/tr:h-200,w-200:rt-90/default-image.jpg
-  <IKImage path="/default-image.jpg" transformation={[{
+  <IKImage path="/default-image.jpg" :transformation={[{
     "height": "200",
     "width": "200",
   },
@@ -208,7 +193,7 @@ app.use(ImageKit, {
   // Lazy loading image
   <IKImage
     path="/default-image.jpg"
-    transformation={[{
+    :transformation={[{
       "height": "200",
       "width": "200"
     }]}
@@ -220,37 +205,37 @@ app.use(ImageKit, {
   */
   <IKImage
     path="/default-image.jpg"
-    transformation={[{
+    :transformation={[{
       "height": "200",
       "width": "200"
     }]}
-    lqip={{ active: true }}
+    :lqip={{ active: true }}
   />
   // Low quality image placeholder with custom quality and blur values
   <IKImage
     path="/default-image.jpg"
-    transformation={[{
+    :transformation={[{
       "height": "200",
       "width": "200"
     }]}
-    lqip={{ active: true, quality: 20, blur: 10 }}
+    :lqip={{ active: true, quality: 20, blur: 10 }}
   />
   // Low quality image placeholder and lazy loading original image in the background
   <IKImage
     path="/default-image.jpg"
-    transformation={[{
+    :transformation={[{
       "height": "200",
       "width": "200"
     }]}
     loading="lazy"
-    lqip={{ active: true }}
+    :lqip={{ active: true }}
   />
   // Video element with basic transaformation, reduced quality by 50% using q: 50
 
   <IKVideo
     path={'/default-video.mp4'}
-    transformation={[{ height: 200, width: 200, q: 50 }]}
-    controls={true}
+    :transformation={[{ height: 200, width: 200, q: 50 }]}
+    :controls={true}
   />
 </IKContext>
 
@@ -266,23 +251,24 @@ app.use(ImageKit, {
 /> 
 
 // This promise resolves with an object containing the necessary security parameters i.e `signature`, `token`, and `expire`.
-<IKContext publicKey="your_public_api_key" authenticator="()=>Promise">
+<IKContext publicKey="your_public_api_key" :authenticator="()=>Promise">
   // Simple file upload and response handling
   <IKUpload
-    onError={onError}
-    onSuccess={onSuccess}
+    :onError={onError}
+    :onSuccess={onSuccess}
   />
   // Passing different upload API options
   <IKUpload
     fileName="file-name.jpg"
-    tags={["sample-tag1", "sample-tag2"]}
-    customCoordinates={"10,10,10,10"}
-    isPrivateFile={false}
-    useUniqueFileName={true}
-    responseFields={["tags"]}
-    folder={"/sample-folder"}
-    inputRef={uploadRef}
-    onError={onError} onSuccess={onSuccess}
+    :tags={["sample-tag1", "sample-tag2"]}
+    customCoordinates="10,10,10,10"
+    :isPrivateFile={false}
+    :useUniqueFileName={true}
+    :responseFields={["tags"]}
+    folder="/sample-folder"
+    :ref={uploadRef}
+    :onError={onError} 
+    :onSuccess={onSuccess}
   />
 </IKContext>
 
@@ -341,15 +327,7 @@ app.use(ImageKit, {
 <IKImage 
   path="/default-image.jpg"/>
 
-// Defining urlEndpoint in IKContext
-<IKContext
-  urlEndpoint="https://www.custom-domain.com/">
-    // https://www.custom-domain.com/default-image.jpg
-    // urlEndpoint is taken from the parent IKContext
-    <IKImage path="/default-image.jpg"/>
-</IKContext >
 
-// Using exported component
 <IKContext
   :publicKey="your_url_endpoint"
   :urlEndpoint="your_public_api_key"
@@ -367,7 +345,7 @@ app.use(ImageKit, {
 
 ## Image resizing
 
-`IKImage` components accept the following props:
+The `IKImage` component renders an `img` tag. It is used for rendering and manipulating images in real time. `IKImage` component accepts the following props:
 
 | Prop             | Type | Description                    |
 | :----------------| :----|:----------------------------- |
@@ -494,6 +472,7 @@ See the complete list of transformations supported in ImageKit [here](https://do
 | effectContrast | e-contrast |
 | effectGray | e-grayscale |
 | original | orig |
+| raw | The string provided in raw will be added to the URL as it is. |
 
 </details>
 
@@ -672,7 +651,10 @@ The SDK provides the `IKUpload` component to upload files to the [ImageKit Media
 | overwriteCustomMetadata   | Boolean | Optional. Default is true. If the request does not have customMetadata , overwriteCustomMetadata is set to true and a file already exists at the exact location, exiting customMetadata will be removed. In case the request body has customMetadata, setting overwriteCustomMetadata to false has no effect and request's customMetadata is set on the asset. |
 | customMetadata   | Object | Optional. JSON key-value data to be associated with the asset. |
 | ref   | Reference | Optional. Reference to the core HTMLInputElement.|
-| onSuccess   | Function callback | Optional. Called if the upload is successful. The first and only argument is the response JSON from the upload API |
+| onUploadStart | Function callback | Optional. Called before the upload is started. The first and only argument is the HTML input's change event |
+| onUploadProgress | Function callback | Optional. Called while an upload is in progress. The first and only argument is the ProgressEvent |
+| validateFile | Function callback | Optional. Called before the upload is started to run custom validation. The first and only argument is the file selected for upload. If the callback returns `true`, the upload is allowed to continue. But, if it returns `false`, the upload is not done |
+| onSuccess   | Function callback | Optional. Called if the upload is successful. The first and only argument is the response JSON from the upload API. The request-id, response headers, and HTTP status code are also accessible using the $ResponseMetadata key that is exposed from the [javascript sdk](https://github.com/imagekit-developer/imagekit-javascript#access-request-id-other-response-headers-and-http-status-code) |
 | onError   | Function callback | Optional. Called if upload results in an error. The first and only argument is the error received from the upload API |
 | urlEndpoint      | String | Optional. If not specified, the URL-endpoint specified at the time of [SDK initialization](#initialization) is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
 | publicKey      | String | Optional. If not specified, the `publicKey` specified at the time of [SDK initialization](#initialization) is used.|

src/components/IKUpload.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="file" @change="upload" @click="onUploadClick" />
+    <input type="file" @change="upload" />
   </div>
 </template>
 
@@ -105,17 +105,8 @@ export default {
         return;
       }
 
-
-      if (typeof props.validateFile === "function") {
-        const validationResult = props.validateFile(file.value);
-        if (validationResult && validationResult.error) {
-          if (typeof props.onError === "function") {
-            props.onError({
-              message: validationResult.message,
-            });
-          }
-          return;
-        }
+      if (typeof props.validateFile === "function" && !props.validateFile(file.value)) {
+        return;
       }
 
       if (typeof props.onUploadStart === "function") {
@@ -209,14 +200,10 @@ export default {
       }
     };
 
-    const onUploadClick = () => {
-      props.onUploadStart && props.onUploadStart();
-    };
 
     return {
       file,
       upload,
-      onUploadClick,
       abortUpload
     };
   },