ImageKit Media Library Widget


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

!01-mlw-intro.png

Table of Contents

1. Installation
1. Usage
1. Demo

---

Installation

$3

``html

`

$3

Install imagekit-media-library-widget:

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

Now include it in your JS code:

`js
// 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

$3

Include the script in your HTML:

`html

`

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

`html



`
or
`html

`

Configure and instantiate the plugin:

`js
// 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: "",
fileId: "",
searchQuery: "",
collection: {
// pass empty object to open Media Collections page
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: "" // 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);
`

!01-mlw.gif

Note: Google Chrome (Incognito)

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

!07-mlw-incognito.png

---

Demo

Run following commands:

`bash
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`.