ImageKit.io Javascript SDK

Javascript SDK for ImageKit provides URL generation for image & video resizing and provides an interface for file upload. This SDK is lightweight and has no dependency. You can also use this as an ES module.

ImageKit is complete media storage, optimization, and transformation solution that comes with an image and video CDN. It can be integrated with your existing infrastructure - storage like AWS S3, web servers, your CDN, and custom domain names, allowing you to deliver optimized images in minutes with minimal code changes.

Installation

Using npm

Install imagekit-javascript

npm install imagekit-javascript --save
#or
yarn add imagekit-javascript

Now import ImageKit

import ImageKit from "imagekit-javascript"

// or
const ImageKit = require("imagekit-javascript")

Using CDN

You can download a specific version of this SDK from a global CDN.

https://unpkg.com/[email protected]/dist/imagekit.min.js

For the latest version, remove the version number i.e.

https://unpkg.com/imagekit-javascript/dist/imagekit.min.js

Now load it using a <script> tag.

<script type="text/javascript" src="https://unpkg.com/imagekit-javascript/dist/imagekit.min.js"></script>

Initialization

urlEndpoint is required to use the SDK. You can get URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints

var imagekit = new ImageKit({
    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id"
});    

publicKey and authenticationEndpoint 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

var imagekit = new ImageKit({
    publicKey: "your_public_api_key",
    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
    authenticationEndpoint: "http://www.yourserver.com/auth",
});    

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

Demo Application

The fastest way to get started is by running the demo application in samples/sample-app folder. Follow these steps to run the application locally:

git clone https://github.com/imagekit-developer/imagekit-javascript.git

cd imagekit-javascript

Create a file .env using sample.env in the directory samples/sample-app and fill in your PRIVATE_KEY, PUBLIC_KEY and URL_ENDPOINT from your imageKit dashboard. SERVER_PORT must also be included as per the sample.env file.

Now start the sample application by running:

// Run it from project root
yarn startSampleApp

Usage

You can use this SDK for URL generation and client-side file uploads.

URL Generation

1. Using image path and image hostname or endpoint

This method allows you to create an URL to access a file using the relative file path and the ImageKit URL endpoint (urlEndpoint). The file can be an image, video, or any other static file supported by ImageKit.

var imageURL = imagekit.url({
    path: "/default-image.jpg",
    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
    transformation: [{
        "height": "300",
        "width": "400"
    }]
});

This results in a URL like

https://ik.imagekit.io/your_imagekit_id/endpoint/tr:h-300,w-400/default-image.jpg

2. Using full image URL

This method allows you to add transformation parameters to an absolute URL. For example, if you have configured a custom CNAME and have absolute asset URLs in your database or CMS, you will often need this.

var imageURL = imagekit.url({
    src: "https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg",
    transformation: [{
        "height": "300",
        "width": "400"
    }]
});

This results in a URL like

https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=h-300%2Cw-400

The .url() method accepts the following parameters

Examples of generating URLs

1. Chained Transformations as a query parameter

var imageURL = imagekit.url({
    path: "/default-image.jpg",
    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/endpoint/",
    transformation: [{
        "height": "300",
        "width": "400"
    }, {
        "rotation": 90
    }],
    transformationPosition: "query"
});

https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=h-300%2Cw-400%3Art-90

2. Sharpening and contrast transforms and a progressive JPG image

There are some transforms like Sharpening 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.

var imageURL = imagekit.url({
    src: "https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg",
    transformation: [{
        "format": "jpg",
        "progressive": "true",
        "effectSharpen": "-",
        "effectContrast": "1"
    }]
});

//Note that because `src` parameter was used, the transformation string gets added as a query parameter `tr`
https://ik.imagekit.io/your_imagekit_id/endpoint/default-image.jpg?tr=f-jpg%2Cpr-true%2Ce-sharpen%2Ce-contrast-1

List of supported transformations

See the complete list of transformations supported in ImageKit here. The SDK gives a name to each transformation parameter e.g. height for h and width for w parameter. It makes your code more readable. If the property does not match any of the following supported options, it is added as it is.

If you want to generate transformations in your application and add them to the URL as it is, use the raw parameter.

File Upload

