ImageKit Media Library Widget

This plugin provides access to ImageKit Media Library through an embeddable UI within your own CMS or website.

Table of Contents

1. Installation
2. Usage
3. Demo

---

Installation

Using CDN

<script src="https://unpkg.com/imagekit-media-library-widget/dist/imagekit-media-library-widget.min.js"></script>

Using NPM

Install imagekit-media-library-widget:

npm install --save imagekit-media-library-widget

Now include it in your JS code:

// ES6 module
import IKMediaLibraryWidgetCore from 'imagekit-media-library-widget';

// Common JS syntax
const IKMediaLibraryWidgetCore = require("imagekit-media-library-widget");

---

Usage

Check out our detailed guide on ImageKit Docs: Media Library Widget

Quick start (HTML and JS)

Include the script in your HTML:

<script src="https://unpkg.com/imagekit-media-library-widget/dist/imagekit-media-library-widget.min.js"></script>

Define a DOM container for the plugin. This accepts any CSS selector:

<div id="container"></div>

or

<div class="container"></div>

Configure and instantiate the plugin:

// configuration options
var config = {
  container: '#container',   // the element in which the Media Library Widget will be rendered
  className: 'media-library-widget',
  dimensions: {
    height: '100%',
    width: '100%',
  },
  view: 'modal',  // inline | modal (default)
  renderOpenButton: true,  // false | true (default)
  /*
  mlSettings: {  // optional
    initialView: {  
      
      // sets initial state of Media Library, refer to the ImageKit Docs for more information
      // https://docs.imagekit.io/sample-projects/embeddable-media-library-widget

      // only one of the following parameters can be passed at a time
    
      folderPath: "<your-folder-path>",
      fileId: "<file_id>",
      searchQuery: "<search-query>",
      collection: { 
         // pass empty object to open Media Collections page
         id: "<collection-id>" // open specific Media Collection
      },
      fileType: "images" | "videos" | "cssJs" | "others"
    },
    multiple: true // false | true (default),
    maxFiles: 20 // relevant when `multiple` is true
    toolbar: {
      // sets the visibility of the toolbar buttons
      // defaults to true for all buttons
      showCloseButton: false,
      showInsertButton: false
    },
    queryParams: {
      // Add custom query parameters to the Media Library widget URL
      // These will be appended to the final URL as query parameters
      customParam1: "value1",
      customParam2: 123,
      customParam3: true
    },
    loginViaSSO: true, // to automatically initiate Single Sign-On (SSO) login by default
    widgetImagekitId: "<your-imagekit-id>" // the ImageKit ID used to authenticate and open the Media Library
  }
  */
};

// define callback handler
function callback(payload) {
  // this is the callback handler
  // … consume json payload …
}

// instantiate the Media Library Widget plugin
var mediaLibraryWidget = new IKMediaLibraryWidget(config, callback);

Note: Google Chrome (Incognito)

To use this plugin on Google Chrome in Incognito mode, you need to enable third-party cookies:

---

Demo

Run following commands:

npm install
npm run sample

It will install dependencies and serve the included demo: sample-app. The sample app should be available on http://localhost:3000.