payload imagekit

Payload CMS ImageKit Plugin

This plugin sync your image to ImageKit.

Installation

npm install payloadcms-plugin-imagekit

Usage

Install this plugin within your Payload as follows:

import { buildConfig } from "payload/config";
import imagekitPlugin from "payloadcms-plugin-imagekit";

export default buildConfig({
  // ...
  plugins: [
    imagekitPlugin({
      config: {
        publicKey: "your_public_api_key",
        privateKey: "your_private_api_key",
        endpoint: "https://ik.imagekit.io/your_imagekit_id/",
      },
      collections: {
        media: {
          uploadOption: {
            folder: "some folder",
            extensions: [
              {
                name: "aws-auto-tagging",
                minConfidence: 80, // only tags with a confidence value higher than 80% will be attached
                maxTags: 10, // a maximum of 10 tags from aws will be attached
              },
              {
                name: "google-auto-tagging",
                minConfidence: 70, // only tags with a confidence value higher than 70% will be attached
                maxTags: 10, // a maximum of 10 tags from google will be attached
              },
            ],
          },
          savedProperties: ["url", "AITags"],
        },
      },
    }),
  ],
});

Plugin options

This plugin have 1 parameter that contain an object.

Option	Description
config (required)	ImageKit Config ImageKitOptions
collections (optional)	Collections options

config

Type object

• publicKey: type string
• privateKey: type string
• endpoint: type string;

collections

Type object

• [key] (required)
  type: string
  description: Object keys should be PayloadCMS collection name that store the media/image.
  value type: object
  value options:

  • uploadOption (optional)
    type: object
    type detail: TUploadOption. Except file.
    description: An options to saved in ImageKit.

  • savedProperties (optional)
    type: []string
    type detail: TImageKitProperties. Except thumbnailUrl and fileId.
    description: An object that saved to PayloadCMS/Database that you may need it for your Frontend.

  • disableLocalStorage (optional)
    type: boolean
    default: true
    description: Completely disable uploading files to disk locally. More

Payload Cloud

If your project is hosted using Payload Cloud - their default file storage solution will conflict with this plugin. You will need to disable file storage via the Payload Cloud plugin like so:

// ...
plugins: [
  payloadCloud({
    storage: false, // Disable file storage
  }),
  imagekitPlugin({
    // Your imagekit config here
  }),
],
// ...

Screenshot