The SDK provides a simple interface using the .upload() method to upload files to the ImageKit Media Library.

The upload() method requires mandatory file and the fileName parameter. In addition, it accepts all the parameters supported by the ImageKit Upload API.

Also, ensure 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. In addition, the SDK adds a query parameter t with a random value to ensure that the request URL is unique and the response is not cached in Safari iOS. Your backend can ignore this query parameter.

Learn how to implement authenticationEndpoint on your server.

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.

Sample usage

<form action="#" onsubmit="upload()">
    <input type="file" id="file1" />
    <input type="submit" />
</form>
<script type="text/javascript" src="../dist/imagekit.js"></script>

<script>
    /* SDK initilization
     authenticationEndpoint should be implemented on your server. Learn more here - https://docs.imagekit.io/api-reference/upload-file-api/client-side-file-upload#how-to-implement-authenticationendpoint-endpoint
    */
    var imagekit = new ImageKit({
        publicKey: "your_public_api_key",
        urlEndpoint: "https://ik.imagekit.io/your_imagekit_id",
        authenticationEndpoint: "http://www.yourserver.com/auth"
    });
    
    // Upload function internally uses the ImageKit.io javascript SDK
    function upload(data) {
        var file = document.getElementById("file1");

        // Using Callback Function
        imagekit.upload({
            file: file.files[0],
            fileName: "abc1.jpg",
            tags: ["tag1"],
            extensions: [
                {
                    name: "aws-auto-tagging",
                    minConfidence: 80,
                    maxTags: 10
                }
            ]
        }, function(err, result) {
            console.log(result);
        })

        // Using Promises
        imagekit.upload({
            file: file.files[0],
            fileName: "abc1.jpg",
            tags: ["tag1"],
            extensions: [
                {
                    name: "aws-auto-tagging",
                    minConfidence: 80,
                    maxTags: 10
                }
            ]
        }).then(result => {
            console.log(result);
        }).then(error => {
            console.log(error);
        })
    }
</script>

If the upload succeeds, err will be null, and the result will be the same as what is received from ImageKit's servers. If the upload fails, err will be the same as what is received from ImageKit's servers, and the result will be null.

Tracking upload progress using custom XMLHttpRequest

You can use a custom XMLHttpRequest object as the following to bind progress or any other events for a customized implementation.

var fileSize = file.files[0].size;
var customXHR = new XMLHttpRequest();
customXHR.upload.addEventListener('progress', function (e) {
    if (e.loaded <= fileSize) {
        var percent = Math.round(e.loaded / fileSize * 100);
        console.log(`Uploaded ${percent}%`);
    } 

    if(e.loaded == e.total){
        console.log("Upload done");
    }
});

imagekit.upload({
    xhr: customXHR,
    file: file.files[0],
    fileName: "abc1.jpg",
    tags: ["tag1"],
    extensions: [
        {
            name: "aws-auto-tagging",
            minConfidence: 80,
            maxTags: 10
        }
    ]
}).then(result => {
    console.log(result);
}).then(error => {
    console.log(error);
})

Access request-id, other response headers, and HTTP status code

You can access $ResponseMetadata on success or error object to access the HTTP status code and response headers.

// Success
var response = await imagekit.upload({
    file: file.files[0],
    fileName: "abc1.jpg",
    tags: ["tag1"],
    extensions: [
        {
            name: "aws-auto-tagging",
            minConfidence: 80,
            maxTags: 10
        }
    ]
});
console.log(response.$ResponseMetadata.statusCode); // 200

// { 'content-length': "300", 'content-type': 'application/json', 'x-request-id': 'ee560df4-d44f-455e-a48e-29dfda49aec5'}
console.log(response.$ResponseMetadata.headers);

// Error
try {
    await imagekit.upload({
        file: file.files[0],
        fileName: "abc1.jpg",
        tags: ["tag1"],
        extensions: [
            {
                name: "aws-auto-tagging",
                minConfidence: 80,
                maxTags: 10
            }
        ]
    });
} catch (ex) {
    console.log(response.$ResponseMetadata.statusCode); // 400

    // {'content-type': 'application/json', 'x-request-id': 'ee560df4-d44f-455e-a48e-29dfda49aec5'}
    console.log(response.$ResponseMetadata.headers);
}