Merge pull request #4 from imagekit-developer/test-case

Test cases & Call backs for upload success & failure

Author: imagekitio

.github/workflows/nodejs.yml

@@ -19,9 +19,8 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - name: npm install, build, and test
       run: |
-        npm i -g yarn
-        yarn install
-        yarn test:ci
+        npm install
+        npm run test:ci
       env:
         CI: true
         REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}

.github/workflows/npmpublish.yml

@@ -4,50 +4,46 @@ on:
   release:
     types: [published]
 
-
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [8.x, 10.x, 12.x]
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
-      run: |
-        npm i -g yarn
-        yarn
-        yarn test:ci
-        yarn build
-      env:
-        CI: true
-        REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
-        REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
-        REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, build, and test
+        run: |
+          npm i
+          npm run test:ci
+          npm run build
+        env:
+          CI: true
+          REACT_APP_PUBLIC_KEY: ${{ secrets.ik_public_key }}
+          REACT_APP_PRIVATE_KEY: ${{ secrets.ik_private_key }}
+          REACT_APP_URL_ENDPOINT: ${{ secrets.ik_url_endopint }}
 
   publish:
     needs: build
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 12
-        registry-url: https://registry.npmjs.org/
-    - name: yarn publish
-      run: |
-        npm i -g yarn
-        yarn
-        yarn build
-        yarn config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
-        yarn publish
-      env:
-        NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-        CI: true
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - name: npm publish
+        run: |
+          npm i
+          npm run build
+          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          CI: true

.gitignore

@@ -3,4 +3,3 @@ node_modules
 .vscode
 lib
 dist
-src/test/__snapshots__

DEVELOPMENT.md

@@ -0,0 +1,24 @@
+## Building package
+
+Execute following command from the root folder to build the library. This creates a package in `dist/imagekitio-react.js` folder.
+```sh
+npm install # run for first time
+npm run build
+```
+
+## Running test cases
+
+The designated directory for tests is `/src/test` folder. All tests will be run against the assertion present in the `/src/test/__snapshot__` folder. To create this file you need to just run below command just once. Any update in the tests can be updated to by pressing `u` while the test environment is running.
+
+Execute following command from the root folder to start testing.
+```sh
+npm run test
+```
+
+## Running sample frontend react app
+
+Please refer to the sample app `Readme.md` for details.
+
+## Running sample backend server
+
+Please refer to the sample app `Readme.md` for details.

README.md

