Javascript plugin for using Imagekit Media Library Widget
npm install imagekit-media-library-widget
This plugin provides access to ImageKit Media Library through an embeddable UI within your own CMS or website.
1. Installation
1. Usage
1. Demo
---
``html`
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");
`
---
Check out our detailed guide on ImageKit Docs: Media Library Widget
Include the script in your HTML:
`html`
Define a DOM container for the plugin. This accepts any CSS selector:
`html``
orhtml`
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: "
},
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: "
}
*/
};
// 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:
---
Run following commands:
`bash`
npm install
npm run samplesample-app
It will install dependencies and serve the included demo: .http://localhost:3000`.
The sample app should be available on