Skip to content

Commit b405e32

Browse files
Manu ChaudharyManu Chaudhary
Manu Chaudhary
authored and
Manu Chaudhary
committed
doc and sample code update
1 parent cd1bf6e commit b405e32

File tree

2 files changed

+61
-54
lines changed

2 files changed

+61
-54
lines changed

README.md

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ You can use this SDK for URL generation and client-side file uploads.
4343

4444
**1. Using image path and image hostname or endpoint**
4545

46-
This method allows you to create a URL using the `path` where the image exists and the URL endpoint (`urlEndpoint`) you want to use to access the image. You can refer to the documentation [here](https://docs.imagekit.io/imagekit-docs/url-endpoints) to read more about URL endpoints in ImageKit and the section about [image origins](https://docs.imagekit.io/imagekit-docs/configure-origin) to understand about paths with different kinds of origins.
46+
This method allows you to create a URL using the `path` where the image exists and the URL endpoint (`urlEndpoint`) you want to use to access the image. You can refer to the documentation [here](https://docs.imagekit.io/integration/url-endpoints) to read more about URL endpoints in ImageKit and the section about [image origins](https://docs.imagekit.io/integration/configure-origin) to understand about paths with different kinds of origins.
4747

4848
```
4949
var imageURL = imagekit.url({
@@ -91,7 +91,7 @@ The `.url()` method accepts the following parameters
9191
| urlEndpoint | Optional. The base URL to be appended before the path of the image. If not specified, the URL Endpoint specified at the time of SDK initialization is used. For example, https://ik.imagekit.io/your_imagekit_id/endpoint/ |
9292
| path | Conditional. This is the path at which the image exists. For example, `/path/to/image.jpg`. Either the `path` or `src` parameter need to be specified for URL generation. |
9393
| src | Conditional. This is the complete URL of an image already mapped to ImageKit. For example, `https://ik.imagekit.io/your_imagekit_id/endpoint/path/to/image.jpg`. Either the `path` or `src` parameter need to be specified for URL generation. |
94-
| transformation | Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. Different steps of a [chained transformation](https://docs.imagekit.io/imagekit-docs/chained-transformations) can be specified as different objects of the array. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it gets applied as it is in the URL. |
94+
| transformation | Optional. An array of objects specifying the transformation to be applied in the URL. The transformation name and the value should be specified as a key-value pair in the object. Different steps of a [chained transformation](https://docs.imagekit.io/features/image-transformations/chained-transformations) can be specified as different objects of the array. The complete list of supported transformations in the SDK and some examples of using them are given later. If you use a transformation name that is not specified in the SDK, it gets applied as it is in the URL. |
9595
| transformationPostion | Optional. Default value is `path` that places the transformation string as a path parameter in the URL. Can also be specified as `query` which adds the transformation string as the query parameter `tr` in the URL. If you use `src` parameter to create the URL, then the transformation string is always added as a query parameter. |
9696
| queryParameters | Optional. These are the other query parameters that you want to add to the final URL. These can be any query parameters and not necessarily related to ImageKit. Especially useful, if you want to add some versioning parameter to your URLs. |
9797

@@ -117,7 +117,7 @@ https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=h-300%2Cw-
117117

118118
**2. Sharpening and contrast transforms and a progressive JPG image**
119119

120-
There are some transforms like [Sharpening](https://docs.imagekit.io/imagekit-docs/image-enhancement---color-manipulation) that can be added to the URL with or without any other value. To use such transforms without specifying a value, specify the value as "-" in the transformation object, otherwise, specify the value that you want to be added to this transformation.
120+
There are some transforms like [Sharpening](https://docs.imagekit.io/features/image-transformations/image-enhancement-and-color-manipulation) that can be added to the URL with or without any other value. To use such transforms without specifying a value, specify the value as "-" in the transformation object, otherwise, specify the value that you want to be added to this transformation.
121121

122122
```
123123
var imageURL = imagekit.url({
@@ -137,7 +137,7 @@ https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=f-jpg%2Cpr
137137

138138
#### List of supported transformations
139139

140-
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.
140+
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.
141141

142142
| Supported Transformation Name | Translates to parameter |
143143
|-------------------------------|-------------------------|
@@ -187,7 +187,7 @@ The complete list of transformations supported and their usage in ImageKit can b
187187

188188
### File Upload
189189

190-
The SDK provides a simple interface using the `.upload()` method to upload files to the ImageKit Media Library. It accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/imagekit-docs/client-side-file-upload).
190+
The SDK provides a simple interface using the `.upload()` method to upload files to the ImageKit Media Library. It accepts all the parameters supported by the [ImageKit Upload API](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload).
191191

192192
The `upload()` method requires at least the `file` and the `fileName` parameter as an input from the user. The `publicKey` parameter is added automatically. Additionally, this method uses the `authenticationEndpoint` that is specified at the time of SDK initialization. Client-side file upload requires a token, expiry timestamp and signature, and these values can be safely generated on the server-side using your ImageKit account's private key.
193193

@@ -203,32 +203,39 @@ app.get('/auth', function(req, res) {
203203

204204
This method returns a callback with the `error` and `result` as arguments.
205205

206-
You can pass other parameters supported by the ImageKit upload API using the same parameter name as specified in the upload API documentation. For example, to specify tags for a file at the time of upload use the `tags` parameter as specified in the [documentation here](https://docs.imagekit.io/imagekit-docs/client-side-file-upload).
206+
You can pass other parameters supported by the ImageKit upload API using the same parameter name as specified in the upload API documentation. For example, to specify tags for a file at the time of upload use the `tags` parameter as specified in the [documentation here](https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload).
207207

208208
Sample usage
209209
```
210210
<form action="#" onsubmit="upload()">
211-
<input type="file" id="my-file" />
212-
<input type="submit" />
211+
<input type="file" id="file1" />
212+
<input type="submit" />
213213
</form>
214+
<script type="text/javascript" src="../dist/imagekit.js"></script>
214215
215216
<script>
217+
// SDK initilization
218+
// authenticationEndpoint should be implemented on your server
219+
var imagekit = new ImageKit({
220+
publicKey : "your_public_api_key",
221+
urlEndpoint : "https://ik.imagekit.io/your_imagekit_id",
222+
authenticationEndpoint : "http://www.yourserver.com/auth"
223+
});
224+
225+
// Upload function internally uses the ImageKit.io javascript SDK
216226
function upload(data) {
217-
var file = document.getElementById("my-file");
227+
var file = document.getElementById("file1");
218228
imagekit.upload({
219229
file : file.files[0],
220-
fileName : "abc.jpg",
230+
fileName : "abc1.jpg",
221231
tags : ["tag1"]
222232
}, function(err, result) {
223233
console.log(arguments);
224234
console.log(imagekit.url({
225235
src: result.url,
226-
transformation : [{
227-
height: 300,
228-
width: 400
229-
}]
236+
transformation : [{ HEIGHT: 300, WIDTH: 400}]
230237
}));
231-
});
238+
})
232239
}
233240
</script>
234241
```

package.json

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
{
2-
"name": "imagekit-javascript",
3-
"version": "1.0.1",
4-
"description": "Javascript SDK for using ImageKit.io in the browser",
5-
"main": "index.js",
6-
"dependencies": {
7-
"lodash": "^4.17.15",
8-
"url-polyfill": "^1.1.7"
9-
},
10-
"devDependencies": {
11-
"grunt": "^1.0.4",
12-
"grunt-browserify": "^5.3.0"
13-
},
14-
"scripts": {
15-
"test": "echo \"Error: no test specified\" && exit 1"
16-
},
17-
"repository": {
18-
"type": "git",
19-
"url": "git+https://github.com/imagekit-developer/imagekit-javascript.git"
20-
},
21-
"keywords": [
22-
"imagekit",
23-
"javascript",
24-
"sdk",
25-
"js",
26-
"sdk",
27-
"image",
28-
"optimization",
29-
"image",
30-
"transformation",
31-
"image",
32-
"resize"
33-
],
34-
"author": "ImageKit Developer",
35-
"license": "MIT",
36-
"bugs": {
37-
"url": "https://github.com/imagekit-developer/imagekit-javascript/issues"
38-
},
39-
"homepage": "https://github.com/imagekit-developer/imagekit-javascript#readme"
40-
}
2+
"name": "imagekit-javascript",
3+
"version": "1.0.2",
4+
"description": "Javascript SDK for using ImageKit.io in the browser",
5+
"main": "index.js",
6+
"dependencies": {
7+
"lodash": "^4.17.15",
8+
"url-polyfill": "^1.1.7"
9+
},
10+
"devDependencies": {
11+
"grunt": "^1.0.4",
12+
"grunt-browserify": "^5.3.0"
13+
},
14+
"scripts": {
15+
"test": "echo \"Error: no test specified\" && exit 1"
16+
},
17+
"repository": {
18+
"type": "git",
19+
"url": "git+https://github.com/imagekit-developer/imagekit-javascript.git"
20+
},
21+
"keywords": [
22+
"imagekit",
23+
"javascript",
24+
"sdk",
25+
"js",
26+
"sdk",
27+
"image",
28+
"optimization",
29+
"image",
30+
"transformation",
31+
"image",
32+
"resize"
33+
],
34+
"author": "ImageKit Developer",
35+
"license": "MIT",
36+
"bugs": {
37+
"url": "https://github.com/imagekit-developer/imagekit-javascript/issues"
38+
},
39+
"homepage": "https://github.com/imagekit-developer/imagekit-javascript#readme"
40+
}

0 commit comments

Comments
 (0)