@@ -5,9 +5,9 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?label=Follow&style=social)](https://twitter.com/ImagekitIo)
 
-React SDK for [ImageKit.io](https://imagekit.io) which implements client-side upload and URL generation for use inside a react application.
+React SDK for [ImageKit.io](https://imagekit.io), which implements client-side upload and URL generation for use inside a react application.
 
-ImageKit is a complete image optimization and transformation solution that comes with an [image CDN](https://imagekit.io/features/imagekit-infrastructure) and media storage. It can be integrated with your existing infrastructure - storages like AWS S3, web servers, your CDN and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.
+ImageKit is a complete image optimization and transformation solution that comes with an [image CDN](https://imagekit.io/features/imagekit-infrastructure) and media storage. It can be integrated with your existing infrastructure - storages like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.
 
 ## Installation
 
@@ -22,63 +22,62 @@ Include the components in your code:
 The library includes 3 Components: 
 * [IKContext](#IKContext)
 
-* [IKImage](#IKImage)
+* [IKImage - URL generation](#IKImage)
 
-* [IKUpload](#file-upload)
+* [IKUpload - File upload](#file-upload)
 
 ### IKContext
 
 In order to use the SDK, you need to provide it with a few configuration parameters. The configuration parameters can be applied directly to the `IKImage` component or using an `IKContext` component. example:
 
 ```js
-    <IKContext
-      publicKey="your_public_api_key"
-      urlEndpoint="<https://ik.imagekit.io/your_imagekit_id>"
-      transformationPosition="path"
-      authenticationEndpoint="<http://www.yourserver.com/auth">
-    </IKContext>
+<IKContext
+  publicKey="your_public_api_key"
+  urlEndpoint="<https://ik.imagekit.io/your_imagekit_id>"
+  transformationPosition="path"
+  authenticationEndpoint="<http://www.yourserver.com/auth">
+</IKContext>
 ```
 
 `publicKey` and `urlEndpoint` are mandatory parameters for SDK initialization.
 `authenticationEndpoint` is essential if you want to use the SDK for client-side uploads.
-`transformationPosition` is optional. The default value for the parametere is `path`. Acceptable values are `path` & `query`
+`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_
+_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_
 
-### IKImage
+### IKImage - URL generation
 
-The IKImage component component defines a ImageKit Image tag. example usage:
+The IKImage component component defines an ImageKit Image tag. example usage:
 
 #### Using image path and image hostname or endpoint
 
 ```js
-  <IKContext publicKey="your_public_api_key" urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/" >
-    <IKImage path="/default-image.jpg" transformation={[{
-      "height": "300",
-      "width": "400"
-    }]} />
-  </IKContext>
-
-  ```
+<IKContext publicKey="your_public_api_key" urlEndpoint="https://ik.imagekit.io/your_imagekit_id/endpoint/" >
+  <IKImage path="/default-image.jpg" transformation={[{
+    "height": "300",
+    "width": "400"
+  }]} />
+</IKContext>
+```
 #### Using full image URL  
 
-  ```js
-  <IKImage 
-      src="<full_image_url_from_db>" 
-      transformation={[{
-      "height": "300",
-      "width": "400"
-    }]}
-    />
-  ```
+```js
+<IKImage 
+    src="<full_image_url_from_db>" 
+    transformation={[{
+    "height": "300",
+    "width": "400"
+  }]}
+/>
+```
 
 `src` is the complete URL that is already mapped to ImageKit.
 `path` is the location of the image in the ImageKit cloud. `urlEndpoint` + `path` makes the complete url.
 `transformations` is optional. The transformations to be applied to a given image. It is declared in the form of an array of objects, where each object specifies the transformation you need. The values are mentioned below.
 
 #### List of supported transformations
 
-The complete list of transformations supported and their usage in ImageKit can be found [here](https://docs.imagekit.io/imagekit-docs/image-transformations). The SDK gives a name to each transformation parameter, making the code simpler and readable. If a transformation is supported in ImageKit, but a name for it cannot be found in the table below, then use the transformation code from ImageKit docs as the name when using in the `url` function.
+The complete list of transformations supported and their usage in ImageKit can be found [here](https://docs.imagekit.io/features/image-transformations). The SDK gives a name to each transformation parameter, making the code simpler and readable. If a transformation is supported in ImageKit, but a name for it cannot be found in the table below, then use the transformation code from ImageKit docs as the name when using in the `url` function.
 
 | Supported Transformation Name | Translates to parameter |
 | ----------------------------- | ----------------------- |
@@ -137,7 +136,7 @@ const transformations = [{
 The above image will apply transformation of width = 90 and height = 180 on the image. Since some transformatinos are destructive you might want to control the order in which the transforms are applied.
 
 ##### Chained Transforms
-Chained transforms make it easy to specify the order the transform are applied. example: 
+Chained transforms make it easy to specify the order in which transformations are applied. example: 
 
 ```js
 const transformations = [
@@ -150,7 +149,7 @@ const transformations = [
   }
 ];
 ```
-In the above case, rotation will be performed first and resizing according to width and aspect ratio will be performed afterwards.
+In the above case, the rotation will be performed first, and resizing according to width and aspect ratio will be performed afterward.
 
 #### Low Quality Image Placeholders (LQIP) for images
 The SDK supports automatic support for LQIP for your images, if you set lqip to true in the image component. example:
@@ -162,30 +161,53 @@ The SDK supports automatic support for LQIP for your images, if you set lqip to
 `quality` decided the quaility of placeholder image. It can be any numeric value, a low number means low quality, and high number means high quality.
 
 ##### How does the lqip work?
-The component tries to keep the it simple, it loads a lower quality image using the quality parameter to load a lower quality image, which is then replaced with the actual quality image later.
+The component tries to keep it simple. It loads a lower quality image using the quality parameter to load a lower quality image, which is then replaced with the actual quality image later.
 
-#### File Upload
+### IKUpload - File Upload
 The SDK provides a simple Component to upload files to the ImageKit Media Library. It accepts `fileName` parameter as a prop. The file parameter is provided as an input from the user. 
 
-Also make sure that you have specified `authenticationEndpoint` during SDK initialization. The SDK makes an HTTP GET request to this endpoint and expects a JSON response with three fields i.e. `signature`, `token` and `expire`.  
+Also, make sure that you have specified `authenticationEndpoint` during SDK initialization. The SDK makes an HTTP GET request to this endpoint and expects a JSON response with three fields i.e. `signature`, `token` and `expire`.  
 
 [Learn how to implement authenticationEndpoint](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#how-to-implement-authenticationendpoint-endpoint) on your server.
 
 An example of this server is provided in the samples folder of the SDK.
 
 Sample Usage
 ```js
- <IKContext  
-    publicKey="your_public_api_key" 
-    urlEndpoint="<https://ik.imagekit.io/your_imagekit_id>" 
-    authenticationEndpoint="<http://www.yourserver.com/auth">
-    <IKUpload fileName="my-upload" />
- </IKContext>
+<IKContext
+  publicKey="your_public_api_key" 
+  urlEndpoint="<https://ik.imagekit.io/your_imagekit_id>" 
+  authenticationEndpoint="<http://www.yourserver.com/auth">
+  <IKUpload fileName="my-upload" />
+</IKContext>
 ```
 
 `IKUpload` component accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#request-structure-multipart-form-data) as props e.g. `tags`, `useUniqueFileName`, `folder` etc.
 
-#### Error Handling
+You can use `onSuccess` and `onError` callbacks to handle success and failure, respectively. You can pass your custom functions to handle the response from API.
+
+```js
+const onError = err => {
+  console.log("Error");
+  console.log(err);
+};
+
+const onSuccess = res => {
+  console.log("Success");
+  console.log(res);
+};
+
+<IKContext 
+  publicKey="your_public_api_key" 
+  urlEndpoint="<https://ik.imagekit.io/your_imagekit_id>" 
+  authenticationEndpoint="<http://www.yourserver.com/auth">
+  <IKUpload fileName="custom_file_name" onError={onError} onSuccess={onSuccess} />
+</IKContext>
+```
+## Demo Application
+The fastest way to get started is by running the demo application. You can run the code locally. The source code is in samples/sample-app. For the instructions in [readme.md](https://github.com/imagekit-developer/imagekit-react/blob/test-case/samples/sample-app/README.md) file within [samples/sample-app](https://github.com/imagekit-developer/imagekit-react/tree/test-case/samples/sample-app) folder.
+
+## Error Handling
 We are using Error Boundaries to handle errors in the UI. `ErrorBoundary` is used to handle errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. example: 
 
 ```js
@@ -196,3 +218,15 @@ We are using Error Boundaries to handle errors in the UI. `ErrorBoundary` is use
   }]} />
 </ErrorBoundary>
 ```
+
+## Support
+
+For any feedback or to report any issues or general implementation support please reach out to [[email protected]](mailto:[email protected])
+
+## Links
+* [Documentation](https://docs.imagekit.io)
+* [Main website](https://imagekit.io)
+
+## License
+
+Released under the MIT license.